AWS Chatbot のカスタム通知を使って Amplify のデプロイ結果を Slack に通知する

Posts

概要

AWS Amplify でデプロイした結果を Slack に通知する仕組みは、AWS Simple Notification Service (Amazon SNS) と AWS Chatbot を組み合わせるとカンタンに構築できる。
Amazon SNS の通知を AWS Lambda で処理する方法もあるが、AWS Chatbot を使うとコードが不要になる。
この記事では、Chatbot を使って Amplify のデプロイ結果を Slack に通知する方法を説明する。

前提条件

  • AWS Amplify で構築したプロジェクトがあること
    この記事では、AWS Amplify Hosting で作成した Web ページのデプロイ結果を通知する。

設定手順

STEP1:Amazon SNS のトピックの作成

本来 SNS のトピックの作成は 1 から自分で設定する必要があるが、Amplify プロジェクトの「メール通知」を有効にするとカンタンに Amazon SNS のトピックを作成できる。

  1. AWS Console で、デプロイ結果を通知する Amplify のプロジェクトを開く。
  2. サイドメニューの[通知]をクリックし、[通知を管理]をクリックする。
  3. [E メールを追加]をクリックする。
  4. E メールアドレスと、ビルド対象のブランチを選択する。 E メールアドレスにはメールが届くので、受信できるメールアドレスを入力しておくほうが安全。
  5. [保存]をクリックする。

入力した E メールアドレス宛に、SNS トピックを購読を確認する旨のメールが届くが、このメールは無視する。
STEP2 で Chatbot と連携した際に作成されるサブスクリプションを利用するためである。

AWS Console の画面で Amazon SNS を確認すると、トピックが作成されたことを確認できる。
スクリーンショット:Amazon SNS のトピックが作成されている

STEP2:AWS Chatbot の作成

  1. AWS Console で、AWS Chatbot を開く。
  2. サイドメニューの[設定済みクライアント]をクリックし、[新しいクライアントを設定]をクリックする。
  3. [Slack]を選択し、[設定]をクリックする。
  4. Slack のワークスペースに対するアクセスを許可する画面が表示されるので、[Allow]をクリックする。
  5. AWS Console に追加されたワークスペースで、[新しいチャンネルを設定]をクリックする。
  6. 「設定名」に任意の名前を入力する。
  7. 「Slack チャンネル」セクションで通知するチャンネルを設定する。 プライベートチャンネルに対しても通知できるが、この記事ではパブリックチャンネルを選択する。
    • チャンネルタイプ:「パブリック」を選択
    • チャンネル名:通知するチャンネル名を選択

スクリーンショット:AWS Chatbot の Slack チャンネルの設定項目

  1. 「アクセス許可」セクションで、AWS Chatbot を動かすための IAM ロールを作成する。
    • ロール設定:「チャネルロール」を選択
    • チャネルロール:「テンプレートを使用して IAM ロールを作成する」を選択
    • ロール名:任意の名前を入力
    • ポリシーテンプレート:デフォルトのまま(以下が選択されている状態)
      • 通知のアクセス許可
      • Resource Explorer のアクセス許可
    • チャネルガードレールポリシー:デフォルトのまま(以下のポリシー名が選択されている状態)
      • ReadOnlyAccess

スクリーンショット:AWS Chatbot の アクセス許可の設定項目

  1. 「通知」で、通知する SNS トピックを選択する。
    • リージョン:Amplify のプロジェクトを作成したリージョンを選択
    • トピック:STEP1 で作成したトピックを選択
  2. [設定]をクリックする。

STEP3:EventBridge 入力トランスフォーマーの編集

EventBridge の入力トランスフォーマーを利用したカスタム通知で、Slack に通知する内容をカスタマイズする。
EventBridge は、Amplfy のデプロイ通知を受け取り、SNS トピックへ送信するために利用している。
この EventBride の入力トランスフォーマーでテンプレートを編集すると、通知内容をカスタマイズできる。
なお、EventBridge は STEP1 のメール通知を有効にしたタイミングで、SNS と同時に作成されている。

  1. AWS Console で、Amazon EventBridge を開く。

  2. サイドメニューの[ルール]をクリックし、Amplify が作成したルールをクリックする。

  3. 「ターゲット」タブをクリックして、[編集]をクリックする。

  4. [入力トランスフォーマー]をクリックする。

  5. 「ターゲット入力トランスフォーマー」セクションの「入力パス」に次の内容を入力する。

    {
      "account": "$.account",
      "appId": "$.detail.appId",
      "branch": "$.detail.branchName",
      "detail-type": "$.detail-type",
      "id": "$.id",
      "jobId": "$.detail.jobId",
      "region": "$.region",
      "resources": "$.resources",
      "source": "$.source",
      "status": "$.detail.jobStatus",
      "time": "$.time",
      "version": "$.version"
    }
    

    スクリーンショット:EventBridge ルールの「入力パス」の設定項目

  6. 「テンプレート」に次の内容を入力する。
    「入力パス」で指定したキー名は <key> で指定することでテンプレートから参照できる。

    {
      "version": "1.0",
      "source": "custom",
      "content": {
        "textType": "client-markdown",
        "title": ":wrench: <detail-type>",
        "description": "<status>",
        "nextSteps": [
          "Build details : https://console.aws.amazon.com/amplify/home?region=<region>#<appId>/<branch>/<jobId>",
          "https://<branch>.<appId>.amplifyapp.com/"
        ]
      }
    }
    

    テンプレートのフォーマットは Custom notifications で確認できる。

    スクリーンショット:EventBridge ルールの「テンプレート」の設定項目

  7. [確認]をクリックする。

  8. [確認と更新 にスキップ]をクリックする。

  9. [ルールを更新]をクリックする。

STEP4:動作確認

  1. AWS Amplify のプロジェクトを開く。
  2. プロジェクトをデプロイする。
  3. デプロイの開始時と終了時に、Slack に通知が届くことを確認できれば OK。
    • 開始時
      スクリーンショット:デプロイが開始されたときの Slack メッセージ
    • 終了時
      スクリーンショット:デプロイが成功したときの Slack メッセージ

気になったこと

  • EventBridge ルールの入力トランスフォーマーの「入力パス」で指定できる変数名の詳細が、ドキュメントに記載されておらず、Amplify プロジェクトが持っている値の参照方法がわからなかった。
    Amplify で複数のサイトを運用している場合、プロジェクト ID を使った Amplify URL(<branch>.<appId>.amplify.com)ではどのサイトのデプロイ結果かわかりづらい。
    そのため、プロジェクト名や割り当てたドメイン名を使いたいところだが、「入力パス」で指定できる変数名がわからないため参照できなかった。
    なお、この記事に記載した「入力パス」は、次の Issue Comment を参考にしている。
    Input Transformer