Logo Image

Blog Article

Vercelのデプロイのタイミングを変更したい

00

Vercelにデプロイしてもサイトが更新されない

Next.jsとMicroCMSでjamstackアーキテクチャでブログを開発しました。しかし、記事を作成したり更新してもVercelにデプロイされません。その原因と対策を簡単にまとめました。

試したこと

  • デプロイログの確認
  • ソースコードを再デプロイする
  • キャッシュをクリアする

Vercelのダッシュボードからデプロイログを確認し、デプロイ時に発生しているエラーまたは問題が無いか確認しました。特にエラーや問題はありませんでした。

また、サイトのキャッシュが更新されていない可能性があるため、キャッシュをクリアして再度デプロイしましたがデプロイされません。

ソースコードをビルドしてもデプロイされていません。

原因

Next.jsをVercel上で動かせる様にしただけなので、ソースコードの変更があった際にプッシュをすれば再ビルドされサイトに反映されますが、micro CMSで記事コンテンツを更新してもサイトの方には反映されません。

私はビルドすれば常にデプロイされてサイトに反映されるものだと思っており、勘違いしてソースコードに変更がないのにビルドをしていました。

これでは実運用で使えないため、コンテンツに変更があったタイミングでデプロイを実行する設定が必要です。

対策

Webhookを利用して、コンテンツの更新時にVercelでビルド・デプロイを行うように設定します。

VercelのDeploy Hooksを利用する

Deploy Hookとは、指定したブランチのデプロイをトリガーするためのURLで、このURLにリクエストを送ることで、自動でデプロイを実行することができます。

Vercelの管理画面に入り、Settings → Git のページから「Deploy Hooks」を探します。

Deploy Hookの名前を入力し、デプロイ時に使用するブランチを指定した後、「Create Hook」でDeploy Hookが作成されます。

Webhookの作成

Newtの管理画面に入り、スペース設定 → Webhook のページから「Webhookを作成」を押し、「Webhookテンプレート」を選択します。

「Vercel」のテンプレートを選んだ後、Vercelの「Display Hooks」で作成したURLを入力し、Webhookを作成します。

以上で設定は完了です。

これで対象のコンテンツの公開・非公開が変更された時や、および公開コンテンツの更新時にリクエストが送信され、Vercelでビルド・デプロイが実行されます。