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をクリップボードにコピーしてください。

URLをクリップボードにコピー

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

イベントが受信できるか確認

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

テスト用のイベントデータ

画面中段の右側に3つチェックボックスが並んでいます。「Format JSON」にチェックを入れると、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サイトと同じページが表示されます。使い方も同じです。

ホスティングされたWebサイトのページ

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

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