🚀 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 テストが簡単になります 🙆♂️