こんにちは。近藤です。普段はコミューンという会社でグローバルチームに所属し、グローバルマーケット向けの開発をしております。
元々英語喋れなかったのですが英語頑張ってます。
1. はじめに
ローカル環境で開発をしていると、外部サービスからのWebhookを受け取れないという課題に直面しますよね。本記事では、この課題を解決するngrokの活用方法について、Twilioを使った例とともに解説します。
なお、今回はAI Agent Hackathon with Google Cloudに提出したTodo管理を管理してほしい ～電話でTodo管理を自動化するサービス～においても、Twilio を利用したアプリケーションの開発をローカル環境で試す際に、外部からのアクセスを可能にするngrokを使ったポートフォワーディングを利用しました
2. ngrokとは？
ngrokは、ローカル環境で動作するサーバーをインターネット上に一時的に公開するためのツールです。
主な特徴：
- 簡単なセットアップ：数行のコマンドで設定完了
- セキュアな通信：HTTPS対応
- リアルタイムのインスペクション：リクエスト/レスポンスの確認が可能
3. 基本的な使い方
3.1 インストールと初期設定
- ngrokの公式サイトからアカウント登録
- アカウント登録後、認証トークンを取得
- 以下のコマンドで認証を設定
ngrok authtoken <YOUR_AUTH_TOKEN>
3.2 ローカルサーバーの公開
以下のコマンドで、ローカルの3000番ポートを公開します：
ngrok http 3000
実行すると、以下のような出力が表示されます：
ngrok (Ctrl+C to quit)
Session Status online
Account example (Plan: Free)
Version 3.5.0
Region Japan (jp)
Latency -
Web Interface http://127.0.0.1:4040
Forwarding https://xxxx-xxx-xxx-xxx-xxx.jp.ngrok.io -> http://localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00
これで https://xxxx-xxx-xxx-xxx-xxx.jp.ngrok.io というURLが発行され、このURLにアクセスすると、ローカルの3000番ポートで動作しているサーバーにアクセスできるようになります。
このURLを環境変数などで設定できる様にしておくと、ngrok経由でリクエストを受け付けられる様になります。 （nest.jsの実装で環境変数からTWILIO_WEBHOOK_URLを読み込む実装）
本番環境ではここを公開されているAPIのURLに設定すれば良い
4. 実践例：Twilioでの活用
以下のシーケンス図は、ngrokを使ってTwilioからのWebhookをローカル環境で受け取る流れは以下のように
このように、ngrokを使うことで、Twilioからのリクエストをローカル環境で簡単にテストできます。
5. まとめ
ngrokを使うことで、ローカル開発環境を簡単に外部公開できます。これにより、Twilioのような外部サービスとの連携開発をスムーズに進めることができます。
実装例のリポジトリも公開していますので、参考にしてください：
Discussion