Webhookの通知先をローカル環境にできませんか？

後輩ちゃん「ローカル環境に外部サービスからのWebhookを受け取りたいんです」
後輩ちゃん「いろいろ試してみましたがうまくいかず、、、」

すずこ「そんな時は、ngrokを使おう！」

目次

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のほかにも、色々な使い道がありそうですね！」

以上