Webhookのデバッグに便利なツール「Webhook.site」の紹介

以前のブログで紹介したWebhookのデバッグツール「Beeceptor」に続いて、今回は「Webhook.site」を紹介します。

利用方法

Webhook.siteの利用方法は2種類あります。

1. ホスティングされたWebサイトを利用する
   https://webhook.site/
2. Webhook.siteをインストールする
   インストールはDockerまたはPHPのComposerで行う

それぞれの利用手順について説明します。

利用手順

ホスティングされたWebサイトを利用する場合

SendGridのEvent Webhookを例に紹介します。Webサイトにアクセスすると下図の枠内のようにURLが表示されるので、横にあるリンクまたはボタンでURLをクリップボードにコピーしてください。

SendGridにログインして、コピーしたURLをEvent Webhookに設定し、「Test Your Integration」ボタンを押してイベントが受信できるか確認します。

次のようにテスト用のイベントデータが表示されたら設定完了です。

画面中段の右側に3つチェックボックスが並んでいます。「Format JSON」にチェックを入れると、JSONフォーマットに整形してくれます。

他の2つのチェックボックスはそれぞれ次のような機能です。

• Auto Navigation…常に最新の受信データを表示する
• Hide Details…ヘッダ情報を非表示にする

Webhook.siteは無料で利用できますが、受信可能なリクエストは1セッションで500件までとなっています。制限を回避するには、Patreonで課金するか、自分でWebhook.siteをインストールするかのどちらかです。後者の手順は次のとおりです。

Webhook.siteをインストールする場合

Webhook.siteのインストール方法は2種類ありますが、Dockerを使う方法について紹介します。Dockerで動作させるために必要なファイル（Dockerfile、docker-compose.yml）はGitHubで公開されています。

今回、動作を確認した環境は次のとおりです。

• Windows 10 Pro
• Git 2.16.2
• Docker 2.0.0.3
• Docker Compose 1.23.2

GitHubからコードをCloneしてdocker-composeで各コンテナを起動します。

git clone https://github.com/fredsted/webhook.site.git
cd webhook.site
docker-compose up

正常に起動すると次のように「Server ready!」と表示されます。

「http://127.0.0.1:8084」へアクセスすると、以下のようにホスティングされたWebサイトと同じページが表示されます。使い方も同じです。

Event Webhookの受信をローカル環境で確認する場合は、上記のURLをインターネット上へ公開する必要があるため、ngrokなどを利用してください。（参考）

以上、Webhook.siteの紹介でした。