「またURL変わった…」ngrokあるある地獄
Webhookの検証をしていて、こんな経験ありませんか?
StripeやLINE Messaging APIの開発中、ローカル環境を外部公開するためにngrokを起動するたびに、こんなURLが払い出される。
https://7a55-221-117-101-49.ngrok-free.appそして次に起動したら、また別のランダムURLに。管理画面のWebhook設定を開いて、URLをコピーして、貼り付けて……この繰り返し。チームで作業していると「今日のngrokのURL教えて」というSlackメッセージが飛び交う地獄。
実はこの問題、2023年8月からもう解決されていたんです。無料プランのまま、URLを固定できるようになっていました。筆者も最近まで知らなかったので、同じく見逃していた方のために共有します。
2023年8月から無料で静的ドメインが使えるようになっていた
2023年8月16日のngrokのアップデートで、無料プランのユーザーでも静的ドメイン(Static Domain)を1つ無料で取得・使用できるようになりました。
これまで無料プランでは毎回ランダムなURLが生成されていましたが、このアップデート以降は固定のサブドメインを持てるようになっています。
ただし、いくつか注意点があります。
- 払い出されるドメインは
xxx.ngrok-free.appというngrokのサブドメイン形式(ランダムな文字列は固定される) - 自分が所有する独自ドメインへの固定は有料プランのみ
- 無料プランで取得できる静的ドメインは1つまで
検証目的であれば、無料の静的ドメインで十分なケースがほとんどです。
静的ドメインの取得手順(ワンボタンで30秒)
設定はとても簡単です。ngrokのダッシュボードにログインして、以下の手順で進めてください。
- ngrok ダッシュボード にログイン
- 左サイドメニューの
Cloud Edge→Domainsを開く Create Domainボタンをクリック- ランダムな文字列のサブドメインが自動で払い出される(例:
helpful-crack-imp.ngrok-free.app)
これだけです。あとはコマンドで使うだけ。
コマンドでの使い方
従来の起動コマンドと比較するとこうなります。
# 従来(毎回ランダムURLが生成される)
ngrok http 3000
# 静的ドメインを指定して起動
ngrok http --domain=helpful-crack-imp.ngrok-free.app 3000--domain オプションに取得したドメインを指定するだけ。これで毎回同じURLでローカルサーバーを外部公開できます。
実際のユースケース別コマンド例
Webhook検証(Stripe・LINE・GitHub等)
Stripeのダッシュボードや LINE Developersコンソールに登録するWebhook URLを固定できるので、一度設定すればngrokを再起動しても変更不要になります。
# Next.js(ポート3000)をWebhook受信用に公開
ngrok http --domain=helpful-crack-imp.ngrok-free.app 3000
# Webhook URLとして登録するのはこれ(一度設定すれば変更不要)
# https://helpful-crack-imp.ngrok-free.app/api/webhookOutlook・Microsoft 365連携の検証
Microsoft Graph APIのサブスクリプション(変更通知)には有効なHTTPS URLが必要で、これまでは再起動のたびにサブスクリプションを作り直す必要がありました。静的ドメインがあれば、この手間がゼロになります。
ngrok http --domain=helpful-crack-imp.ngrok-free.app 8080ngrok.yml に設定を書いておく(毎回オプションを書かない方法)
毎回 --domain オプションを書くのが面倒な場合は、設定ファイルに記述しておくと楽です。
# ~/.config/ngrok/ngrok.yml
version: "2"
authtoken: YOUR_AUTH_TOKEN
tunnels:
myapp:
proto: http
addr: 3000
domain: helpful-crack-imp.ngrok-free.app# 設定ファイルを使って起動
ngrok start myapp無料プランの制限と有料プランとの比較
無料プランで静的ドメインが使えるようになったとはいえ、制限もあります。用途によっては有料プランの検討も必要です。
| 項目 | 無料プラン | 有料プラン(Pay-as-you-go〜) |
|---|---|---|
| 静的ドメイン数 | 1つ | 複数 |
| ドメイン形式 | ngrok-free.appのサブドメイン | 独自ドメイン対応 |
| 同時トンネル数 | 1つ | 複数 |
| 接続数制限 | あり(毎分40接続) | 緩和・なし |
| IPポリシー | なし | あり |
個人開発やちょっとした検証なら無料プランで十分。チーム開発や本番に近い環境でのテストが必要な場合は有料プランを検討しましょう。
まとめ
ngrokの静的ドメイン機能をおさらいします。
- 2023年8月16日から、無料プランでも静的ドメインを1つ無料で取得可能
- ダッシュボードの
Cloud Edge → Domains → Create Domainでワンクリック取得 ngrok http --domain=xxxx.ngrok-free.app 3000で起動するだけ- Webhook URLを一度設定すればngrok再起動後も変更不要になる
- 独自ドメインへの固定・複数トンネルは有料プランが必要
「ずっとランダムURLで我慢してた…」という方は、ぜひ今すぐダッシュボードを開いてみてください。30秒で設定完了します。
開発環境をさらに快適にする関連記事
ngrokの静的ドメインをマスターしたら、開発環境全体をさらに効率化していきましょう:
セキュリティ・認証まわり
- 「それ、上げちゃダメ!」GitHub管理で絶対守るべきセキュリティルールと対処法 – ngrokのauthtokenも含め、ローカル開発の秘密情報を安全に管理する方法
- Claude Code Securityとは?AIが脆弱性を検出し修正パッチまで提案する新時代のセキュリティツール – Webhook受信コードの脆弱性をAIが自動検出してくれる時代に
デプロイ・インフラまわり
- 本番デプロイが反映されない!Lambda エイリアス + CloudFront の落とし穴と GitHub Actions で完全自動化した話 – ローカル検証を終えて本番デプロイするときに踏みがちな罠と解決策
- スマホからClaude Codeを遠隔操作!リモートコントロール機能で外出先でもローカル開発を続ける方法 – ngrokと相性抜群、外出先からローカル環境にアクセスする方法
