カテゴリ一 AWS ブログ

2023-03-26 #AWS #Slack #CDK

こんにちは、櫻井です。

この記事では、SlackのBoltフレームワークを使用して、SlackとAWSを連携した電話番号登録アプリを作成する方法についてご紹介します。

今回CDKを使ったインフラのデプロイを行っています。CDKの知識があまりなくても、問題なく進められていますが、CDKについて興味がある方は、CDKワークショップをおすすめします。CDKワークショップでは、AWS CDKを使用したアプリケーションのデプロイ方法について詳しく学ぶことができます。CDKを使って、AWSリソースを簡単に作成・管理できる方法や、CDKの構成ファイルの作成方法、デプロイ方法などについて、実際にハンズオンで学ぶことができます。

電話番号登録アプリの作成に必要なコードはGit Hubで公開されており、こちらから自由にダウンロードしてご利用いただけます。気になった方は使ってみてください！

また、今回の記事で利用するソースコードの詳しい説明は「Slack と AWS の電話番号登録アプリ – Bolt + CDK ソースコード解説」という記事で解説しています。興味がある方は読んでみてください！

1 概要
2 Slack Appを作成する
3 インフラをデプロイする
4 SlackAppの設定を行う2
5 アプリを使ってみる
- 5.1 権限管理アプリを使ってみる
  - 5.1.1 電話番号管理アプリを使ってみる
6 まとめ

概要

今回紹介するSlack Appには2つの機能があります。

（1）Slack上から電話番号をDynamoDBに追加、削除、一覧表示する機能

（2）（1）の機能を利用するための権限を追加、削除する機能

この機能を利用することで、必要なユーザーだけが（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” をクリックして設定を保存しておきます。

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

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．インストールファイルをダウンロードします。

$curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

1	$curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

2．インストーラを解凍します。

$ unzip awscliv2.zip

1	$ unzip awscliv2.zip

3．インストールを行います。

$ sudo ./aws/install

1	$ sudo ./aws/install

4．インストールを確認します。

$ aws --version
aws-cli/2.11.0 Python/3.11.2 Darwin/22.3.0 source/x86_64 prompt/off

1 2	$ aws --version aws-cli/2.11.0 Python/3.11.2 Darwin/22.3.0 source/x86_64 prompt/off

プロファイルを設定する

以下のコマンドを実行してプロファイルを作成します。

$ 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 configure --profile プロファイル名

# アクセスキーIDを入力してエンターキーを押下

AWS Access Key ID：アクセスキーID

# シークレットアクセスキーを入力してエンターキーを押下

AWS Secret Access Key：シークレットアクセスキー

# デフォルトのリージョン("ap-northeast-1" など)を入力してエンターキーを押下

Default region name：リージョン名

#出力される際のフォーマットを指定してエンターキーを押下

Default output format： json または yaml

作成したプロファイルは “~/.aws” 内で確認することができます。

$ cat ~/.aws/config
[プロファイル名]
region = ap-northeast-1

$ cat ~/.aws/credentials
[プロファイル名]
aws_access_key_id = ********************
aws_secret_access_key = ********************

$ 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”の値を控えます。

次に控えた値をパラメータストアに保存します。パラメータストアに設定する”projectName” 及び “envName” は任意のもので問題ありませんが、後ほど使うので控えておいてください。

$ 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 {プロファイル名}

$ 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が終わっている方は読み飛ばしてください。

$ cdk bootstrap aws://｛accountId｝/｛region｝ --profile {プロファイル名}

1	$ cdk bootstrap aws://｛accountId｝/｛region｝ --profile {プロファイル名}

Git Hubからソースコードをクローンする

こちらのページのソースコードをローカルにクローンします。

$git clone https://github.com/GF-sakurai/geekblog-slackbolt-cdk.git

1	$git clone https://github.com/GF-sakurai/geekblog-slackbolt-cdk.git

クローンしたディレクトリに移動しておきます。

$cd geekblog-slackbolt-cdk/

1	$cd geekblog-slackbolt-cdk/

ライブラリをインストールする

TypeScriptで利用するライブラリをインストールします。

$npm ci

$npm ci

lambda(python)で利用するライブラリをインストールします。

$pushd layer/boltApp/python
$pip install -r requirements.txt -t .
$popd

$pushd layer/boltApp/python

$pip install -r requirements.txt -t .

$popd

cdk.jsonを編集する

cdk.jsonの編集を行う前に、権限管理アプリが新たな権限を追加及び削除した場合にメッセージを送るSlackのチャンネルのIDを控えておきます。

チャンネルIDは、Slackのチャンネル名を右クリックし”コピー”の”リンクをコピー”をクリックした際のリンクのarchives/以降の文字列です。

#C0AAAAAAAAAの部分がチャンネルID
https://*****-***.slack.com/archives/C0AAAAAAAAA

1 2	#C0AAAAAAAAAの部分がチャンネルID https://***-*.slack.com/archives/C0AAAAAAAAA

チャンネルIDを控えたら、cdk.jsonを以下のように編集します。

略
  "context": {
    "projectName": "パラメータストア保存時に設定したprojectName",
    "パラメータストア保存時に設定したenvName": {
      "env": "パラメータストア保存時に設定したenvName",
      "authorityManagementChannelId": "チャンネルID"
    },
略

略

"context": {

"projectName": "パラメータストア保存時に設定したprojectName",

"パラメータストア保存時に設定したenvName": {

"env": "パラメータストア保存時に設定したenvName",

"authorityManagementChannelId": "チャンネルID"

略

cdk deploy する

準備が整ったので、スタックをデプロイしていきます。

$cdk deploy -c environment=geekBlog --all --profile {プロファイル名}

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に興味を持った方はぜひ読んでみてください！

この記事を書いた人
最近の記事

櫻井

2022年3月にギークフィードに入社。エンジニア完全未経験からSAP・SAAを三週間で取得することが出来ました。そのためAWSに関することを中心に記事を作成する予定です。自分が初心者だからこそわかる、エンジニア未経験の方や、エンジニアを始めたばかりの方の躓きポイントをうまく説明できるように頑張ります。

櫻井 (全て見る)

【採用情報】一緒に働く仲間を募集しています

2023-03-26 #AWS #Slack #CDK

SlackとAWSを組み合わせた電話番号登録アプリの開発 – Boltフレームワーク+CDKで作ってみた

概要

Slack Appを作成する

新しいアプリを作成する

Slack Appの設定を行う1

ワークスペースにアプリをインストールする

インフラをデプロイする

AWS CLIのインストールとプロファイル設定を行う

AWS CLIをインストールする

プロファイルを設定する

パラメータストアにトークンを保存する

インフラをデプロイする

bootstrap

Git Hubからソースコードをクローンする

ライブラリをインストールする

cdk.jsonを編集する

cdk deploy する

SlackAppの設定を行う2

SlackAppにエンドポイントを設定する

ワークスペースにAppを追加する

権限管理アプリの権限を付与する

追加されたアプリを確認する

AWS マネジメントコンソールで設定を行う

アプリを使ってみる

権限管理アプリを使ってみる

電話番号管理アプリを使ってみる

まとめ

【採用情報】一緒に働く仲間を募集しています

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索

SlackとAWSを組み合わせた電話番号登録アプリの開発 – Boltフレームワーク+CDKで作ってみた

概要

Slack Appを作成する

新しいアプリを作成する

Slack Appの設定を行う1

ワークスペースにアプリをインストールする

インフラをデプロイする

AWS CLIのインストールとプロファイル設定を行う

AWS CLIをインストールする

プロファイルを設定する

パラメータストアにトークンを保存する

インフラをデプロイする

bootstrap

Git Hubからソースコードをクローンする

ライブラリをインストールする

cdk.jsonを編集する

cdk deploy する

SlackAppの設定を行う2

SlackAppにエンドポイントを設定する

ワークスペースにAppを追加する

権限管理アプリの権限を付与する

追加されたアプリを確認する

AWS マネジメントコンソールで設定を行う

アプリを使ってみる

権限管理アプリを使ってみる

電話番号管理アプリを使ってみる

まとめ

【採用情報】一緒に働く仲間を募集しています

関連投稿

Remix SPAモードで静的WebサイトをGithub Pagesにデプロイする

LangGraph入門！LLMアプリ開発ライブラリのQuick StartをAmazon Bedrockでやってみる

AWS Step Functionsの基本を再学習しました

AWS ChatbotでSlackからAmazon Bedrock Agentにアクセスしてみる

AWS Builder Cards：楽しみながらAWSを学ぶカードゲーム

電子工作で自作した植物の自動水やり機から土壌データをAWS IoT Coreに連携してみた

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索