プロローグ：ngrok http 3000 の魔法を、自分の手で解き直す
ターミナルで起きている、説明のつかないこと
ローカルで動かしている開発サーバーを、誰かに見せたい瞬間がある。デザイナーに iPhone から動作確認してもらいたい。Stripe の Webhook をローカルで受けたい。LLM から MCP サーバー経由で自宅のスクリプトを叩かせたい。
そんなとき、こう打つ。
$ ngrok http 3000
Forwarding https://1a2b-203-0-113-42.ngrok-free.app -> http://localhost:3000数秒後、世界のどこからでも開ける HTTPS の URL が手元にできあがっている。家庭の Wi-Fi、企業ファイアウォール、キャリアの NAT、それらすべての向こう側にある自分のラップトップに、見ず知らずの誰かが届く。
便利だ。だが、説明はつかない。
- なぜ、ファイアウォールの内側にあるサーバーが、外から叩けるのか。
- なぜ、自分は何も設定していないのに、有効な TLS 証明書付きの公開 URL が手に入るのか。
- なぜ、
ngrokプロセスを止めた瞬間に、その URL は消えるのか。
これらの問いに、ngrok を使ったことがある人なら誰でも 1 度は出会っているはずだ。そして、答えを言葉にできた人は意外と少ない。
このシリーズが解こうとしている問題
「魔法に見える状態」を終わりにするのが、このシリーズの目的だ。具体的には、3 つの段階に分けて魔法を解いていく。
- NAT の壁が、なぜ「内側から外」にだけ薄いのか ── 第 2 章
- その壁の薄さを利用して、1 本の TLS 接続を「逆向きトンネル」に変える ── 第 3 章〜第 6 章（手元で実装する）
- 本物の ngrok や、Cloudflare Tunnel・frp・Tailscale Funnel が、同じ問題をどう違うやり方で解いているか ── 第 7 章〜第 8 章
第 3 章から第 6 章までは、Go で 200 行ほどのコードを少しずつ育てていく。第 3 章で書くのは、ssh -R を再発明するような最も素朴なリバーストンネルだ。これを毎章、本物の ngrok が持っている機能を 1 つずつ足しながら、書き直していく。
- 第 4 章：ストリーム多重化（1 本の TCP 接続で複数のリクエストを同時に流す）
- 第 5 章：HTTP ルーティング（ホスト名でリクエストを振り分け、
x-forwarded-*ヘッダーを付与する） - 第 6 章：型付きストリーム（コントロールチャネルとデータチャネルを 1 本の接続の中で分離する）
第 6 章まで進むと、手元には「muxado を使った型付き多重化 HTTP リバーストンネル」が動いている状態になる。これは 本物の ngrok が agent と edge の間で喋っているプロトコルと同じ系統 だ。
このシリーズが提供しないこと
公平のため、提供しないことも先に言っておく。
- ngrok の公式 API のチュートリアルではない。
ngrokコマンドの使い方は他の資料に譲る。 - 完全なプロダクション実装ではない。手元で書くコードは「教育用の最小版」だ。本番品質の TLS 終端・ACME 自動化・マルチリージョン分散は付録と本物の ngrok に任せる。
- 暗号通信の入門ではない。TCP / TLS / HTTP の基本は前提知識として扱う。
なぜ「自作してみる」が効くのか
ネットワークの概念は、文章を読んだだけだと「分かった気がする」状態で止まりやすい。NAT、コネクション多重化、リバーストンネル ── これらは、どれも「コードに落とすと急に解像度が上がる」種類の知識だ。
このシリーズは、第 3 章〜第 6 章の実装ハンズオンを「動かしながら読む」ことを前提にしている。コードはすべて掲載し、動作確認に必要な手順も添える。本物の ngrok を写経で再現する体験を通じて、ngrok のドキュメントを読み返したときに別の景色が見える状態を目指す。
旅の地図
| 部 | 章 | 何を扱うか |
|---|---|---|
| Part 1 仕組みを理解する | 第 2 章 | NAT の非対称性 |
| Part 2 動く最小版を育てる | 第 3 〜 6 章 | Go で 200 行のクローンを段階的に増築 |
| Part 3 本物と比較する | 第 7 〜 8 章 | 本物の ngrok の答え合わせ・競合との比較 |
| エピローグ | 第 9 章 | トンネリングの未来と参考文献 |
| 付録 | A / B | TLS 終端 / yamux・HTTP/2 でのリライト |
それでは、第 2 章で「NAT の壁」の前まで進もう。なぜ自分のラップトップが普段は外から見えないのか、それは何という名前の現象で、どこに記述されているのか ── ここを押さえることが、リバーストンネルというパターンが成立する理由を理解する最初の鍵になる。
章末まとめ
- ngrok は「魔法」ではなく、NAT の非対称性 + ストリーム多重化 + エッジでの TLS 終端の合わせ技で動いている
- 本シリーズは「仕組み解説 → 自作で再現 → 競合との比較」の 3 部構成
- 第 3 章〜第 6 章で手元のコードが少しずつ本物の ngrok に近づく設計
- 次章では NAT がなぜ「内側から外」にしか開いていないのかを RFC レベルで解剖する