当ブログではCloudflareのエッジキャッシュTTLを次のように設定しています。

html（パスが/で終わる）: 1日
画像やcss、jsなど: 14日

記事を追加したりコメントが投稿された時自動デプロイが走りますが、エッジキャッシュが残ったままだと更新内容が見えない可能性があります。ですので、Pagesのデプロイ終了時にエッジキャッシュをパージしたい。 Pagesのプロジェクト設定にありそうなものですが、調べた限りではそんな機能はなさそう？不思議です。

というわけでやり方がわかったのでその備忘録です。

ビルド後にエッジキャッシュパージ#

Pagesのビルドコマンドに&&でチェーンしてCFのAPIを叩くスクリプトを呼べばよい。

scripts/cf-purge.js#

<zone id>はCFのダッシュボードで調べる。
<API token>はCFのAPIトークン。必要な権限はゾーン-キャッシュパージ-パージ。

1
const api =
2
  'https://api.cloudflare.com/client/v4/zones/<zone id>/purge_cache'
3
const body = JSON.stringify({ purge_everything: true })
4
const res = await fetch(api, {
5
  method: 'POST',
6
  headers: {
7
    'Content-Type': 'application/json',
8
    Authorization: 'Bearer <API token>',
9
  },
10
  body: body,
11
})
12

13
res.ok
14
  ? console.log('Purged CF edge cache.\n')
15
  : console.error('Failed to purge CF edge cache.\n')

package.json#

スクリプトを追記。
ターミナルからpnpm cf-purgeでキャッシュパージできるようになるのも地味に使えるかも。

1
"scripts": {
2
    "cf-purge": "node scripts/cf-purge.js",
3
  },

Pagesのビルドコマンド変更#

ビルドコマンドを変更する。

1
pnpm build && pnpm cf-purge

これでビルド終了時にエッジキャッシュがパージされるようになる。
だが正直Pagesの設定として公式に用意してほしい…

おまけ　“デプロイ後”にエッジキャッシュパージ#

少し面倒だがGitHub Actionsを組み合わせれば一応可能。

.github/workflows/cf-purge.yml#

CF Pagesのデプロイを待つアクションが公開されているので使わせてもらう。

WalshyDev

cf-pages-await

Waiting for api.github.com...

00K

Waiting...

レポジトリのActions secretsに’CF_API_TOKEN’を作成しCFのAPIトークンを入れておく。 <account ID><zone id>はCFのダッシュボードで調べて入力。<project>はPagesのプロジェクト名。

1
name: Purge CF Cache
2
on:
3
  repository_dispatch:
4
    types: [cf-pages-deploy]
5

6
jobs:
7
  build:
8
    runs-on: ubuntu-latest
9
    permissions:
10
      contents: read
11
      deployments: write
12
    steps:
13
    - name: Await CF Pages
14
      uses: WalshyDev/[email protected]
15
      with:
16
        apiToken: ${{ secrets.CF_API_TOKEN  }}
17
        accountId: '<account id>'
18
        project: '<project>'
19
        githubToken: ${{ secrets.GITHUB_TOKEN }}
20
    - run: |
21
        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イベントを発火させればよい。その方法は省略。