About

ngrokはどう動くのか?逆向きトンネルと、お金を払う本当の理由

仕組みは単純。料金は公開サーバーの運用費なので、frpやboreで自分で立てることもできる

ローカルで立てた開発サーバーを、スマホやWebhookを送るサービス、お客さんにちょっと見せたいとき、いつもngrokが出てくる。仕組みは一行で言える。外にあるサーバーにこちらから先に電話をかけておき、その通話でリクエストを受ける。 これが分かれば「有料プランにするか、自分で立てるか」も決められる。

なぜファイアウォールを越えられるのか

ルーターや会社のファイアウォールは、外から中へ入ってくる接続を止める。中から外へ出る接続はたいてい通す。

ngrokエージェント(ngrok http 3000)は起動するとすぐ、ngrokのエッジサーバーへ外向きの接続をひとつ張る。エッジは公開URLを払い出し、そのURLに来たリクエストを、すでに開いている接続に載せて自分のPCへ送る。ポート開放も固定IPもいらない理由はこれだ。ssh -R のリバースフォワードと同じ発想だ。

TLSはエッジでほどく。だからローカルがhttpでも、外からはhttpsのURLになる。

Hostヘッダーでアプリを振り分けるサーバーなら一つ注意がある。リクエストは公開URLのHostを付けてやって来る。うちのRailsリポジトリのように appNN.localhost でアプリを選ぶ構成なら、その公開ホストも受け付けるようにしておかないと、別のアプリが応答してしまう。

お金を払うのは技術ではない

2026-09-26にngrok.com/pricingを見てまとめた。料金は変わるので、使う前に公式ページを見直す。

プラン 料金 要点
Free $0 転送1GB、HTTPリクエスト月2万、警告用の中間ページが出る
Hobbyist $10/月 転送5GB、リクエスト月10万、中間ページなし
Pay-as-you-go $20/月 + 従量 独自ドメイン、SSO・mTLS

無料プランで実際に困るのは容量より中間ページだ。人ならボタンを一回押せば済むが、Webhookのように機械が受けるリクエストには、そのHTMLがレスポンスとして返りかねない。

この表をしばらく眺めていると、何にお金を払っているのかが見えてくる。トンネルの仕組みは上の三段落がすべてだ。料金は公開サーバーを24時間動かし、ワイルドカードDNSとTLS証明書を更新し、そのサーバーが悪用されないよう守る運用費だ。

ngrok (managed) Browser ngrok edge public URL · TLS cert · wildcard DNS 24/7 server · abuse handling Your PC agent → localhost:3000 HTTPS outbound first requests ride it you pay someone to run this box self-hosted (frp / bore) Browser your VPS frps / bore server DNS · certs · patches: yours Your PC frpc / bore local outbound first same tunnel idea, you run the box

自分で立てるなら — frp・bore

名前 中身 こんなとき
frp サーバー(frps)はVPS、クライアント(frpc)はローカル。HTTP・HTTPS・TCP・UDP 長く使うトンネル、独自ドメイン
bore Rustで書かれたごく小さなTCPトンネル TCPだけで足りるとき、仕組みをコードで読みたいとき
ssh -R インストール不要、VPSひとつで たまに少しだけ
Cloudflare Tunnel マネージド、クライアントはcloudflared ドメインがすでにCloudflareにあるとき

自分で立てれば、その運用費を自分が背負う。VPS代、DNS、証明書の更新、公開サーバーのセキュリティパッチ。だからこう選んでいる。ちょっと見せるだけならngrokの無料。Webhookを頻繁に受けて中間ページが邪魔ならHobbyist。すでにVPSとドメインを回しているならfrp。frpをVPSに立てて費用を比べるのは、まだやっていない。

ローカルサーバーを外に見せる構成や、Webhookの受け口をどこに置くかで迷っているなら、https://www.negabaro.com/contact から聞いてほしい。

構造ダイアグラム

🌍
外部クライアント
ブラウザ / Webhook
④ HTTPリクエスト →
☁️
ngrok Cloud
abc123.ngrok.io
公開URL割り当て
⑤ トンネル転送
② アウトバウンドTLS
←
🚇 💻
マイPC(ファイアウォール内)
ngrok agent localhost:3000
ポイント: ngrok agentが<strong>先にアウトバウンド接続</strong>を開くためファイアウォール/NAT設定が不要
フロー説明
  1. ngrok http 3000 実行
  2. agentがngrokクラウドにアウトバウンドTLSトンネルを確立
  3. 公開URL(abc123.ngrok.io)割り当て
  4. 外部トラフィックが公開URLに到着
  5. ngrokクラウドがトンネル経由でローカルに転送
  6. ローカルレスポンスがトンネル経由で外部に返却

動作フロー

1

ngrokエージェントがローカルで実行(ngrok http 3000)

2

エージェントがngrokエッジへ外向きのTLS接続を先に張る(逆向きトンネル)

3

エッジが公開URLを払い出す

4

公開URLへのリクエストを、エッジが開いている接続でローカルへ渡す

5

ローカルサーバーの応答が同じ接続で戻る

メリット

  • ✓ ファイアウォール・NATの背後でも動く
  • ✓ 公開URLとHTTPSがすぐ手に入る

デメリット

  • ✗ 無料プランは中間ページのせいでWebhookに向かないことがある
  • ✗ エッジを一度経由する分レイテンシが増える

ユースケース

Webhookのローカル開発・デバッグ スマホでローカル画面を確認 お客さんへの短いデモ
← P2Pとは?中央サーバーなしで端末同士が直接やりとりする仕組み Slack Socket Modeはどう動くのか? →