ngrokの無料プランでURLが毎回変わる問題、実はもう解決してた!静的ドメインの設定方法

目次

「また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のダッシュボードにログインして、以下の手順で進めてください。

  1. ngrok ダッシュボード にログイン
  2. 左サイドメニューの Cloud EdgeDomains を開く
  3. Create Domain ボタンをクリック
  4. ランダムな文字列のサブドメインが自動で払い出される(例: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/webhook

Outlook・Microsoft 365連携の検証

Microsoft Graph APIのサブスクリプション(変更通知)には有効なHTTPS URLが必要で、これまでは再起動のたびにサブスクリプションを作り直す必要がありました。静的ドメインがあれば、この手間がゼロになります。

ngrok http --domain=helpful-crack-imp.ngrok-free.app 8080

ngrok.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の静的ドメインをマスターしたら、開発環境全体をさらに効率化していきましょう:

セキュリティ・認証まわり

デプロイ・インフラまわり

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次