目次
こんにちは。
ディレクターの田辺です。
以前、ShopifyのAPIをPostmanでテストするやり方をご紹介しました。
ShopifyのAPIをPostmanで手軽にテストする
しかし、APIだけじゃなく、ShopifyのWebhookも手軽にテストできないか、というご要望もこの世界のどこかに存在するかもしれません。
今回は、Webhook.siteとngrokを使用して、Shopifyのwebhookをテストする方法をご紹介します。
Webhook.siteとは
Webhookを受けるためのエンドポイントを提供してくれるサービスです。
また、Webhook.siteが提供してくれるエンドポイントにデータがPOSTされた際、そのデータを目視確認可能なGUIも提供してくれます。
サービス名からも分かる通り、Webサービスです。
ShopifyのWebhookは個人情報を扱うこともあるため、Webサービスを使うことに抵抗があったり、コンプライアンス的に無理な場合もあるかもしれません。
しかし、安心してください。
Webhook.siteのDocker Imageが提供されていますので、本記事ではDocker Containerを立ち上げローカルでテストする方法をご紹介します。
https://docs.webhook.site/install.html#installation-guide_1
ngrokとは
トンネリングツールです。
ローカル環境で稼働しているWebサービスをグローバルに公開することができます。
ローカルで稼働しているWebhook.siteのDocker Containerを、ngrokで外部に公開します。
ngrokがURLを発行してくれるので、ShopifyのWebhook設定にてエンドポイントとして登録する、というのが本記事の大筋です。
Webhook.siteとngrokを組み合わせてShopifyのWebhookを受けるイメージ
設定の流れ
筆者の環境はMacOSです。Windowsの方は適宜読み替えていただければと思います。
Webhook.siteのDocker Containerを立ち上げる
https://docs.webhook.site/install.html#installation-guide_1
上記、リンクに記載の通りです。
※ DockerとDocker Composeはインストール済みとします。
// 適当なディレクトリを作り、移動します。
mkdir ~/webhook-test
cd ~/webhook-test
// https://github.com/webhooksite/webhook.site/blob/master/docker-compose.ymlをディレクトリ内に設置します。
curl -O https://raw.githubusercontent.com/webhooksite/webhook.site/master/docker-compose.yml
// Webhook.siteのcontainerを立ち上げます。
docker-compose up
// http://localhost:8084 にアクセスすると、Webhook.siteのGUIが表示されます。ここまで、完了すると、http://localhost:8084 にアクセスすると下図の画面が表示されるはずです。
ngrokをインストールする
homebrewでインストールしても、nodeでインストールしても、どちらでも大丈夫です。
homebrew: https://ngrok.com/download
Node: https://www.npmjs.com/package/ngrok
上記リンクを参考にngrokをインストールします。
ngrokのインストールが完了したら、ngrokにアカウントを作成します。
https://dashboard.ngrok.com/signup
ngrokのマイページにAuth tokenがあるので、コピーします。
下記を実行し、Auth tokenを登録します。
ngrok config add-authtoken {上図で取得したAuth token}ngrokでローカルのWebhook.siteを公開する
下記を実行します。
ngrok http 8084下図のような出力が表示されます。
上図のhttpsの方をコピーします。
Webhookのエンドポイントを作る
Webhook.site (http://localhost:8084)にアクセスすると下記のようなURLが表示されているはずです。http://localhost:8084/2008456f-56aa-4529-b93d-64faa5bf57c7このURLのうち、2008456f-56aa-4529-b93d-64faa5bf57c7の部分をコピーし、
(この文字列の内容は皆さんそれぞれ異なりますので、ご自身の環境に表示されている文字列をお使いください。)
ngrokが発行したURLと結合させます。
下記のようになります。
https://xxxx-xxx-xxx-xxx-xxx.ngrok-free.app/2008456f-56aa-4529-b93d-64faa5bf57c7
このURLが、Shopifyに登録するエンドポイントになります。
ShopifyのWebhookにエンドポイントを登録する
Shopifyのストア管理画面の「設定 > 通知」にアクセスし、下図のようにします。
以上でWebhookの設定は完了です。
Shopifyストアで注文を行ってから、http://localhost:8084にアクセスすると、下図のようにShopifyのWebhookから受け取ったデータが、ローカルのWebhook.siteに表示されていることを確認できるはずです。
まとめ
ここまで書いて思いましたが、思ったより「手軽」ではないかもしれませんね。
しかし、Webhookのエンドポイントをいちいち構築するよりはきっと手軽なはずです！
ShopifyのWebhookに興味津々な方がこの世界のどこかにいると信じ、そんな方にこの記事が届くことを祈っております。
それでは。