Slack Appのローカル開発時Manifestに設定するURLをCloudflare Tunnelで作る
最近Cloudflare Tunnelが便利な気がしている。
Slack Appのローカル開発にはいつもはngrokを使っていたが、ここでもCloudflare Tunnelを試してみたくなった。
弊社はドメイン管理にCloudflareを使っているので、相性も良さそうだ。
この記事では、Cloudflare Tunnelを使ってSlack AppのApp ManifestのURLを設定するまでを、備忘録的にまとめる。
ngrokからの乗り換えを考えている人や、複数端末で開発している人には参考になるかもしれない。
なぜCloudflare Tunnel?
Cloudflare Tunnelの惹かれる点
- ドメイン管理の一元化: DNSレコードなど、Cloudflareの管理画面でまとめて設定できるのは楽そう。
- 複数端末対応: これが地味に便利。後述。
Cloudflare Tunnelのセットアップ
前提条件
- Cloudflareアカウントとドメインの設定は終わっている前提。
- Slack Appも作ってあるものとする。
cloudflared
CLIのインストール
まずは、cloudflared
というCLIツールをインストールする。
# macOS (Homebrew)
brew install cloudflare/cloudflare/cloudflared
他のOSの人は、公式ドキュメントを参照。
Tunnelの作成と設定
-
まずはログイン。
cloudflared tunnel login
ブラウザが開いて認証される。
-
Tunnelを作成。
cloudflared tunnel create <Tunnel名>
<Tunnel名>
は何でも良い(例:slack-app-dev
)。 -
DNSレコードを紐付ける。
cloudflared tunnel route dns <Tunnel名> <サブドメイン>.<ドメイン>
<サブドメイン>.<ドメイン>
は、Cloudflareで管理しているドメインのサブドメイン(例: slack-app-dev.example.com
)。
-
ルーティング設定ファイルを作成。
~/.cloudflared/config.yml
(macOS/Linux)か%USERPROFILE%\.cloudflared\config.yml
(Windows)に、以下のような内容を記述。tunnel: <Tunnel名> credentials-file: /path/to/<Tunnel UUID>.json # cloudflared tunnel createを実行した時に表示されるjsonのパス ingress: - hostname: <サブドメイン>.<ドメイン> service: http://localhost:3000 # ローカルのWebサーバーのURL - service: http_status:404
<Tunnel UUID>
はcloudflared tunnel create
した時に出てきたUUIDに置き換える。 -
Tunnelを起動。
cloudflared tunnel run <Tunnel名>
Slack Appの設定
- Slack Appの管理画面(https://api.slack.com/apps)にアクセス。
- Appを選択し、"Basic Information" > "App Manifest" を開く。
-
request_url
やevent_subscriptions
のrequest_url
を、Cloudflare Tunnelで作ったURL(<サブドメイン>.<ドメイン>
)に変更。- 例:
https://slack-app-dev.example.com/slack/events
- 例:
-
interactivity
やslash commands
なども、必要なら同様に変更。
複数端末での開発
これがCloudflare Tunnelの便利なところ。
各端末にcloudflared
をインストールし、同じTunnel名でTunnelを起動するだけ。
cloudflared tunnel run <Tunnel名>
これで、どの端末からでも設定を変えずにAppが動作する。
地味に便利だ。
まとめ
ちょっとお試しくらいの気持ちだったが、Slackアプリ開発 × Cloudflare Tunnelは、なかなか良い感じかもしれない。
Discussion