はじめに

こんにちは。所用でしばらく家を空けていたら保管期限が1日過ぎた郵便物の不在票が...。
差出人に戻ってしまいました、筆者です

さて、以下記事で個人ブログのホスティング先をNetlifyからCloudflare Pagesに引越しました。

それに伴って、Contentful更新時にデプロイできなくなってしまったので、その設定をしました！
参考になれば幸いです！

方針

ContentfulのWebhookでCloudflare APIのデプロイを行うエンドポイントを叩きます。
エンドポイントはこちらです。

Contentful更新時にCloudflareのAPI叩いてCloudflare Pagesのデプロイを走らせる

1. Cloudflareから必要な値を取得する

Cloudflare APIでデプロイするエンドポイントを叩くため、以下の値が必要なります。

1. アカウントID
2. プロジェクト名
3. 登録メールアドレス
4. APIキー

1.1. アカウントIDの確認方法

ホームから対象のドメインページへ移動。

遷移後のページの右サイドバーにあります。

1.2. プロジェクト名の確認方法

ホームからページへ移動。

デプロイ対象のプロジェクトに表示されます。

1.3 登録メールアドレスの確認方法

アカウントアイコンにマウスホバーすると確認できます。

1.4. APIキーの確認法

プロフィールページに行きます。

APIトークンタブに移動し、Global API Keyの表示を押下しパスワードの入力で表示できます。

2. ContentfulでWebhookの設定画面を開く

以下から設定が行えます。

今回は新規作成します。

3. Webhookの設定を行う

設定項目は以下の通りです。

1. Name
2. URL(POST)
3. Triggers
4. Headers

3.1. Name

任意の値で設定してください。

3.2. URL

Cloudflare APIのエンドポイントを設定します。

Cloudflareで取得した、アカウントIDとプロジェクト名をURLに埋めてURLを生成します。

https://api.cloudflare.com/client/v4/accounts/CF_ACCOUNT_ID/pages/projects/CF_PROJECT_NAME/deployments

3.3 Triggers

お好みのトリガーを設定してください。
自分はEntryのPublishとUnpublishとDeleteのみです。

3.4. Headers

以下2つを設定します。
いずれも先ほどCloudflareで取得した値を使用します。

1. X-Auth-Email
2. X-Auth-Key

設定値確認

全体で見ると以下の感じです。
数字が付いているところが先ほどCloudflareで取得した各値の番号と連動しています。

完了

あとはContentfulでEntryを更新等すればCloudflare Pagesのデプロイが走ります！

おわりに

無事に設定が終わりました
これで快適なContentfulでの記事更新ができます

Lighthouse等のテストを行いたい場合は、GitHub Actionsに渡して実行というのもできます

お好みでどうぞ！
それでは！