Contentful で記事を更新したら Cloudflare Pages に自動でデプロイする

Contentful で投稿したら即デプロイ

このブログは Astro で骨組みが作られており、記事などのコンテンツは Contentful で管理しています。
そのため、記事を更新したあとは Astro をビルドし、デプロイを行う作業が必要です。

記事を書く度に Cloudflare にログインしてデプロイし直して・・・とやるのはかなり面倒です。
できれば Contentful で Publish したらそのままこのブログをホスティングしている Cloudflare Pages に向かってデプロイを行ってほしいです。

Webhook

結論から言うと Contentful で Publish を起点として Webhook で Cloudflare Pages に対してリクエストをぶん投げるだけです。

Cloudflare Pages

API キーの発行

Global API Key を使うのでも良いですが、万が一キーが漏れても影響範囲が最小で済むように個別に API キーを発行することをおすすめします。

右上の人間アイコンから マイプロフィール -> APIトークン -> トークンを作成する と遷移します。

そしてカスタムトークンを作成してください。

次の設定は以下のようにして、その他はデフォルトにします。あ、トークン名は好きなものを設定してください。

これで次の進むとトークンの文字列が表示されるのでコピーしてメモしてください。

その他にメモするもの

• Account ID
  • Cloudflare Pages を開いて右側のペインの API -> Account ID の値をメモします
• Pages のプロジェクト名(デプロイ先)

Contentful

Webhook 設定

Cloudflare Pages 側の受け皿はできたので Contentful 側で Webhook を設定していきます。

対象の Space を開いて右上の Settings -> Webhooks を選びます。
そして Add Webhook を選択します。

Name は好きなものを設定してください。
URL は POST のまま以下のように入力します。
ここは各自異なってくるので、事前にメモしたアカウントIDとプロジェクト名を入れてください。

1
https://api.cloudflare.com/client/v4/accounts/${accountId}/pages/projects/${projectName}/deployments

Triggers は Select specific triggering events にします。
あらゆるイベントでデプロイが走っても嫌なので・・・

自分の場合はこんな感じで Entry が Publish/UnPublish/Delete されたときに発火するようにしています。

さらに Filters でブログ記事を投稿したときのみに限定しています。
タグなどを追加するたびにデプロイが走っても嫌なので、デプロイは記事を投稿したときのみに限定します。

タグを追加するときはだいたい記事を追加するときだと思うので・・・

タグを整理したときとかは記事を空デプロイとかする運用になりますが、無料枠使ってるので適当に節約します。

次に Headersも設定しましょう。

Add secret header でヘッダーを追加し、Key を Authorization、Value を Bearer ${APIkey} にします。 ${APIkey} はもちろん発行した値に変えてください。

以上で設定は完了なので Save を押して保存しましょう。
あとは記事を保存したりしたら勝手にデプロイが走るようになるはずです！

おまけ

これは Contentful の Webhook を経由しようとしまいと必要なことなのでおまけに書きますが、Cloudflare Pages でビルドを行うときに Contentful からデータをフェッチしてこないといけないので Cloudflare Pages 側で環境変数を設定するのを忘れないようにしましょうね。

おわり