ngrokは、手元で動かしているサーバーに外部からアクセスできるURLを1コマンドで発行するツールです。ルーターの設定にも固定IPにも触りません。この記事では、どういう仕組みで穴を開けずに通しているのか、導入から最初のトンネル起動まで、Webhookの受信確認と再送、公開したエンドポイントに認証とレート制限を掛ける設定、無料枠が効いてくる場面、そして採用と見送りの境界を扱います。公式ドキュメントの記述はすべて出典を本文中に置きました。
まとめ：ngrok導入とプラン選定の判断要点
ngrokの導入は、インストール・authtoken登録・トンネル起動の3段で終わります。Windowsならwinget install ngrok -s msstore、認証はngrok config add-authtoken、起動はngrok http 8080。ここまでで公開URLが1本出ます。
仕組みの要点は、外から内へ穴を開けていない点にあります。公式ドキュメントによればエージェントは既定でconnect.ngrok-agent.com:443へ接続し、ngrokサーバーへの接続はすべてポート443で行われる。つまり手元から外へ出ていく通信の上にトンネルが載る形で、ファイアウォールの受信規則を触る必要がありません。
公開したあとの制御はTraffic Policyが担います。YAMLでon_http_requestの下に条件と処理を並べ、--traffic-policy-fileで読み込ませる。レート制限もIP制限も基本認証もここで書けるため、URLを共有する相手が限られている検証環境でも素のまま晒さずに済みます。
迷いやすいのは契約条件のほうです。無料プランはデータ転送1GB、オンラインエンドポイント3本、HTTP/Sリクエスト20kが上限で、公開ドメインは自動割り当てのDev Domainだけ。任意の固定ドメイン名を予約するのは有料機能、自社所有のカスタムドメインはPay-as-you-go以上が条件になります。短期の検証なら無料枠で足り、URLを固定して継続的に使う段階で有料へ移る、という切り替え方が実務的です。
ngrokがローカルとインターネットの間で何をしているのかを仕組みから押さえる
使い方に入る前に、通信の向きだけ掴んでおくと後段の制限が読みやすくなります。
ngrokのエージェントがアウトバウンド接続でトンネルを張る流れ
手元で起動するのはngrokというエージェントプロセスです。ngrok公式のエージェント解説には、既定の接続先がconnect.ngrok-agent.com:443であること、ngrokサーバーへのすべての接続がポート443で行われることが書かれています。エージェントはTLSで接続して返ってきた証明書を検証し、さらにcrl.ngrok-agent.comへ問い合わせて失効していないかを確認する。接続の生存性はアプリケーションレベルのハートビートで定期的に見ています。
この構造だと、インターネット側からの接続はngrokのエッジが受け止め、すでに張られているトンネルを逆流して手元のプロセスへ届きます。手元のマシンは待ち受けていません。だからルーターのポート開放も、グローバルIPの用意も要らない。DNS解決はシステムのDNS・Google DNS・DoH・S3上のファイルという複数経路を試す作りで、社内の名前解決が絞られている環境でも繋がることがあります。
ポート開放やVPNとngrokが構造として何が違うのかを整理する
比較対象は3つあります。ポート開放は受信を許可する設定で、公開範囲がIPとポートの単位になり、止め忘れがそのまま露出になる。VPNは相互に閉じたネットワークを作る手段で、繋ぐ相手全員にクライアントの導入と認証情報の配布が要ります。ngrokは公開URLを1本発行して、その1本だけを渡す形です。
| 手段 | 通信の向き | 渡す相手の準備 | 向く場面 |
|---|---|---|---|
| ポート開放 | 外から内へ受信 | 不要 | 常時公開の自前サーバー |
| VPN | 相互に閉域 | クライアント導入 | 社内資産への恒常アクセス |
| ngrok | 内から外へ発信 | URLを開くだけ | 期間を区切った検証と共有 |
画面そのものを転送して遠隔操作する手段は別系統になります。用途が「相手の端末から自分のPCの画面を触る」であればリモートデスクトップの仕組みとVPN・VDIとの違いのほうが近く、ngrokの守備範囲ではありません。ngrokが扱うのは、HTTPやTCPで待ち受けているプロセスへの経路です。
ngrokをインストールして認証トークンを登録し最初のトンネルを起動するまで
ここからは実際に動かす手順です。順に3つのコマンドを打つだけで公開URLが出ます。
各OSへのインストールとngrok versionでの導通確認の手順
エージェントは単体のバイナリとして配布されています。公式のダウンロードページに掲載されているWindows向けの導入コマンドは次の2通りです。macOS・Linux・Dockerについては同ページからOSごとの手順に分岐します。
# Windows: Microsoft Store 経由
winget install ngrok -s msstore
# Windows: Scoop 経由
scoop install ngrok
# 導入できたかを確認する
ngrok versionngrok versionが版番号を返せば導通は取れています。返らない場合はPATHに入っていないだけのことが多く、バイナリを直接置いた場合は配置先をPATHへ追加してください。
authtokenを登録して設定ファイルに保存するまでの操作手順
次にアカウントの認証トークンを登録します。エージェントCLIのリファレンスにあるngrok config add-authtokenが、トークンを設定ファイルへ書き込むコマンドです。
# ダッシュボードで発行した authtoken を登録する
ngrok config add-authtoken 1rlHSX3HqrqmOWZdeJ6bIv8rfuo_4cmS1QswRGyxcQD8NOukF
# 設定ファイルの妥当性をチェックする
ngrok config check書き込み先は設定ファイルのドキュメントに既定位置が示されています。Linuxは~/.config/ngrok/ngrok.yml、macOSは~/Library/Application Support/ngrok/ngrok.yml、Windowsは%LocalAppData%\ngrok\ngrok.yml。形式はVersion 3が現行で、Version 2は非推奨と明記されています。古い記事のYAMLをそのまま貼ると形式差で弾かれるため、手元の版に合わせて書き直してください。
ngrok httpでトンネルを起動し発行URLと管理画面を確認する
あとは待ち受けているポート番号を渡すだけです。公式の実行例はngrok http 80やngrok http 8080 --url https://baz.ngrok.dev。SSHやRDPのようなTCPを通す場合はngrok tcp 22、ngrok tcp --url=1.tcp.ngrok.io:27210 3389という形になります。
# 手元の 3000 番で動くアプリを公開する
ngrok http 3000
# 複数のエンドポイントを設定ファイルから一括で起動する
ngrok start --all起動すると端末に転送先と発行URLが表示されます。公開する対象がNode.jsで書いたAPIサーバーであれば、先にNode.jsの仕組みと標準機能で動かす手順の側でリッスンポートを確定させてから、その番号をngrokへ渡す順序になります。ポート番号を間違えるとトンネル自体は張れて502が返るため、切り分けは端末の表示ではなくブラウザの応答で行ってください。
Webhookの受信をローカルで検証するときのngrokの使い方と再送の手順
ngrokが実務で効くのは、外部サービスから飛んでくる通知を手元で受けたい場面です。
決済やチャットのWebhookをローカルへ転送して受け口を作る
決済代行やチャットツールの通知は、送信元がインターネット上にあるためlocalhostを宛先にできません。従来はステージング環境へデプロイして、ログを見て、直して、また上げるという往復が発生していました。ngrokで公開URLを1本出し、そのURLを送信元のWebhook設定に登録すれば、その往復が消えます。
# 受け口のアプリが 4000 番なら、この1行で外部から到達可能になる
ngrok http 4000
# 転送先をホスト名込みで指定する場合（コンテナ内のサービスなど）
ngrok http http://api.internal:4000受け口をコンテナで動かしているなら、公開するのはコンテナが露出しているホスト側のポートです。Docker Desktopの導入手順とライセンス境界で扱っているポートの公開設定と、ngrokへ渡す番号が一致しているかを先に確かめてください。WSL上でサーバーを動かしている場合は、Windows側から見えるアドレスの扱いが絡むため、WSLで開発環境を構築する手順のネットワーク設定と併せて確認する必要があります。
Web Inspectorで受信内容を見て同じリクエストを再送する
ngrokの真価はここにあります。Web Inspection Interfaceのドキュメントによれば、エージェント起動中に同じマシンのブラウザでhttp://localhost:4040を開くと、すべてのリクエストとレスポンスの詳細が表示されます。ステータスはhttp://localhost:4040/status。
そして受信済みのリクエストはReplayボタンで再送できます。送信元のサービス側で通知を再度発火させる操作は手間がかかるうえ、決済のように何度も起こせないイベントもある。1回受け取ってしまえば、あとはInspectorから同じ内容を何度でも自分のサーバーへ投げ直せます。ドロップダウンの「Replay with Modifications」を選べば、メソッド・パス・ヘッダー・トレーラー・ボディを書き換えてから再送できるため、署名検証の失敗パターンや欠損フィールドの挙動もその場で試せます。
Traffic Policyで公開したエンドポイントに認証とレート制限を掛ける設定
公開URLは推測されにくい文字列ですが、共有した先から漏れれば誰でも叩けます。制御を入れておきます。
Traffic Policyのファイルを書いて起動時に読み込ませる方法
Traffic Policyは公式に「トラフィックをフィルタリング、マッチング、管理、オーケストレーションするための設定言語」と説明されている仕組みです。受信トラフィックの検証と遮断、URLの書き換えとカスタムコンテンツでの応答、エンドポイント全体でのスコープ設定を担当し、構成要素はActions・Variables・Macrosの3つ。
使い方はYAMLファイルを1枚書いて、起動時に渡すだけです。CLIリファレンスにある--traffic-policy-fileがそのフラグにあたります。
# ポリシーを適用して起動する
ngrok http 8080 --traffic-policy-file tp.yml
# URL固定とポリシー適用を同時に指定する（公式の実行例）
ngrok http 8080 --url https://baz.ngrok.dev --traffic-policy-file tp.ymlレート制限とIP制限で公開したURLが叩かれる状況を抑える設定例
レート制限の公式サンプルは、on_http_requestの配下にexpressions（条件）とactions（処理）を並べる形です。次は特定のパスに対して1分あたり30リクエストへ絞る例で、ドキュメント記載のキー構成をそのまま使っています。
on_http_request:
- expressions:
- req.url.contains('/api/specific_endpoint')
actions:
- type: rate-limit
config:
name: Only allow 30 requests per minute
algorithm: sliding_window
capacity: 30
rate: 60s
bucket_key:
- conn.client_ipalgorithmはsliding_window、rateは60sのように期間で指定し、bucket_keyにconn.client_ipを置けば送信元IPごとの計数になります。公式サンプルにはAuthorizationヘッダの有無で段を分ける例（未認証は毎分10、認証済みは毎分100）や、Tierヘッダの値で10・100・1000・10000と段を分ける例も載っており、同じ書式の使い回しで組めます。
on_http_request:
- expressions:
- "!('Authorization' in req.headers)"
name: Unauthorized rate limiting tier
actions:
- type: rate-limit
config:
name: Allow 10 requests per minute
algorithm: sliding_window
capacity: 10
rate: 60s
bucket_key:
- conn.client_ipアプリケーション側のコードから直接トンネルを張りたい場合は、エージェントを別プロセスで立てずに済む公式SDKがあります。Go向けはngrok-goとして公開されており、CIの中で一時的に外部から到達可能なエンドポイントを起こすような使い方に向きます。
無料プランと有料プランの境界を転送量とドメインの条件から見極める
無料で始められる一方、継続して使うと必ず条件に当たります。当たる場所を先に見ておきます。
無料プランの1GBという転送量の上限が効いてくる場面を押さえる
公式の料金ページに記載された各プランの条件は次のとおりです。金額と枠は同ページの表示値をそのまま引いています。
| プラン | 月額 | エンドポイント | 転送量 | リクエスト |
|---|---|---|---|---|
| Free | 0ドル | 3 | 1GB | 20k |
| Hobbyist | 10ドル | 3 | 5GB | 100k |
| Pay-as-you-go | 20ドル＋従量 | 無制限 | 5GB込み | 100k込み |
| Enterprise | 要問合せ | 契約による | 契約による | 契約による |
Pay-as-you-goは超過分が転送0.10ドル/GB、リクエスト1ドル/100kの従量になり、カスタムドメインは1時間あたり0.01ドルの課金が付きます。1GBという無料枠が効いてくるのは、APIのJSONを往復させる用途ではなく、画像や動画を含む画面をそのまま外部レビューに掛ける場面です。Webhookの検証で1GBに届くことはまずありませんが、デモ用に管理画面を丸ごと見せる使い方だと数日で消えます。
固定ドメインやカスタムドメインを使うために必要になる契約の条件
ドメインのドキュメントは無料プランについて「On the free plan, you can only use your automatically assigned dev domain for public endpoints.」と明記しています。自動で割り当てられるDev Domainは使えますが、任意のドメイン名を自分で選んで予約することはできません。
ベースドメインも分かれています。ngrok.appとngrok.dev、ngrok.pizzaが有料アカウント向け、ngrok-free.appとngrok-free.devが無料アカウント向け。自社で所有しているドメインを充てるカスタムドメインはPay-as-you-go以上が必須条件で、ドメインプロバイダー側にCNAMEレコードを作る作業が加わります。外部サービスのWebhook登録先にngrokのURLを書く運用では、URLが変わるたびに登録し直しになるため、この固定ドメインの可否が有料化の実質的な分かれ目になります。
ngrokを採用してよい条件と代替手段へ切り替える判断基準を条件で示す
最後に、どこまでngrokで押して、どこから別の構成へ寄せるかを言い切ります。
ngrokを採用してよい場面を用途と公開期間の条件から特定する
採用してよいのは、期間が区切られていて、届ける相手が限られている場面です。具体的には、外部サービスのWebhookを手元で受けて署名検証やパースを詰める作業、クライアントへ実装途中の画面を見せて反応を確かめる打ち合わせ、モバイル実機から開発中のAPIを叩く検証。いずれも「今日から数日」という単位で、終わったらエージェントを落として終わりにできます。
この条件を満たすなら、ステージング環境を1つ増やすより速くて安い。判定の軸は用途の派手さではなく、止めたいときに1コマンドで消せるかです。消せない性質の用途、つまり誰かが常時アクセスする前提が入った時点で、ngrokの範囲から外れます。
常時公開や本番の運用では別の構成へ寄せるべき境界の引き方を示す
見送るべき場面もはっきりしています。エンドユーザー向けの本番サービスをngrok経由で出す構成、社内の業務システムを恒久的にngrokで外部公開する構成は選ばないでください。手元のマシンが落ちれば止まり、エージェントのプロセスが死ねば止まる。可用性を上げる手立てが構成の外にあります。冗長化や振り分けが要る段階に来たらロードバランサーの仕組みと振り分け方式の側の設計に移すのが筋です。
境界は「稼働時間」と「責任範囲」で引きます。業務時間だけ、自分が見ている間だけ動かすならngrok。24時間動かす、障害時に誰かが対応する、監視を付けるという条件が1つでも入ったら常設のインフラへ寄せる。移した先で死活とリソースを見る手段はMackerelでサーバーを監視する手順｜agent導入から料金試算と採用判断までで扱っています。Webhookの受け口を検証から本番運用へ引き上げる段階の設計や、外部サービスとの連携部分をそのまま実装まで持っていきたい場合は、API開発・システム連携で受けています。無料枠のまま本番に流用して転送量の上限で止まる、という事故だけは避けてください。
よくある質問
ngrokの導入と運用について、検索でよく出てくる質問に答えます。
ngrokは無料で使えますか？
使えます。公式の料金ページによればFreeプランは月額0ドルで、オンラインエンドポイント3本、データ転送1GB、HTTP/Sリクエスト20kまで。ただし公開ドメインは自動割り当てのDev Domainに限られ、任意のドメイン名を予約することはできません。検証用途なら無料枠で足りることが多く、URLを固定したい段階で有料プランの検討に入る形になります。
ngrokを使うのにルーターのポート開放は必要ですか？
不要です。公式ドキュメントによれば、エージェントは既定でconnect.ngrok-agent.com:443へ接続し、ngrokサーバーへの接続はすべてポート443で行われます。手元から外へ出ていく通信の上にトンネルが載る構造のため、受信を許可する設定を追加する必要がありません。外部からのアクセスはngrokのエッジが受け、既存のトンネルを通って手元へ届きます。
公開したURLは誰でもアクセスできてしまいますか？
素のまま起動すればURLを知っている全員が到達できます。制御はTraffic Policyで入れてください。on_http_request配下に条件と処理を書いたYAMLを用意し、--traffic-policy-fileを付けて起動すると、レート制限やヘッダによる振り分けが効きます。公式サンプルには送信元IP単位で毎分30回に絞る設定や、Authorizationヘッダの有無で上限を分ける設定が載っています。
ngrokで受け取ったWebhookをもう一度送り直せますか？
可能です。エージェント起動中にhttp://localhost:4040を開くとWeb Inspection Interfaceが表示され、記録されたリクエストのReplayボタンで自分のサーバーへ再送できます。ドロップダウンの「Replay with Modifications」を選ぶと、メソッド・パス・ヘッダー・トレーラー・ボディを編集してから投げ直せるため、署名検証の失敗時やフィールド欠損時の挙動も送信元を巻き込まずに試せます。
ngrokのURLを毎回同じものに固定できますか？
無料プランでは固定できません。ドキュメントには無料プランで使えるのは自動割り当てのDev Domainだけと明記されています。任意のドメイン名を選んで予約するのは有料機能で、自社所有のカスタムドメインを充てる場合はPay-as-you-go以上のプランとCNAMEレコードの設定が要ります。起動時のフラグは--urlで、公式の実行例もngrok http 8080 --url https://baz.ngrok.devという書式です。
関連記事
- Docker Desktopの導入手順とライセンス境界｜4.89系の要件と無料代替への移行：公開する対象をコンテナで動かす場合のポート設定
- WSLで開発環境を構築する手順｜.wslconfig調整とDocker連携・肥大化の対処：WSL側でサーバーを立てるときのネットワーク周り
- k8sをローカルで動かす手順｜kindでクラスタ構築からDeployment公開・撤収まで：ローカルクラスタのサービスを外へ出す前段
- ロードバランサーとは？仕組み・種類・振り分け方式を実装目線で解説：常時公開へ移すときの振り分け設計
- 外形監視とは？内部監視との違いと監視項目・実装、導入判断を実装目線で解説：公開したエンドポイントの死活を見る手段
