🐵

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

2023/06/08に公開

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が表示されるまでを作成

基本はチュートリアルなぞればいいだけですが、メモがてら残します。

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を投稿してみます。

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

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

一旦、ここまで。