【エングロック】

ngrok とは?

最終更新:
💡 公開URLから、手元のアプリへ通信をつなぐ

公開エンドポイントとローカルなどのサービスをつなぐ仕組みを提供するサービス。CLIエージェントを使うと、外向きの接続を通じてローカルWebアプリを公開URLから利用でき、Webhookの受信テストなどに使えます。

📌 このページのポイント
ngrok:公開URLから手元のアプリへ外部の利用者URLへ要求ngrok公開URLPCエージェント通信を受信Webアプリlocalhost:3000エージェントから外向きTLS接続通信の暗号化と、利用者の認証は別公開範囲・アクセス制御・受信データを確認
上段は届いた要求の経路、折れ線はエージェントが外向き接続を作る方向です。CLI・アカウント認証・アプリ起動等の準備と、外向き通信が許可される条件を確認します。
ひよこ ひよこ
ngrokで何ができるの?
ペンギン先生 ペンギン先生
例えば手元のPCで動くWebアプリを、公開URLから利用できるよ。外部サービスのWebhookを受け取るテストやデモに使える。ngrokにはほかの接続やゲートウェイ用途もあるので、一時的なローカル公開だけの製品ではないんだ。
ひよこ ひよこ
外からPCのポートを直接開くの?
ペンギン先生 ペンギン先生
CLIエージェントを使う場合、エージェントがngrokへ外向きにTLS接続を作る。公開エンドポイントに届いた通信がその接続を通って、アプリへ渡るんだ。ネットワークがその外向き通信を許すかは確認が必要だよ。
ひよこ ひよこ
コマンドだけで準備なしに使える?
ペンギン先生 ペンギン先生
CLIのインストール、アカウントの認証設定、公開するアプリの起動などを先に行うよ。その後、例えばポート3000のアプリをngrok http 3000でつなげられる。コマンドの例を実行すると公開されるので、対象のアプリと範囲を確かめよう。
ひよこ ひよこ
HTTPSなら誰に見せても安全?
ペンギン先生 ペンギン先生
HTTPSは通信の暗号化で、利用者を制限する認証とは別。URLを知られにくいだけではアクセス制御にならないよ。必要ならTraffic Policyで認証やIP制限などを設け、アプリ側でも公開する機能とデータを確認しよう。
ひよこ ひよこ
無料だとURLは起動のたびに変わる?
ペンギン先生 ペンギン先生
現在の公式資料では、無料プランにもアカウントに割り当てられた開発用ドメインがある。毎回変わるという説明は当てはまらないよ。利用量や同時接続などには条件があり、HTMLのブラウザーアクセスには案内画面もある。最新の条件は公式資料で確認しよう。
もっと詳しく知りたい人へ

Webhookの受信テストで確認することは?

送信元に登録するURL、対象ポートとパス、署名などの送信元検証、再送や重複への対応を確認します。公開URLを用意することと、届いた内容が正当かを確認することは別です。リクエストの記録に個人情報や秘密情報が含まれないかも考慮します。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「ngrok」って出てきたら「公開エンドポイントからアプリへ通信をつなぐサービス」と思えばだいたいOK!
📖 おまけ:英語の意味
「ngrok」 = サービス・エージェントの名称
💬 このページでは提供元の仕様に沿ってローカル公開の使い方を説明します。名称から通信方式や機能を推測するものではありません。

参考資料

← 用語集にもどる