はじめに
本記事では，ngrokで固定のドメインを利用する方法が変わっていたようなので解説します．
本記事の執筆の流れ
ngrokを用いたLINE bot をLLMを活用しながら開発していた際，ngrokで毎回ランダムに生成されるURLをLINEのwebhookに貼り付けて…という面倒な作業が発生し，固定ドメインを利用する方法を調べて実践したのでレポートします．
執筆時点でAI (Gemini 3 Pro) の情報が古かったのと新しい日本語の解説記事も無いようだったので書くことにしました．
本記事にはngrok自体のセットアップ手順に関する内容は含まれません．
そもそもngrokとは何か
ngrokは自分のPC上で動いているものをインターネットに簡単に公開できるツールです．
本来，自分のPC上のWebサイトを公開するには難しいネットワークの設定やサーバの設定が必要ですが，ngrokを使うことで安全に，一時的に，簡単に行うことができます．
自分のPCでWebサイト(例えばhttp://localhost:3000)を立ち上げている状態でngrok http 3000を実行するとURLが発行され，以下のことができるようになります．
- 自分のPCでつくったサイトを，実際にスマホで操作して確認
- 遠くにいる友だちにURLを送って，作っているものを見せる
- LINEからメッセージが届いた時に，自分のPCにあるプログラムを動かすといった連携
何が問題なのか
かつてのngrok無料枠では，起動のたびにURLが変わり，毎回LINEやSlackの設定画面を開いてURLをコピペし直す作業が必要でした．しかし2023年のアップデートにより無料版でも固定のドメイン (static domain) を1つまで使用できるようになりました．
そして現在は，最新の価格改定とともにstatic domainがdev domainへと変更されています．
このdev domainはすべてのアカウントに自動的に割り当てられ，固定のドメインとして利用することができます．
ngrokでdev domainを確認する
上記の通り，ngrokアカウントを作成した時点で自動で割り当てられるので使い方も何も無いのですが，dev domainは以下の手順で確認できます．
- ngrokのダッシュボードにログインします．
- 左のメニューから[Domains]へ移動し，
abc-123-xyz.ngrok-free.devのようなドメインを探してコピーします．
これでdev domainが取得できました．LINE botならhttps://をつけてWebhook URLにhttps://abc-123-xyz.ngrok-free.dev/callbackを1度貼り付ければ起動のたびに書き直すことなく動作することができます．
実際にdev domainを試す
取得したドメインを起動して試してみます．
-
ngrokの認証
まずは自分のアカウントとPCを紐付けます．左のメニューから[Your Authentication]に移動し，一番上のコマンドngrok config add-authtoken $YOUR_AUTHTOKENを実行すればOKです．
-
ドメインを指定して起動
ngrokで取得したドメインを指定して，ローカルのポートを公開します．ngrok http 8000 --url=<取得したドメイン>.ngrok-free.dev -
ローカルサーバを立てて検証
ngrokとは別のターミナルを開いて適当なディレクトリに移動し，以下のコマンドでPythonを使って一時的にサーバを立ち上げます．python -m http.server 8000 -
URLにアクセス
ブラウザを開き，ngrokで取得したURL(https://abc-123-xyz.ngrok-free.dev)を入力します． -
表示を確認
自分のPC内にあるファイルリストが表示されていれば成功です！
おわりに
本記事では，ngrokの無料版で利用できるdev domainの設定方法を紹介しました．
私と同じようにAIのアドバイスや他の技術記事の情報が古くて詰まってしまったという方の助けになれば嬉しいです．