ngrokでローカル開発環境を公開URLにする

開発中に外部サービスと連携しようとしたとき、ローカル環境（localhost）だと対応できないことがあります。たとえばFirebaseのメール認証、LINEのWebhook、StripeのWebhookなどは、外部からアクセスできるURLが必要。

そんなときに便利なのが ngrokです。
ローカルで動いている開発サーバーを、インターネット上の一時的なURLとして公開してくれるツール。「手元のサーバーを他人に一時的に見せたい」という時に活躍してくれます。

ngrokの使い方

ngrokアカウントを作成する

https://ngrok.comにてGet started for freeを選択し、アカウントを作成します。

インストール〜セットアップ

ngrokアカウントを作成後、Getting Startedページに遷移します。
このページから使用しているOSを選択（今回はmac OS）

Installationの通り、インストールして

brew install ngrok

セットアップを進めます。

ngrok config add-authtoken <自分のngrokトークン>

公開

ngrok http http://localhost:3000

これで https://xxxxx.ngrok.ioなどのURLが発行されるのでアクセスしてみましょう🎉

Firebaseメール認証に使う場合

この場合、以下の2点変更が必要です。

①メールテンプレート

Firebase Console > Authentication > メールテンプレート

上記からメールテンプレートを編集して、 認証リンクのドメインを https://xxxxx.ngrok.io にする。 （http://localhost:3000 のままだと外から見えないのでNG）

②承認済みドメイン

Firebase Console > Authentication > 設定 > 承認済みドメイン

https://xxxxx.ngrok.io のドメインを追加する

注意点

• ngrokの無料プランだとURLは起動のたびに変わる
• ある程度のアクセス数や利用時間でセッション切れる

その辺が許容できない場合は Cloudflare Tunnel という選択肢もあるらしい📝

まとめ｜ngrokは「ローカル環境を他人に見せたい」ときに本当に便利

ngrokは、30分ごとに切れるので本番運用としては利用不可ですが、

• 1分でさっくり公開URLを発行できる
• SSL証明書も自動でよしなにも考えなくて良い

と言った点でめちゃくちゃ便利でした！！