Webhookの通知先をローカル環境にできませんか？
後輩ちゃん「ローカル環境に外部サービスからのWebhookを受け取りたいんです」
後輩ちゃん「いろいろ試してみましたがうまくいかず、、、」
すずこ「そんな時は、ngrokを使おう！」
目次
Webhookとは
Webhook
- アプリケーションから別のアプリケーションに対して、リアルタイムな情報提供を実現するための仕組みのこと
- イベント発生をトリガーとして、データを送信するため、ポーリングを違って必要最低限の通信でデータのやり取りができる
すずこ「開発時のWebhookの受け取り先をローカル環境にしたいんだね」
すずこ「ローカル環境のWebサーバーを外部公開する必要があるので、少々面倒くさいけど、」
すずこ「ngrokというツールを使うことによって、簡単に実現できるようになるよ！」
やりたいこと
ngrokとは
Serve Web Apps with one command
ngrok is the programmable network edge that adds connectivity,
security, and observability to your apps with no code changes
コードを変更することなくアプリに接続性、セキュリティ、可観測性を 追加するプログラム可能なネット> ワーク エッジです。
すずこ「簡単に言うと、ローカルサーバ（ローカルホスト）に外部から直接アクセスすることを可能にするツールのことだよ」
実際に使ってみた
すずこ「実際に使ってみて、便利さを体感してみよう」
-
ngrok公式サイトからパッケージをダウンロード
※無料サインアップが必要です
※OSに応じたパッケージをダウンロードする
※コマンドもOSによって異なります。下記例はLinuxの手順です -
パッケージを展開
$ tar -xvzpf ngrok-xxxxxxxxx.tgz $ ls ngrok ngrok-xxxxxxxxx.tgz -
アカウントを接続
ngrok公式サイトにアクセスし、ログインするとtokenが発行されている。 $ ./ngrok config add-authtoken xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -
起動する
ポート番号はご自由に $ ./ngrok http 3000 ngrok (Ctrl+C to quit) Visit http://localhost:4040/ to inspect, replay, and modify your requests Session Status online Account suzuko (Plan: Free) Version 3.1.0 Region Japan (jp) Latency - Web Interface http://127.0.0.1:4040 Forwarding https://b595-126-126-250-90.jp.ngrok.io -> http://localhost:3000 Connections ttl opn rt1 rt5 p50 p90 0 0 0.00 0.00 0.00 0.00 -
アクセスしてみる
Forwardingに表示されているURLにアクセス
今回はlocalhost:3000にポートフォワーディングしているため、http://localhost:3000 の内容が表示されればOK！
※例として、Forwardingも公開してますが、起動ごとにユニークなキーが発行されるため、記事公開時にはアクセスできません
まとめ
後輩ちゃん「こんなに簡単な手順でlocalhostに対し、外部から直接アクセスできるようになるなんて...」
後輩ちゃん「ということは、Webhookのエンドポイントに、ngrokで公開されたURLを登録すればいいんですね！」
すずこ「その通り！そうすれば、Webhookの通知も受け取ることができるよ！」
後輩ちゃん「しかもhttpsまで用意されてるじゃないですか...（歓喜）」
後輩ちゃん「Freeプランでも十分すぎる機能ですね...（大歓喜）」
後輩ちゃん「Webhookのほかにも、色々な使い道がありそうですね！」
以上