🌐

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

2025/03/05に公開

最近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_urlevent_subscriptionsrequest_urlを、Cloudflare Tunnelで作ったURL(<サブドメイン>.<ドメイン>)に変更。
    • 例:https://slack-app-dev.example.com/slack/events
  4. interactivityslash commandsなども、必要なら同様に変更。

複数端末での開発

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

cloudflared tunnel run <Tunnel名>

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

まとめ

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

Discussion