microCMS

カスタム通知をローカル環境で受け取って開発をスムーズにする

λ沢

この記事は公開後、1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、λ沢です。

この記事では microCMS のカスタム通知関連の開発を簡単にする手法を紹介します。

はじめに


microCMS ではカスタム通知を設定をすることによって、コンテンツ更新などのタイミングで POST リクエストを受け取って任意の処理を行うことができます。
しかし、このような仕組みを実装する際にローカル環境で POST リクエストを受け取るには工夫が必要です。
この記事ではその手法を紹介します。

microCMS 上の設定


まずは適当な API を定義します。



Webhook の設定をするには、右上の「API 設定」をクリックします。



次にサイドバーの「Webhook」をクリックします。



その後「追加」ボタンをクリックして…



一番下にあるカスタム通知をクリックします。



その後、各フォームを以下のように埋めます。



しかし、この状態でコンテンツを更新しても http://localhost:8000 にリクエストは届きません。

これは送信元である microCMS のサーバにとって、 localhost とは私たちが普段使用している開発マシンのことではなく、 microCMS のサーバ自身であるためです。

ではローカルマシンで Webhook を受け取ることはできないのでしょうか?
コードを変える度にインターネット上のどこかにデプロイをして、その完了を待たないと動作確認ができないのでしょうか?
コード変更をしてすぐに動作確認できないのは不便です。
しかし、この問題は microCMS に限らず Webhook という仕組みにとって一般的なものなので、既に世の中にはこの問題を解決できるツールが存在します。

トンネリング


ローカルマシンで Webhook を受け取るために便利なツールとして、最もメジャーなものは恐らく ngrok でしょう。
awesome-tunneling というリポジトリを見ると ngrok と似たようなツールを見つけられます。

ngrok はローカルマシンが受け付けているポート番号を指定すると、インターネットからアクセス可能な一時的な URL を発行してくれるコマンドラインツールです。
課金(5 USD~)を行うと一時的な URL だけでなく固定の URL も発行できて便利です。

ngrok が発行した URL を microCMS の Webhook 設定画面で入力することによって、 ローカルマシンでも Webhook を受け取れます。

それでは早速 ngrok を使った Webhook の設定をしてみましょう。
まずは ngrok をインストールします。 Mac を利用している場合は brew でインストール可能です。

$ brew install --cask ngrok


インストールが完了したら以下のコマンドで URL の発行が可能です。
引数の最後にある 8000 はローカルマシンが受け付けているポート番号です。

$ ngrok http 8000


このコマンドを実行するとターミナルに以下のような表示がされます。

Session Status                online
Account                       Tsubasa Irisawa (Plan: Pro)
Version                       2.3.40
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxx.ngrok.io -> http://localhost:8000
Forwarding                    https://xxxx.ngrok.io -> http://localhost:8000


この https://xxxx.ngrok.io という部分が発行された URL です。
xxxx の部分はコマンドを実行するごとに変わるので、適宜お手元のターミナルを確認して読み替えつつ記事の続きを読んでいただければと思います。

この値を microCMS の Webhook 設定画面に入力します。



この状態でコンテンツを更新することによって無事 http://localhost:8000 でカスタム通知のリクエストを受け取ることができます🎉

おわりに


この記事ではmicroCMSのカスタム通知関連の開発を簡単にする手法を紹介しました。
カスタム通知機能を活用することによって様々なシステムとの連携が可能です。
この記事が皆さんが扱うシステムの柵を取り除くための助けになれば幸いです。

-----

microCMSは日々改善を進めています。
ご意見・ご要望は管理画面右下のチャット、公式Twitterお問い合わせからお気軽にご連絡ください!
引き続きmicroCMSをよろしくお願いいたします!

まずは、無料で試してみましょう。

APIベースの日本製ヘッドレスCMS「microCMS」を使えば、 ものの数分でAPIの作成ができます。

microCMSを無料で始める

microCMSについてお問い合わせ

初期費用無料・14日間の無料トライアル付き。ご不明な点はお気軽にお問い合わせください。

お問い合わせ

microCMS公式アカウント

microCMSは各公式アカウントで最新情報をお届けしています。
フォローよろしくお願いします。

  • X
  • Discord
  • github

ABOUT ME

λ沢
新卒で入った会社では Go を用いた API サーバの開発、Vue.js を用いた管理画面の開発、Arch Linux 上の Jenkins 運用などを担当。 次の会社では Express + TypeScript を用いたサーバレスなシステム開発、Rails/Laravel/AWS CDK などを用いた複数プロジェクトの立ち上げを担当。現在は microCMS でサーバサイドの開発、インフラ運用を担当。