当ブログではCloudflareのエッジキャッシュTTLを次のように設定しています。
- html(パスが/で終わる): 1日
- 画像やcss、jsなど: 14日
記事を追加したりコメントが投稿された時自動デプロイが走りますが、エッジキャッシュが残ったままだと更新内容が見えない可能性があります。 ですので、Pagesのデプロイ終了時にエッジキャッシュをパージしたい。 Pagesのプロジェクト設定にありそうなものですが、調べた限りではそんな機能はなさそう?不思議です。
というわけでやり方がわかったのでその備忘録です。
ビルド後にエッジキャッシュパージ
Pagesのビルドコマンドに&&でチェーンしてCFのAPIを叩くスクリプトを呼べばよい。
scripts/cf-purge.js
<zone id>はCFのダッシュボードで調べる。
<API token>はCFのAPIトークン。必要な権限はゾーン-キャッシュパージ-パージ。
const api = 'https://api.cloudflare.com/client/v4/zones/<zone id>/purge_cache'const body = JSON.stringify({ purge_everything: true })const res = await fetch(api, { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer <API token>', }, body: body,})
res.ok ? console.log('Purged CF edge cache.\n') : console.error('Failed to purge CF edge cache.\n')
package.json
スクリプトを追記。
ターミナルからpnpm cf-purgeでキャッシュパージできるようになるのも地味に使えるかも。
"scripts": { "cf-purge": "node scripts/cf-purge.js", },
Pagesのビルドコマンド変更
ビルドコマンドを変更する。
pnpm build && pnpm cf-purge
これでビルド終了時にエッジキャッシュがパージされるようになる。
だが正直Pagesの設定として公式に用意してほしい…
おまけ “デプロイ後”にエッジキャッシュパージ
少し面倒だがGitHub Actionsを組み合わせれば一応可能。
.github/workflows/cf-purge.yml
CF Pagesのデプロイを待つアクションが公開されているので使わせてもらう。
レポジトリのActions secretsに’CF_API_TOKEN’を作成しCFのAPIトークンを入れておく。 <account ID><zone id>はCFのダッシュボードで調べて入力。<project>はPagesのプロジェクト名。
name: Purge CF Cacheon: repository_dispatch: types: [cf-pages-deploy]
jobs: build: runs-on: ubuntu-latest permissions: contents: read deployments: write steps: - name: Await CF Pages with: apiToken: ${{ secrets.CF_API_TOKEN }} accountId: '<account id>' project: '<project>' githubToken: ${{ secrets.GITHUB_TOKEN }} - run: | curl -X POST "https://api.cloudflare.com/client/v4/zones/<zone id>/purge_cache" -H "Authorization: Bearer <CF-API-TOKEN>" -H "Content-Type: application/json" --data '{"purge_everything":true}'
あとはcf-purge.jsと同じように、GitHub APIのhttps://api.github.com/repos/{owner}/{repo}/dispatches からcf-pages-deployイベントを発火させればよい。その方法は省略。
No comments yet.