🌐

Slack Appのローカル開発時Manifestに設定するURLをCloudflare Tunnelで作る

2025/03/05に公開

Slack

最近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

ログインするとコメントできます