ngrok便利ですよね

この記事は株式会社ガラパゴス（有志） Advent Calendar 2025
の13日目です 1️⃣3️⃣

こんにちは。バックエンドエンジニアの大田です。
今回は軽めに便利なサービスである ngrok のことを書こうと思います😃

結論

• ローカルサーバーを外部からアクセスできるようにしてくれる
• Google認証などもやってくれる
• 無料で上記が実現できる
• ngrokはとても便利なサービス

経緯

私はバックエンド寄りの人間ですが、チームにフロントエンド寄りのメンバーがいないので新規で画面を開発することになりました。

ダミーデータで動作する段階まできたところで、UIの挙動が要求どおりであるかを想定ユーザーに確認してもらうことになり、どうやって見てもらうか考えました。
まだ公開環境にデプロイする部分はできていません。ローカルで動作しているものをMTGで共有して見てもらうことはできますが、それでは想定ユーザーに実際に触ってもらうことはできませんし、MTGを設定するコストが発生します。リモートワークがデフォルトである弊社では、是非とも非同期でやりたいところです。

そこで、以前に軽く使ったことのあるngrokを使うことにしました。

まずはシンプルに

ngrokを使用する方法はいくつかあるようですが、今回はシンプルにCLIを使用します。
私は以前にインストールしているので、方法についてはドキュメントを参照してください。アカウントの接続までやっておかないと動作しないので注意してください。
※ なお、今回は無料プランで利用します。

インストールできたら、まずは開発サーバーを起動しましょう。今回は pnpm を使っているので、 pnpm dev で起動します。
※ ここではパブリックに公開されてしまっても問題ないコンテンツを使用してください⚠️

開発サーバーを起動できたら、次はngrokのCLIを実行します。開発サーバーのポート番号を確認して、以下のコマンドを実行しましょう。

ngrok http [ポート番号]

⬆️のような表示がされたら成功です👍
記載されている https://[セッションID].ngrok-free.app 的なURLにアクセスしてみましょう。
英語の「本当にこのサイトにアクセスしますか？」的なページが表示されていると思います。
「View Site」ボタンを押せば、ローカルの開発サーバーのコンテンツが表示されます👏
※ ここでエラー画面が表示される場合、開発サーバー側で .ngrok-free.app ホストのアクセスを拒否している可能性があります。ここの設定は各自で調整してください🙏

この段階でだいぶ便利ですね👍
しかし、このURLは誰でも見れる状態になっているので、外部に公開したくないコンテンツを共有したい場合はこの方法は使えません。
そこで、ngrokでは認証もサポートしています👏

Googleで認証する

弊社はGoogle Workspaceを利用しているので、社員は独自ドメインのGoogleアカウントを持っています。なので、今回はGoogleでOAuth認証をして、さらに弊社ドメインのアカウントのみがアクセスできるようにしましょう。
やりかたは非常に簡単で、CLIコマンドにオプションを追加するだけです。

ngrok http [ポート番号] --oauth google --oauth-allow-domain [会社ドメイン]

これだけです。素晴らしいですね👏
これでアクセス時にGoogle認証を求められて、かつ会社ドメイン以外のアカウントはアクセスが拒否されます。
そしてこの機能は無料プランで使えます。本当に素晴らしい👏

まとめ

今回ngrokのOAuth機能を初めて使ってみましたが、本当に便利ですね。
これが無料で利用できるというのは本当に素晴らしいと思います。
ローカルのサーバーを外から見て欲しいシーンというのは結構あるシーンだと思いますので、その時はngrokを選択肢に入れてみてはどうでしょうか😄

※ もちろんローカルのサーバーを公開するというのはリスクを伴いますので、公開する内容についてはくれぐれもお気をつけて🙏