developersIO
Cloudflare PagesがAPIに対応したよ！ Webhookによるサイト更新を試してみる

Cloudflare PagesがAPIに対応したよ！ Webhookによるサイト更新を試してみる

FacebookHatena blogX
2021.06.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

静的サイトを簡単にホストでき、かつCloudflareの各種機能と組み合わせることができるCloudflare Pagesですが、先日API機能がリリースされました！

これまでCloudflare Pagesでは、Githubのリポジトリ更新のみをトリガーにして静的サイトのビルドを行っており、例えば「ヘッドレスCMS側で記事を編集したらサイトも更新」みたいな連携がなかなか難しいのが現状でした。

今回のアップデートでAPI機能による操作が解放され、Cloudflare Pagesがより一層便利になったので紹介します。

前提

  • Cloudflare Pagesで、ヘッドレスCMSのContentfulを使ったアプリをホストしている

ContentfulのWebhook作成

まずはContentful側で新規Webhookを作成しましょう。

ダッシュボードヘッダーの[Settings]から[Webhooks]に進み、[Add webhook]をクリックします。

Detailsの追加

[Name]はなんでも任意の名前でOKです。

[URL]は POST メソッドで、叩く先のCloudflare APIのURLは下記のような形式になります。

https://api.cloudflare.com/client/v4/accounts/{account_id}/pages/projects/{project_name}/deployments

{account_id} は、Cloudflareにログインした際のURLから取れます。

{project_name} は、Cloudflare Pagesのプロジェクト名を入れてください。

Triggers追加

公開、非公開、削除、アーカイブ、アーカイブ解除をトリガーにしておきます。

Headersの追加

Cloudflare APIの認証を通すため、リクエストヘッダに下記を追加します

  • [Add custom header]から X-Auth-Email : {自分のCloudflareのメールアドレス}
  • [Add secret header]から X-Auth-Key : {CLoudflreから取得できるAPIキー}
    • secret headerは値が隠れているものです。

X-Auth-Key ですが、Cloudflareのダッシュボードにログインして、[マイプロフィール]から[APIトークン]ページに遷移し、とりあえず Global API Keyの値を使います。

最終的にWebhookは下記のような感じになります。赤く囲った部分が必須な設定部分です。

ビルドのテスト

試しにContentfulから新規記事を投稿してみます。

Contentful側で記事の[Publish]を行います。

数分後にCloudflare Pages側を確認すると、デプロイが成功しているようです

ウェブサイト側をみると、記事がデプロイされていました。成功！

ビルドが行われない場合

ContentfulのWebhookでは、Activity logページでWebhookを叩いたステータスやレスポンスが確認できるのでみてみましょう。

Callが失敗している場合に可能性が高いのは、下記あたりかと思います。

  • POSTする先のCloudflareのビルド用URLを間違えている
    • → アカウントID、Pagesプロジェクト名が正しいか確認しましょう
  • Webhookのリクエストヘッダにセットした認証情報が間違っている
    • → CloudflareのAPIキーが正しくセットできているか確認しましょう
  • そもそもこのlogに残らない
    • → Contentful側でトリガーされていないので、トリガー設定を見直しましょう

最後に

以上、簡単にContentfulとCloudflare PagesのAPI連携ができました。

JamstackホスティングサービスではGatsby CloudやNext.jsのVercelなども勢いがありますが、Cloudflareはコア機能であるCDNや、WorkersやAccessなどの強力な機能を組み合わせて使えるところに大きな魅力があります。いずれにしろ各サービスが新機能ローンチを競い合っている今の状況はユーザーにとっては嬉しい限り。

個人的には今回のAPI機能リリースのように変にUIに拘らず、必要な機能をわかりやすく実装していくスタンスが好きです。

参考URL

https://blog.cloudflare.com/rollbacks-and-api-access-for-pages/

この記事をシェアする

FacebookHatena blogX