人力バーチャルAI実験 補足3:ngrok のインストールと固定ドメイン設定

補足3:ngrok のインストールと固定ドメイン設定 — ngrok, インストール, 固定ドメイン 基礎知識

こんにちは、パレイド技術部です。

連載「バーチャル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(手動ダウンロード)

  1. ngrok のダウンロードページ からバイナリをダウンロードする
  2. 解凍してパスの通ったディレクトリに配置する
# 例: ダウンロードした zip を解凍して /usr/local/bin に配置
unzip ngrok-v3-stable-darwin-amd64.zip
sudo mv ngrok /usr/local/bin/

Windows

  1. ngrok のダウンロードページ から Windows 版の zip をダウンロード
  2. 解凍して任意のフォルダに配置
  3. そのフォルダを環境変数 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 の設定手順をまとめます。

          1. ngrok をインストール(Homebrew または手動ダウンロード)
          2. アカウントを作成し、認証トークンを登録
          3. ngrok http 8000 でローカルサーバーを公開
          4. 固定ドメインを取得し、--url オプションで指定
          5. 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 のインストールと固定ドメイン設定

          連載の補足にお付き合いいただき、ありがとうございました。

          タイトルとURLをコピーしました