🐵

Slack Boltで簡単なHello Worldを作ってAzureにデプロイするまで ~ローカル構築編~

に公開
TypeScript
Bolt
Slackbot
tech

はじめに

業務でBoltを使ってSlackアプリを作る機会に恵まれたのですが、そこで学んだ知見をまとめてみます。
BoltとはSlackが提供するSlack API を使いやすくするためのフレームワークです。Javascript, Python, Javaの3つで提供されてます

使用技術

  • Typescript
    チュートリアルそのままなぞっても面白みがないのでTypescriptにしました

  • Azure App Service on Linux（または　Functions 調査中）
    AWSやHerokuの事例はあるのですが、Azureの例がないのであえて選定してます。
    またサクッとリリースしたいのでWeb Apps for ContainerではなくLinuxにしてます。

  • Bolt
    今回の主役

大まかな流れ

  • ローカルでHello World
  • App Service on LinuxにLocal Gitでデプロイ

ローカルでHello Worldが表示されるまでを作成

基本はチュートリアルなぞればいいだけですが、メモがてら残します。
https://slack.dev/bolt-js/ja-jp/tutorial/getting-started

Slackアプリ作成

ここから Create App でアプリを作成

From Scratchを選択

アプリ名とデプロイ先のワークスペースを選択。アラート表示されてますが、無視ください。

作成完了するとこんな感じ

トークン取得

Bot Tokenを取得

OAuth & Permissions > Bot Token Scopes までスクロールして Add an OAuth Scope をクリック

chat:writeを追加

ページ上部までスクロールして戻り、Install App to Workspace をクリック

OAuth確認画面が表示されるので許可します

許可したあと、Tokenが払い出されるのでメモします。

このtokenを①とする。

Signing Secretを取得

左サイドバーの Basic Information をクリックし App Credentialsまで移動します。
Signing Secretをメモします。

このtokenを②とする。

Socket Modeオン

左サイドバーの Socket Mode をクリックし Connect using Socket Modeまで移動します。
Enable Socket Modeをオンにします

token名を指定し、Generateします。

Tokenが払い出されるのでメモします。

メモを③とする

Enable Events

左サイドバーの Event Subscriptions をクリックし Enable EventsをOnにします

Onにしたあと Subscribe to bot events までスクロールします

Add Bot User Event をクリックし、以下のscopeを追加します

  • message.channels
  • message.groups
  • message.im
  • message.mpim

画面下のSave Changeをクリックする画面上部に再インストールを促されるメッセージが表示されるのでそのメッセージのリンクをクリックします。

クリックするとOAuth確認画面に遷移するので許可します

アプリ実装

最終成果物はここをご覧ください
https://github.com/hiro110/bolt-sample

ローカルはDockerで動くしているようにしてます。
.env.example を .env としてコピーしてください。

.env
SLACK_BOT_TOKEN="" ①のtokenをセット
SLACK_SIGNING_SECRET="" ②のtokenをセット
SLACK_APP_TOKEN="" ③のtokenをセット
...

PJトップにsrcディレクトリを作成し、その配下にindex.tsを配置ください。チュートリアルとさほど変わらないです。

index.ts
import { App, LogLevel, GenericMessageEvent } from "@slack/bolt";

// ボットトークンと Signing Secret を使ってアプリを初期化します
const app = new App({
  logLevel: LogLevel.DEBUG,
  token: process.env.SLACK_BOT_TOKEN,
  signingSecret: process.env.SLACK_SIGNING_SECRET,
  socketMode: true,
  appToken: process.env.SLACK_APP_TOKEN,
  // ソケットモードではポートをリッスンしませんが、アプリを OAuth フローに対応させる場合、
  // 何らかのポートをリッスンする必要があります
  port: parseInt(process.env.PORT) || 3000,
});

// "hello" を含むメッセージをリッスンします
app.message('hello', async ({ message, say }) => {
  // イベントがトリガーされたチャンネルに say() でメッセージを送信します
  await say({
    // see: https://github.com/slackapi/bolt-js/issues/904
    text: `Hey there <@${(message as GenericMessageEvent).user}>!`,
  });
  
  
});

(async () => {
  // アプリを起動します
  await app.start();

  console.log('⚡️ Bolt app is running!');
})();

Docker起動します。

docker-compose build
docker-compose up -d
docker-compose exec app /bin/sh
npm i
npm run local:live

コンソールに以下のメッセージが表示されたらOKです。

...

⚡️ Bolt app is running!

...

Slackで対話

任意のパブリックチャンネルにてメンションつけて Helloを投稿してみます。

初回はチャンネル未参加なので、参加させます

再度、投稿すると、以下のように返ってきます。

一旦、ここまで。

Discussion