🚀 Slack連携の開発で使える ngrok の使い方（Laravel × localhost を https 公開）

OAuthやWebhookでSlackと連携する際、Slack側には「https」のRedirect URLしか登録できません。
そこで便利なのが、ローカル環境（http://localhost）を一時的にhttps化できるツール ngrok です！

✅ 前提

・開発環境 → http://localhost:8080 でLaravelが動作している（DockerでもOK）

・Slackアプリの Redirect URLに https://xxxxx.ngrok.io/slack/callback を登録したい

🛠 手順

① ngrok をインストール（macOS / Homebrew）

brew install ngrok/ngrok/ngrok

※ Windows の場合は公式サイトからzipダウンロードでもOK

② 無料アカウント作成＆AuthTokenを取得

https://dashboard.ngrok.com で無料サインアップ

↓

左側メニュー「Your Authtoken」から AuthToken をコピー

↓

ターミナルで登録（※初回だけ）

ngrok config add-authtoken コピーしたトークン

③ localhost:8080 を公開！

ngrok http 8080

↓

以下のような表示が出たら成功：

Forwarding https://abcd1234.ngrok.io → http://localhost:8080

④ Slack に登録するURL

Slackアプリの「OAuth & Permissions」→ Redirect URL に以下を登録：

# 例)
https://abcd1234.ngrok.io/slack/callback

# 「使用するURL」/「後ほど設定するroute.php-認証後にSlackから飛んでくる場所-のgetURL」
#  → Route::get('/slack/callback',  [SlackController::class, 'handleCallback'])->name('slack.callback');

✅ Docker環境で ports: "8080:80" の場合も、このまま使えます。

🔁 補足

状態	対応
localhost:3000	`ngrok http 3000`
毎回URL変わる？	はい（無料プランは8時間ごとにランダムURL変更）
固定URLにしたい	有料プランで `Reserved Domain` を使用

🎉 まとめ

操作	コマンド
インストール	`brew install ngrok/ngrok/ngrok`
認証登録（初回のみ）	`ngrok config add-authtoken ...`
公開開始	`ngrok http 8080`
Slack登録URL	`https://xxxxx.ngrok.io/...`

ローカルからSlack連携開発を進めたいなら ngrok は必須級ツールです！
Slack App ↔ ngrok ↔ Laravel の構成で OAuth & Webhook テストが簡単になります 🙆‍♂️