「microCMSでコンテンツを更新したのに、サイトに反映されていない！」
これは、microCMSなどのヘッドレスCMSを使っている際によくあることです。Next.jsなどのフレームワークを使っている場合、サイトを更新するには、Vercel側でデプロイ（再ビルド）を実行する必要があります。
これを自動化するためには、Webhook（ウェブフック）という仕組みを使います。
本記事では、Webhookを使って「microCMSでコンテンツを更新した時に、Vercelに自動デプロイする」ための設定手順と、運用でハマらないための注意点を解説します。
前提として、VercelとGitHubの連携は済んでいる状態とします。
まずは、Vercelの管理画面で、Deploy Hooks（デプロイフック）を作成します。Deploy Hooks とは「デプロイを実行するためのURL」のことで、具体的には、「このURLにアクセスするとデプロイが実行される」というものです。
Vercelの管理画面で対象のプロジェクトを開き、左下のSettingsを押してください。
左側に、Gitというメニューがありますので、こちらを押し、Deploy Hooksのところまでスクロールしてください。
Nameには、このデプロイフックの名前を入力します。（今回は、本番環境にデプロイする想定なので、 Production Deploy Hookと入力してみました。）
Branchには、デプロイするGitブランチ名を入力します。本番環境であれば、一般的にはmainになるかと思います。
入力できたら、 Create Hookボタンを押します。すると、以下の画面のように、デプロイフックが作成されます。
URLが発行されていることがわかるかと思います。このURLにアクセスすると、 mainブランチのソースがデプロイされる、ということになります。
Copyボタンを押して、URLをコピーしておきましょう。
これで、Vercel側の設定は完了です。
次に、microCMS 側での設定を行います。
microCMSの管理画面にて、左側メニューから対象のコンテンツ（API）を選択します。今回は、「ブログ記事を更新したらVercelデプロイ」にしようと思うので、「ブログ」を選択します。
右上に「API設定」ボタンがありますので、こちらを押します。
API設定のセクションにてWebhookを選択し、 追加ボタンを押します。
「サービスの選択」というダイアログが表示されますので、Vercelを選択してください。
設定画面が表示されますので、「基本設定」のセクションにて、先ほどVercel側でコピーしたURLを貼り付けます。（その上の「Webhookの名前」は空欄でOKですが、管理のために入力することも可能です。）
「通知タイミングの設定」のセクションでは、「何をした時にWebhookを実行するか」を選択することができます。今回は特にいじらずデフォルトのままにしておきますが、適宜設定をしておきましょう。
これで、microCMS 側での設定も完了です。
ここまでの設定ができたら、動作確認をしましょう。
microCMS側で何らかのコンテンツ（今回はブログ）を更新し、公開ボタンを押します。その後、Vercelの管理画面にてDeploymentsタブを確認します。
ステータスが「Building」のデプロイが作成されていれば、無事に動いていることになります。デプロイが完了すれば、サイト上に更新が反映されているはずです。
これで、すべての手順が完了です！
Webhook連携で便利にはなりましたが、実は注意すべきポイントがいくつかあるので、解説します。
Webhookが飛んでからVercelのビルドが完了するまで、サイトの規模によりますが数分かかることがあります。microCMSのコンテンツ更新担当者が、公開ボタンを押した直後にサイトを見て「変わっていない」と不安になる可能性があるため、事前に共有しておくと安心でしょう。
Vercelの無料プラン（Hobby）では、1日あたりのビルド回数が100回までと制限されています。そのため、頻繁に更新を繰り返すと制限に達する可能性があります。下書き保存の時はビルドしないようにするなどの対策が必要です。
参考：https://vercel.com/docs/limits
Vercel側のデプロイが何らかの理由でエラーになってしまった場合、当然ではありますがサイトは更新されません。そのため、microCMSのコンテンツを更新した後は、念のためサイトを直接確認したり、デプロイエラーに気付けるような通知の仕組みを作っておくと安全です。
microCMSとVercelをWebhookで連携することで、エンジニア以外でも簡単にサイト更新ができるようになります。ぜひ試してみてください！
