こんにちは、櫻井です。
この記事では、SlackのBoltフレームワークを使用して、SlackとAWSを連携した電話番号登録アプリを作成する方法についてご紹介します。
今回CDKを使ったインフラのデプロイを行っています。CDKの知識があまりなくても、問題なく進められていますが、CDKについて興味がある方は、CDKワークショップをおすすめします。CDKワークショップでは、AWS CDKを使用したアプリケーションのデプロイ方法について詳しく学ぶことができます。CDKを使って、AWSリソースを簡単に作成・管理できる方法や、CDKの構成ファイルの作成方法、デプロイ方法などについて、実際にハンズオンで学ぶことができます。
電話番号登録アプリの作成に必要なコードはGit Hubで公開されており、こちらから自由にダウンロードしてご利用いただけます。気になった方は使ってみてください！
また、今回の記事で利用するソースコードの詳しい説明は「Slack と AWS の電話番号登録アプリ – Bolt + CDK ソースコード解説」 という記事で解説しています。興味がある方は読んでみてください！
概要
今回紹介するSlack Appには2つの機能があります。
（1）Slack上から電話番号をDynamoDBに追加、削除、一覧表示する機能
（2） （1）の機能を利用するための権限を追加、削除する機能
Slack Appを作成する
ここでは、Slack Appの新規作成、設定、インストールなどを行っていきます。
新しいアプリを作成する
こちらからslack apiに移動して “Create New App” をクリックします
以下のような画面が開かれるので “From scratch” をクリックします。
アプリ名と、どのワークスペースにインストールするかを問われるので、任意で設定し “Create App” をクリックします。
Slack Appの設定を行う1
“App Manifest” に移動し、設定ファイルを以下のYAMLに変更します。
“name” と “display_name” の値は任意のものを設定しても問題ありません。設定が完了したら “Save Changes” をクリックして設定を保存しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
display_information: name: GeekBlog features: app_home: home_tab_enabled: true messages_tab_enabled: false messages_tab_read_only_enabled: true bot_user: display_name: task execution always_online: true oauth_config: scopes: bot: - channels:history - chat:write - groups:history - users:read - groups:write settings: org_deploy_enabled: false socket_mode_enabled: false token_rotation_enabled: false |
ワークスペースにアプリをインストールする
“OAuth ＆ Permissions” に移動し “Install to Workspace” をクリックします。
確認画面が開かれるので “許可する” をクリックします。
これで一旦Slack Appの作成は完了です。Slack Appのページは後ほど使うので、閉じないでおいてください。
インフラをデプロイする
次はCDKを使ってインフラをデプロイしていきます。
AWS CLIのインストールとプロファイル設定を行う
AWS CLIのインストールとプロファイル設定を行います。すでに設定済みの方は読み飛ばしてください。
AWS CLIをインストールする
本記事では、OSがLinux x86を前提としたインストール方法を紹介します。それ以外のOSを利用している場合や、具体的に何をしているかを確認したい場合はこちらから確認してください。
1．インストールファイルをダウンロードします。
|
1 |
$curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip" |
2．インストーラを解凍します。
|
1 |
$ unzip awscliv2.zip |
3．インストールを行います。
|
1 |
$ sudo ./aws/install |
4．インストールを確認します。
|
1 2 |
$ aws --version aws-cli/2.11.0 Python/3.11.2 Darwin/22.3.0 source/x86_64 prompt/off |
プロファイルを設定する
以下のコマンドを実行してプロファイルを作成します。
|
1 2 3 4 5 6 7 8 9 |
$ aws configure --profile プロファイル名 # アクセスキーIDを入力してエンターキーを押下 AWS Access Key ID： アクセスキーID # シークレットアクセスキーを入力してエンターキーを押下 AWS Secret Access Key： シークレットアクセスキー # デフォルトのリージョン("ap-northeast-1" など)を入力してエンターキーを押下 Default region name： リージョン名 #出力される際のフォーマットを指定してエンターキーを押下 Default output format： json または yaml |
作成したプロファイルは “~/.aws” 内で確認することができます。
|
1 2 3 4 5 6 7 8 |
$ cat ~/.aws/config [プロファイル名] region = ap-northeast-1 $ cat ~/.aws/credentials [プロファイル名] aws_access_key_id = ******************** aws_secret_access_key = ******************** |
パラメータストアにトークンを保存する
Slack Appのインストールが完了するとトークンが確認できるようになるので、 “Bot User OAuth Token” と “Signing Secret” をパラメータストアに保存します。
Slack Appのページに戻り”OAuth ‘＆ Permissions” に移動し、Bot User OAuth Token の値を控えます。
次に”Basic Infomation”に移動し”Signing Secret”の値を控えます。
|
1 2 3 4 5 |
$ aws ssm put-parameter --name {/projectName/envName/parameterName} --value {xxxxxxxxx} --type String --profile {プロファイル名} #今回の場合 $ aws ssm put-parameter --name /slackAppRouter/geekBlog/SLACK_BOT_TOKEN --value xoxb-xxxxxxxxxxxxxxxxxx --type String --profile {プロファイル名} $ aws ssm put-parameter --name /slackAppRouter/geekBlog/SLACK_BOT_SIGNING_SECRET --value 7b7xxxxxxxxxxxxx --type String --profile {プロファイル名} |
インフラをデプロイする
ここからはCDKを使って、インフラをデプロイしていきます。
bootstrap
CDKを利用する場合はアカウントのリージョンごとにbootstrapを最初の1度だけ行う必要があります。CDKのbootstrapをまだ行ったことがない場合は以下のコマンドを実行してbootstrapしてください。すでに bootstrapが終わっている方は読み飛ばしてください。
|
1 |
$ cdk bootstrap aws://｛accountId｝/｛region｝ --profile {プロファイル名} |
Git Hubからソースコードをクローンする
こちらのページのソースコードをローカルにクローンします。
|
1 |
$git clone https://github.com/GF-sakurai/geekblog-slackbolt-cdk.git |
クローンしたディレクトリに移動しておきます。
|
1 |
$cd geekblog-slackbolt-cdk/ |
ライブラリをインストールする
TypeScriptで利用するライブラリをインストールします。
|
1 |
$npm ci |
lambda(python)で利用するライブラリをインストールします。
|
1 2 3 |
$pushd layer/boltApp/python $pip install -r requirements.txt -t . $popd |
cdk.jsonを編集する
cdk.jsonの編集を行う前に、権限管理アプリが新たな権限を追加及び削除した場合にメッセージを送るSlackのチャンネルのIDを控えておきます。
チャンネルIDは、Slackのチャンネル名を右クリックし”コピー”の”リンクをコピー”をクリックした際のリンクのarchives/以降の文字列です。
|
1 2 |
#C0AAAAAAAAAの部分がチャンネルID https://*****-***.slack.com/archives/C0AAAAAAAAA |
チャンネルIDを控えたら、cdk.jsonを以下のように編集します。
|
1 2 3 4 5 6 7 8 |
略 "context": { "projectName": "パラメータストア保存時に設定したprojectName", "パラメータストア保存時に設定したenvName": { "env": "パラメータストア保存時に設定したenvName", "authorityManagementChannelId": "チャンネルID" }, 略 |
cdk deploy する
準備が整ったので、スタックをデプロイしていきます。
|
1 |
$cdk deploy -c environment=geekBlog --all --profile {プロファイル名} |
デプロイが完了するとターミナルに以下のように出力されるので、”Outputs:”のURL（API GateWayのエンドポイント）を控えておきます。
SlackAppの設定を行う2
slack apiのページに戻ってSlackAppの設定を行います。
SlackAppにエンドポイントを設定する
“Interactivity & Shortcuts”に移動し”Interactivity”を”On” にします
“Request URL”に先ほど控えたURLをペーストして”Save Changes”をクリックします。
次に”Event Subscriptions”に移動し”Enable Events”を”On” にします。
“Request URL”に先ほど控えたURLをペーストしてエンターキーを押下して、”Request URL”の右側に”Verifired” と表示されることを確認します。
“Subscribe to bot events”に”app_home.opend”と”message.channels”と”message.groups”の権限を追加します。
ワークスペースにAppを追加する
Slackのワークスペースに移動し、インストールしたAppを追加します。
ワークスペースのタブの”その他”をクリックし、更に”App”をクリックします。
検索バーに設定したApp名を入力し、検索結果にでたAppをクリックします。
権限管理アプリが通知を送る先のチャンネルにもAppを招待してください。
権限管理アプリの権限を付与する
追加されたアプリを確認する
追加されたアプリを確認すると、ホーム画面には何も追加されていません。
初回のみ、AWSのコンソールにログインして権限を追加する必要があります。
まず、自分のプロフィールから、メンバーIDを控えておきます。
AWS マネジメントコンソールで設定を行う
AWS マネジメントコンソールにログインし、cdkで作成されたDynamoDBのuserTableに “userId”（先ほど控えたメンバーID） と “appName”（authority_register）と”userName”（メンバーIDが誰のものかがわかる名前）を登録します。
※cdkは”userTable”と”managePhoneNumbersTbl”の2つのテーブルをデプロイしています。今回設定を行うのは“userTable”であることに注意してください。
Slackのワークスペースに戻り、アプリの画面を更新すると”権限管理アプリ”が表示されます。
アプリを使ってみる
ここまでですべての準備が完了したので、実際にアプリを使ってみます。
権限管理アプリを使ってみる
アプリのホーム画面で”権限管理アプリ”をクリックすると以下のようなモーダルが現れるので、どのユーザにどのアプリの権限の追加・削除をするのかを選択し”Submit”をクリックします。
アプリ権限管理実行後アプリ画面を更新すると、新しい選択が追加され、先ほど作成したチャンネルにもメッセージが届きます。
AWSマネジメントコンソールでDynamoDBの”userTable”を確認すると、新たにレコードが作成されていることがわかります。
電話番号管理アプリを使ってみる
アプリのホーム画面に追加された”電話番号管理”をクリックすると、以下のようなモーダルが開かれるので、”電話番号の登録”を選択して”Next”をクリックします。
電話番号、会社名、メモを入力して”Submit”をクリックします。（メモは入力しなかった場合”備考なし”として登録されます）
以下の画像のように”登録が完了しました”となっていれば成功です。
登録結果の一覧を確認してみます。先程と同様に”電話番号管理”を開き”電話番号一覧の取得”を選択して”Next”をクリックします。
以下の画像のように、先程登録した情報が確認できれば成功です。
まとめ
CDKでSlackのフレームワークのBoltを使ったSlackAppのデプロイ方法について紹介しました。
SlackAppを利用することで、様々な操作をSlackから簡単に行うことができるようになるため、運用効率の向上が見込めます。
今回使ったソースコードの説明については、こちらで解説しています。CDKやBoltに興味を持った方はぜひ読んでみてください！
- 特定の時間あたりのlambda実行数をSlackに通知する - 2023-12-23
- 公衆電話からでも使える電話帳サービスをLEX + AmazonConnectで作ってみた - 2023-12-19
- SQSを使ってlambdaを10秒ごとに定期実行する - 2023-12-14
- Slack と AWS の電話番号登録アプリ – Bolt + CDK ソースコード解説 - 2023-03-26
- SlackとAWSを組み合わせた電話番号登録アプリの開発 – Boltフレームワーク+CDKで作ってみた - 2023-03-26
【採用情報】一緒に働く仲間を募集しています
