Slack通知連携システム検証

Last-modified: Sun, 15 Jun 2025 01:26:26 JST (247d)
Top > Slack通知連携システム検証

Slack通知連携システムを構築し検証しました。
本検証の目的は以下のとおりです。

  • Slackと外部システムとの通知連携をサーバーレスで実現する仕組みの検証
    • WebHookURLを用いず、oAuth認証を用いることで任意のワークスペース内のチャネルに対し通知を飛ばす
  • AWS Lambda(Node.js)+API Gateway+DynamoDB+Serverless FrameworkによるSlack通知連携APIの構築・運用の検証
  • Slackワークスペース・チャネルのOAuth認証・管理・通知設定の一元化
  • フロントエンド(React)によるSlack連携設定UIの実装・動作検証
  • Slack API(OAuth, conversations, chat.postMessage等)の実運用上の課題・制約の把握
  • セキュリティ(認証情報管理・CORS・APIキー等)や運用面のベストプラクティス検証

検証用リポジトリ一式

検証用リポジトリ一式はここにあります。
以下この検証リポジトリを使用して検証します。

事前準備

  • Slackアプリを所属させるワークスペース(ここでは「AkiraDevSpace1」)と通知したいワークスペース(ここでは「AkiraDevSpace2」)
  • nodeJS22動作環境(フロントエンドおよびServerless Framework用)
  • バックエンド用AWSとServerless Framework用のIAMかSSO等でデプロイ可能な環境
    • 本記事ではServerless Frameworkの環境設定などは説明しない。

Slackアプリ作成

まずSlackアプリを作成します。
このSlackアプリは特別にoAuth認証用や外部公開用のアプリとして何か特別な実装をしないといけないわけではありません。
Slackアプリ自体は固定のワークスペース内にインストールするSlackアプリと違いはありません。
(後述するアプリ公開時にoAuthリダイレクトURLを指定するかの設定がある程度です。)
ここでは、気の利いた応答もしないしコマンドに応答するわけでもない何もしないSlackボットを作ります。

  1. api.slack.comへアクセスし、ワークスペースにログインします。その後、「Create an App」をクリックします。
    slack-01.png
  2. From scratchを選択します。
    slack-02.png
  3. Slackアプリの名前と展開するSlackスペースを選択します。
    ここでのスペースはSlackアプリが所属するスペースなので、開発で使用するスペースで問題ありません。
    slack-00.png
  4. 作成されると、App Credentialsが開きます。
    Client ID、Client Secret、Signin Secret をバックエンドリポジトリのsecrets.ymlに記載します。
    slack-03.png
  5. Oauth & Permissionsをクリックします。
    slack-06.png
  6. Scopesの「Bot Token Scopes」に設定をします。設定する権限はリポジトリにある「slack_scopes.js」にあるものです。
    slack-07.png
  7. Install Appをクリックし、ワークスペースへインストールします。
    slack-08.png
  8. アプリのインストール承認画面が出るので承認します。
    slack-09.png
  9. Bot User OAuthTokenをバックエンドのsercrets.ymlに記載します。

slack botをAWSへデプロイ

Slack Botの本体であるバックエンドをデプロイします。

  1. リポジトリにある「slackbot」ディレクトリで「npm ci」した後、「npx sls deploy --stage dev --aws-profile XXX」な感じでAWSへデプロイをします。
  2. API Gatewayがデプロイされますので、URLをメモしておきます。
    slack-24.png
  3. Event Subscriptionsをクリックし、API GatewayのエンドポイントURLをセットします。VerifiedとなればOKです。
    slack-25.png

oAUthコールバックおよびバックエンドAPIのデプロイ

oAUthコールバックおよびバックエンドAPIのデプロイをします。

  1. リポジトリにある「backend」ディレクトリで「npm ci」した後、「npx sls deploy --stage dev --aws-profile XXX」な感じでAWSへデプロイをします。
    この時、secrets.ymlのSLACK_REDIRECT_URIはサンプルのままにしておきます。
  2. デプロイ後のAPI Gatewayのアドレス(https://XXX.execute-api.ap-northeast-1.amazonaws.com/slack/oauth/callback)にSLACK_REDIRECT_URIを書き換えます。
  3. 変更後再デプロイをします。
  4. SlackのOAuth & Permissionsをクリックします。
    slack-10.png
  5. Redirect URLsに先ほどのアドレスを入れます。
    slack-11.png
    Save URLsボタンを忘れずに押すこと!
    slack-12.png

Slackアプリ公開

作成したSlack Botは一つのワークスペースにしかインストールできないので、Slackアプリとして外部公開をします。
他のユーザもインストール可能となるので注意してください。
なお、Slackの審査を受けるまでは「怪しいアプリ」認定されます。

  1. Manage Distributionをクリックします。
    slack-13.png
  2. Remove Hard Coded Information のチェックを入れます。(注意書きをよく読みましょう)
    Activate Public Distributionボタンをクリックし公開します。
    slack-14.png

動作検証

動作検証のため簡単なフロントエンドを作成しています。これを使って動作検証をしていきます。

事前準備

  • リポジトリ内にある「frontend」ディレクトリのsrcにある「api.js」と「App.js」にある「API_BASE_URL 」に先ほどのAPI Gatewayアドレス(https://XXX.execute-api.ap-northeast-1.amazonaws.com/dev/)をセットします。(backendディレクトリでデプロイをした方)
  • 「frontend」ディレクトリで「npm ci」 したあと、「npm run start」でデモ用フロントエンドを起動します。

検証

ここではSlackアプリをインストールしたスペースとは別のスペースにアプリを入れたいので、別ブラウザで開きます。

  1. デモ用フロントエンド画面にある「新規追加」をクリックします。
    slack-15.png
  2. 「ワークスペースを追加」ボタンをクリックします。
    slack-16.png
  3. インストールするワークスペース(Slackアプリをインストールしたワークスペースとは別)にログインします。
    slack-17.png
  4. アプリのインストール許可画面が出ます。
    slack-18.png
  5. 認証が正常に終了すると、画面を閉じてくださいとメッセージが出るので、ポップアップウインドウを閉じます。
    slack-19.png
  6. 画面をリロードすると、ワークスペースを選択可能になるので、プルダウンから選択します。
    すると自動でワークスペースに所属するチャネルが選択できるので、通知したいチャネルを選択します。
    その他の設定を適当に入れて保存します。
    slack-20.png
  7. 現在戻る処理が手抜きで実装されていないので、保存終了後「キャンセル」ボタンをクリックします。
  8. 一覧表示が出るので、「テスト送信」ボタンをクリックすると、oAuthで取得したトークンを使って指定されたチャネルに対しメッセージを送信します。
    slack-21.png

その他

なお、このコードはパデフォルトでは「ブリックチャネルにしか送信」できません。
プライベートチャネルに送信したい場合は、ワークスペースにインストールされたSlackアプリをプライベートチャネルのインテグレーションから追加してください。

slack-22.png

追加すると、プライベートチャネルも選択可能になります。

slack-23.png

Counter: 142, today: 1, yesterday: 1

このページの参照回数は、142です。