ngrokを使ってローカルでWebhookをいい感じに受ける方法

GASなどで開発していて、Webhookで飛んでくる内容を確認したいことがあると思いますが、それをローカルで実現する方法です。

https://webhook.site/ というウェブサイトを使うと、すぐにWebhookを受けれるのですが、外に飛ばしたく無いという場合もあると思うので、このサービスをローカルで動かして、かつngrokでインターネットからリクエストを受けれるようにします

Macであればbrew install ngrokでインストールできます。その他のOSは上記サイトをご覧ください。

ngrokにサインアップした後、以下にアクセスし、Tokenを取得します。

$ ngrok config add-authtoken xxxxxxxxxxx

これでトークンが設定できます。これによって、ローカルで動かしているWebサーバーを比較的セキュアにWeb公開できます。

上記リポジトリをローカルにクローンしておきます

$ git clone https://github.com/webhooksite/webhook.site.git
$ cd webhook.site
$ docker-compose up
$ ngrok http 8084

ngrokの公開URLからローカルのwebhook.siteにリダイレクトされていることがわかります。

https://xxxxxx-xxxxx-xxx.ngrok-free.app にアクセスすると、向けてリクエストを飛ばす用のURLが表示されるので「Copy to clipboard」します

その後、SlackやKintoneなどWebhookを飛ばす側のアプリケーションにコピーしたURLを設定します

Kintoneでレコードを追加して、Webhookのリクエストを確認します。

フォーマットもできます

これで比較的簡単かつセキュアに、ローカルでリクエストを受けて確認することができました。