[TypeScript] BoltでSlack Appを作成する ②GAEにGitHub Actionsでデプロイする

TypeScriptでSlack Appを作成してみたので、その方法の紹介です。

作成したアプリはこちら

前回、ローカルで動くところまで作成したので今回はGAEへのデプロイと、GitHub Actionsでデプロイできる状態に持っていきます。

前回の記事はこちら。

[TypeScript] BoltでSlack Appを作成する ①ローカルで動かそう

単語紹介

GAE

Google App Engine は、Googleの提供するサービスの1つであり、ウェブアプリケーションをPHP・Python・Java・Go言語を使用して開発し、Googleのインフラストラクチャー上で実行し、バージョン管理することができる。Google Cloud Platformの一部。

https://ja.wikipedia.org/wiki/Google_App_Engine

GitHub Actions

GitHub Actionsを使用すると、ワールドクラスのCI / CDですべてのソフトウェアワークフローを簡単に自動化できます。 GitHubから直接コードをビルド、テスト、デプロイでき、コードレビュー、ブランチ管理、問題のトリアージを希望どおりに機能させます。

CircleCIと同じCI/CDツールですね。

https://github.co.jp/features/actions

まずはローカルからデプロイできるようにする

1. ローカルPCにGoogle Cloud SDKをインストール、初期設定をする

まず、google-cloud-sdkをhomebrewでインストールします。

% brew install google-cloud-sdk

その後、gcloud init をしてデプロイ先のprojectを指定しておきましょう。

2. GAEのビルドコマンドを設定する

app.yaml

runtime: nodejs16
instance_class: F1
automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: 1
  min_pending_latency: 3000ms
  max_pending_latency: automatic
  target_cpu_utilization: 0.95
  target_throughput_utilization: 0.95
  max_concurrent_requests: 80
env_variables:
  SLACK_BOT_TOKEN: xoxb-***************************
  SLACK_SIGNING_SECRET: ***************************

package.json

{
  "name": "sampleSlackApp",
  "version": "1.0.0",
  "description": "",
  "main": "./dist/index.js",
  "scripts": {
    "gcp-build": "tsc -p .",
    "prestart": "npm run gcp-build",
    "start": "node ./dist/index.js",
    "watch": "nodemon",
    "dev": "nf start"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@slack/bolt": "^3.8.1",
    "dotenv": "^10.0.0",
  },
  "devDependencies": {
    "nodemon": "^2.0.15",
    "ts-node": "^10.4.0",
    "typescript": "^4.5.4"
  }
}

.gcloudignore

.gcloudignore
.git
.gitignore
node_modules/
__tests__/
.circleci/
.github/
nodemon.json
Procfile
.env
serviceAccountKey.json
/dist/

ここまで設定完了したら、とりあえずデプロイしてみましょう。

% gcloud app deploy app.yaml

でデプロイできます。

動作確認のため、slackアプリに設定しているURLをデプロイしたURLに変えましょう。

_metadata:
  major_version: 1
  minor_version: 1
display_information:
  name: sampleSlackBot
features:
  bot_user:
    display_name: sampleSlackBot
    always_online: false
oauth_config:
  scopes:
    bot:
      - channels:read
      - channels:history
      - chat:write
      - commands
settings:
  event_subscriptions:
    request_url: https://*****.de.r.appspot.com/slack/events # ここと
    bot_events:
      - message.channels
  interactivity:
    is_enabled: true
    request_url: https://*****.de.r.appspot.com/slack/events # ここ
  org_deploy_enabled: false
  socket_mode_enabled: false
  token_rotation_enabled: false

*****の部分は、デプロイしたGAEのプロジェクト名です

この状態で、sample ping と入力してpong が返ってくると成功です🎉

GitHub Actionsからデプロイできるようにする

ローカルからデプロイできるようになれば、次はGitHub Actionsにデプロイを任せられるようにしてみましょう。

まず、GitHubにpushしてもいいように、app.yamlにベタがきしている定数を環境変数に差し替えます。

app.yaml

runtime: nodejs16
instance_class: F1
automatic_scaling:
  min_idle_instances: automatic
  max_idle_instances: 1
  min_pending_latency: 3000ms
  max_pending_latency: automatic
  target_cpu_utilization: 0.95
  target_throughput_utilization: 0.95
  max_concurrent_requests: 80
env_variables:
  SLACK_BOT_TOKEN: "$SLACK_BOT_TOKEN"
  SLACK_SIGNING_SECRET: "$SLACK_SIGNING_SECRET"

そして、環境変数を差し替える設定を入れつつ、GitHub Actionsの設定ファイルを作成します。

.github/workflows/gae-deploy.yaml

name: Deploy to Google App Engine

on: workflow_dispatch

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Replace credentials in app.yaml
        run: |
          sed -i -e 's/$SLACK_BOT_TOKEN/${{ secrets.SLACK_BOT_TOKEN }}/g' app.yaml
          sed -i -e 's/$SLACK_SIGNING_SECRET/${{ secrets.SLACK_SIGNING_SECRET }}/g' app.yaml
      - name: Deploy to App Engine
        id: deploy
        uses: google-github-actions/deploy-appengine@v0.2.0
        with:
          deliverables: app.yaml
          project_id: ${{ secrets.GCP_PROJECT }}
          credentials: ${{ secrets.GCP_SA_KEY }}

      - name: Show App Engine application URL
        run: echo ${{ steps.deploy.outputs.url }}