こんにちは、パレイド技術部です。
連載「バーチャルAI実験:人間が答えるチャットボットの構築」の補足記事、最終回です。
本編第 1 回で ngrok の起動スクリプトを紹介しましたが、ngrok 自体のインストールや初期設定は省略していました。この補足では、ngrok のインストールから認証トークンの設定、固定ドメインの取得までを解説します。
本記事はローカル LLM による自動執筆パイプラインで生成されました。現段階ではクラウド AI(Claude 等)の補助や人間の編集が介在していますが、pareido.jp では最終的に AI が自律的にコンテンツを制作できる仕組みの構築を目指しています。
ngrok (エヌグロック)とは
ngrok は、ローカル PC で動いているサーバーをインターネットに一時的に公開するトンネリングツールです。

LINE や Slack の Webhook は「公衆インターネットからアクセス可能な HTTPS エンドポイント」を要求します。開発段階で VPS やクラウドにデプロイするのは手間なので、ngrok で手軽に解決します。
1. ngrok のインストール
ngrok は Mac / Linux / Windows に対応しています、お使いの環境に合わせてインストールを進めます。pareido.jp では Mac 版を主に利用しています。
Mac(Homebrew)
Homebrewを利用すると簡単です。
brew install ngrok/ngrok/ngrok
Mac / Linux(手動ダウンロード)
- ngrok のダウンロードページ からバイナリをダウンロードする
- 解凍してパスの通ったディレクトリに配置する
# 例: ダウンロードした zip を解凍して /usr/local/bin に配置
unzip ngrok-v3-stable-darwin-amd64.zip
sudo mv ngrok /usr/local/bin/
Windows
- ngrok のダウンロードページ から Windows 版の zip をダウンロード
- 解凍して任意のフォルダに配置
- そのフォルダを環境変数
PATHに追加する
インストール確認
ngrok version
バージョン番号が表示されれば成功です。
2. アカウント作成と認証
ngrok は無料プランでも利用できますが、アカウント登録が必要です。
手順
ngrok のサインアップページ でアカウントを作成します。英語ですが特に悩まず進められると思います。ログイン後、ダッシュボードの「Your Authtoken」ページで認証トークンをコピーします。

ターミナル等で、コマンドラインから認証トークンを登録します。
ngrok config add-authtoken YOUR_AUTHTOKEN_HERE
このコマンドは ~/.config/ngrok/ngrok.yml(Mac/Linuxの例)に認証情報を保存します。一度実行すれば、以降は自動的に参照されます。
同時に、.env にも記載しておくと起動スクリプトから参照できます。
export NGROK_AUTHTOKEN="YOUR_AUTHTOKEN_HERE"
3. 基本的な使い方
認証が完了したら、FastAPI サーバー(ポート 8000)をインターネットに公開してみます。
起動
ngrok http 8000
ターミナルに以下のような画面が表示されます。
ngrok (Ctrl+C to quit)
Session Status online
Account your-email@example.com (Plan: Free)
Version 3.x.x
Region Japan (jp)
Forwarding https://xxxx-xx-xx-xxx-xxx.ngrok-free.app -> http://localhost:8000
Forwarding に表示された https://xxxx....ngrok-free.app が公開 URL です。この URL を LINE や Slack の Webhook URL に設定します。
動作確認
FastAPI サーバーが起動した状態で、ブラウザから ngrok の URL にアクセスしてみてください。
https://xxxx-xx-xx-xxx-xxx.ngrok-free.app/
{"status": "running", "project": "Virtual AI"} が返ってくれば、ローカルサーバーがインターネットに公開されています。
ngrok のステータス画面
ngrok は起動中、http://localhost:4040 でステータスページを提供しています。受信したリクエストの一覧やレスポンスを確認できるため、デバッグに便利です。
4. 固定ドメインの設定(推奨)
無料プランの ngrok は、起動するたびにランダムな URL が割り当てられます。URL が変わるたびに LINE と Slack の Webhook URL を変更するのは手間です。
ngrok の無料プランでも、1 つの固定ドメインを取得できます。
手順
ngrok ダッシュボード からメニューの「Domains」を開き、「Create Domain」をクリックします。

自動生成されたドメイン(例:your-name-xxxxx.ngrok-free.dev)を確認します。
固定ドメインでの起動
取得した固定ドメインを指定して ngrok を起動します。
ngrok http 8000 --url your-name-xxxxx.ngrok-free.dev
これで、何度 ngrok を再起動しても同じ URL が使われます。LINE と Slack の Webhook URL を一度設定すれば、以降は変更不要です。
.envへの反映
固定ドメインを .env に記載しておくと、起動スクリプトから参照できます。
export NGROK_DOMAIN="your-name-xxxxx.ngrok-free.dev"
起動スクリプトの更新
本編第 1 回の start.sh を固定ドメイン対応に変更します。
#!/bin/bash
source .env
pkill -f ngrok
pkill -f uvicorn
echo "サーバーを起動中..."
# 固定ドメインが設定されていれば使用
if [ -n "$NGROK_DOMAIN" ]; then
ngrok http 8000 --url "$NGROK_DOMAIN" &
else
ngrok http 8000 &
fi
sleep 5
echo "ngrok 起動完了"
uvicorn app:app --reload
trap "pkill -f ngrok; pkill -f uvicorn; echo 'システムを停止しました。'" EXIT
5. 無料プランの制限事項
ngrok の無料プランには以下の制限があります。開発用途であれば十分ですが、本番運用では有料プラン、または別途 VPS の準備を検討しましょう。
| 項目 | 無料プランの制限 |
|---|---|
| 同時トンネル数 | 1 |
| 固定ドメイン | 1 つ |
| リクエスト数 | 月 20,000 件 |
| レート制限 | 40 リクエスト/分 |
| 接続持続時間 | 制限なし(以前は 2 時間制限があったが撤廃) |
本連載の人力バーチャルAI の開発・実験用途であれば、無料プランで十分です。
6. トラブルシューティング
ERR_NGROK_108: Authtoken が設定されていない
ngrok config add-authtoken YOUR_AUTHTOKEN_HERE
を実行し忘れている場合に発生します。
ERR_NGROK_120: 同時トンネル数の上限
無料プランでは同時に 1 つのトンネルしか使えません。別のターミナルで ngrok が起動している場合、先に停止してください。
pkill -f ngrok
Webhook が届かない
- ngrok のターミナルが
Session Status: onlineになっているか確認 http://localhost:4040でリクエストログを確認- FastAPI サーバーが
localhost:8000で起動しているか確認 - Webhook URL のパスが正しいか確認(
/webhook/line、/slack/webhook)
無料版で表示されるブラウザ確認画面
ngrok の無料プランでは、ブラウザからアクセスしたときに「Visit Site」の確認画面が表示されることがあります。これは Webhook(API リクエスト)には影響しないため、LINE や Slack からのリクエストは正常に通過します。
まとめ
ngrok の設定手順をまとめます。
- ngrok をインストール(Homebrew または手動ダウンロード)
- アカウントを作成し、認証トークンを登録
ngrok http 8000でローカルサーバーを公開- 固定ドメインを取得し、
--urlオプションで指定 - LINE と Slack の Webhook URL に固定ドメインを設定
以上で、連載の補足記事は完了です。LINE、Slack、ngrok の 3 つの設定が整えば、本編のコードがそのまま動作します。
補足3本と本編3本を合わせた全体の流れをおさらいします。
| 記事 | 内容 |
|---|---|
| 本編 第 1 回 | FastAPI + .env + ngrok で基盤構築 |
| 本編 第 2 回 | 人間優先・LLM フォールバックのコアロジック |
| 本編 第 3 回 | LINE × Slack の双方向通信で完成 |
| 補足 1(本記事の前々回) | LINE 公式アカウントと Messaging API の設定 |
| 補足 2(本記事の前回) | Slack アプリの作成と Bot 設定 |
| 補足 3(本記事) | ngrok のインストールと固定ドメイン設定 |
連載の補足にお付き合いいただき、ありがとうございました。



