Zenn
🌐

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

2025/03/05に公開
Slack
Cloudflare
ngrok
cloudflaretunnel
tech

最近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の作成と設定

  1. まずはログイン。

    cloudflared tunnel login

    ブラウザが開いて認証される。

  2. Tunnelを作成。

    cloudflared tunnel create <Tunnel名>

    <Tunnel名>は何でも良い（例: slack-app-dev）。

  3. DNSレコードを紐付ける。

    cloudflared tunnel route dns <Tunnel名> <サブドメイン>.<ドメイン>

<サブドメイン>.<ドメイン> は、Cloudflareで管理しているドメインのサブドメイン（例: slack-app-dev.example.com）。

  1. ルーティング設定ファイルを作成。

    ~/.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に置き換える。

  2. Tunnelを起動。

    cloudflared tunnel run <Tunnel名>

Slack Appの設定

  1. Slack Appの管理画面（https://api.slack.com/apps）にアクセス。
  2. Appを選択し、"Basic Information" > "App Manifest" を開く。
  3. request_urlやevent_subscriptionsのrequest_urlを、Cloudflare Tunnelで作ったURL（<サブドメイン>.<ドメイン>）に変更。
    • 例：https://slack-app-dev.example.com/slack/events
  4. interactivityやslash commandsなども、必要なら同様に変更。

複数端末での開発

これがCloudflare Tunnelの便利なところ。
各端末にcloudflaredをインストールし、同じTunnel名でTunnelを起動するだけ。

cloudflared tunnel run <Tunnel名>

これで、どの端末からでも設定を変えずにAppが動作する。
地味に便利だ。

まとめ

ちょっとお試しくらいの気持ちだったが、Slackアプリ開発 × Cloudflare Tunnelは、なかなか良い感じかもしれない。

Discussion