microCMS + Vercel カスタムフックを設定しよう
実はめるろって氏、ホームページがあります。ご存知でしたか？笑
以前こちらの記事で、構成を説明した時、Netlifyを利用していたのですが、
管理ページやデプロイが重くてVercelに乗り換えました。
今回タイトルにある「カスタムフック」ですが、
microCMSではコンテンツを作成・更新・削除した場合など、
特定のタイミングでビルドを走らせることができます。
逆にいうと、私のポートフォリオサイトはSSGなので、
記事を更新しただけでは、サイトには反映されず、
一度サーバー側でビルドを行う必要がありました。
結果、何が起こるかというと、
更新頻度が下がる...（これだけが理由ではないですが。）
なので、もっと快適にポートフォリオを更新できるように、カスタムフックを利用してみました。
変更前の画面
最新は左上です。ここに「新人魔女の初仕事」という作品を追加します。
microCMSの設定
右上の「APIの設定」から「Webhook」を選択
「追加」を押すとこんな画面になります。
... Netlifyはあるんですよね。
今回は「カスタム通知」を使用します。
こんな画面になるので、追加するだけ...なのですが、
こちらのURLは、Vercel側で発行する必要があります。
やっていきましょう。
VercelでのDeploy Hooksの発行
Vercelの画面から Settings > Git > Deploy Hooks で以下の画面にたどり着きます。
- My Example Hook （今回は art hookにしました。自由につけてOK）
- main（どのブランチをビルドするかなので、基本mainでOK）
- Create Hookを押下
- アドレスが発行されます（※このアドレスは外部に漏れないように注意してください。不審なビルドがあったら再発行しましょう。）
こんな感じで、アドレスが発行されたら先程のmicroCMSの画面に入力して「設定」ボタンを押してください。
わくわくビルドタイム
うまく設定できたか試してみます。
絵を追加しました。記事を公開。
↓
Vercelへ
ちゃんとビルドが始まってますね！やった〜〜。
ビルドもちゃんと完了。
↓
サイトに反映されたか確認
されてますね💮
追加された作品気になる方は、ぜひサイトにアクセスしてみてください〜
というわけで、microCMSでカスタムフックを設定する方法を紹介しました。
と〜〜〜っても簡単なので、ここで躓く方も少ないかもしれませんが、
どこかで少しでもお役に立てればと思います。
最後まで読んでいただき、ありがとうございました〜mm
