Slackワークフローで動的なフィールドを組み込む

先日の記事ではSlackワークフローアプリのビルド＆デプロイを自動化できるようになったのでその続きの記事になります。

おさらい

ワークフローのフォームは上図のようにテキストフィールドやチェックボックス、ファイルアップロード等の入力フィールドを実装することができます。

しかし、この辺りのドキュメントによると、外部のデータの動的な変更に対応することができないので都度デプロイする必要があります。

そこで、CI/CDにちょこっと手を入れて擬似的に動的な振る舞いを実現します。

外部データの変更を検知してデプロイできるようにする

外部データとはSlackワークフローアプリ自体では管理しないようなデータ、Webアプリでいうバックエンドから取得する不定期に更新される情報です。

例えば下図のようにフォームの入力フィールドにEC2インスタンスの一覧を選択式で表示したい、というケースがあったとします。

表示したいEC2インスタンスが増減すると、静的にコーディングしているために都度修正が必要になります。そこで、ビルド時に外部データ（EC2インスタンス一覧）を取得してコードに静的に埋め込む方法があるのでサンプル的な実現方法を紹介します。

まずは静的ファイルの雛形を作ります。functions/resources.tsというファイルで下記のように作ります。

export const instances = []

いかにもインスタンスが入ってそうなコードです。

次に、先日のbuildspec.ymlを修正してdocker buildの直前でシェルスクリプトを実行します。

- sh get_instances.sh

get_instances.shの内容は下記のようにawsコマンドでEC2一覧を取得し、整形してtsファイルを出力しています。以下の例だとリージョン下のインスタンス全部が対象になるので、要件次第でタグや名前で適切にフィルタリングします。

gist.github.com

実行結果は以下のような形式になります。

export const instances = [
  {
    "name": "EC2インスタンス1",
    "value": `{インスタンスID1}`
  },
  {
    "name": "EC2インスタンス2",
    "value": "{インスタンスID2}"
  },
  {
    "name": "EC2インスタンス3",
    "value": "{インスタンスID3}"
  }
]