Cache APIを世代で無効化する

Cloudflare WorkersのCache APIとDurable Objectを、つかって古いキャッシュを即座に無効化する取り組みを紹介します

Transcript

1. を世代で 無効化する Cloudflare Workers 実践 LT Cache API でキャッシュ世代を管理した話 Durable Object 2026.09.24 フロントエンドエンジニア nyamadan Web 1
2. 自己紹介 nyamadan. Web フロントエンドエンジニア が好きです 仕事ではGoogle CloudやNext.jsを使っています 3D 2
3. 今日話すこと キャッシュのバージョン管理 キャッシュは消さない 番号を変えて 参照するキャッシュを切り替えた 番号はDurable Objectで管理 キャッシュのバージョン管理に Durable Objectを使った 3
4. プロダクト 4
5. 作っているもの リーダー AI RSS 取得 1. と で を定期更新 Queue Cron RSS 要約 2. で記事を3行に整理 Workers AI 3. 閲覧 から記事一覧を読み出す D1 5
6. 技術スタック 主なライブラリとツール ／ HonoX Hono nanostores Vite アプリ Web クライアント状態 ビルド Tailwind CSS スタイル Zod 入力検証 Vitest テスト 6
7. 品質 も高スコア Lighthouse 7
8. キャッシュ 8
9. 前提 キャッシュが効きやすい 数時間 の定期更新間隔 RSS 更新の間は同じ読み取りが続くため Cache APIによく当たる 9
10. 課題 更新後は古い値を返したくない 更新 記事は へ保存済み D1 利用者は新しい一覧を期待している。 → 古い キャッシュが応答 更新できたのか利用者には分からない。 10
11. 仕組み 11
12. キャッシュの流れ 1 初回アクセス をキーに加えてキャッシュを作る 12 から番号を取得 1 Durable Object 2 Cache API 3 D1 4 12 を確認 v2-12 MISS から記事一覧を読む 最新の一覧を取得 結果をCache APIへ保存 v2-12 12
13. キャッシュの流れ 2 回目のアクセス 2 同じ12を使うためキャッシュに当たる から番号を取得 1 Durable Object 2 Cache API v2-12 HIT 3 キャッシュから応答 D1 を確認 12 は読まない 13
14. キャッシュの流れ 3 フィード更新 へ保存してから番号を13へ進める D1 1 新しい記事をD1へ保存 2 Durable Object 3 古いキャッシュは残す と の番号を進める 先にデータを更新 12 → 13 v2-12 は別更新。番号の更新完了までは旧世代が読まれ得る D1 Durable Object 14
15. キャッシュの流れ 4 更新後の初回アクセス の更新成功後、13のキャッシュを新しく作る Durable Object から番号を取得 1 Durable Object 2 Cache API 3 D1 4 13 を確認 v2-13 MISS から記事一覧を読む 更新後の一覧を取得 結果をCache APIへ保存 v2-13 15
16. キャッシュの流れ 5 次のアクセス 同じ13を使うため新しいキャッシュに当たる から番号を取得 1 Durable Object 2 Cache API v2-13 HIT 3 新しいキャッシュから応答 D1 を確認 13 は読まない 16
17. 選び方 を選ぶなら Durable Object 世代更新後の読み取りを 新しいキーへそろえたい 世代を順序づける つのObjectが更新を調停 1 配置先への往復がある 遠い場所からは遅延が増える可能性 17
18. まとめ 番号を進めて参照先を切り替える へ保存 D1 新しい記事を先に書き込む → で番号を進 める Durable Object キャッシュの世代を12から13へ → 新しいキーで読む 新しい番号の取得後は旧世代を参照し ない 古いキャッシュは削除せず期限切れに任せる 18
19. 余談 19
20. もう一つの方法 とは Cache-Tag タグを付ける Cache-Tag: feed → する purge へタグを指定 Cloudflare API → 次はMISS 関連キャッシュをまとめて無効化 20
21. 余談 を選ぶなら Cache-Tag 関連するキャッシュを まとめて消したい 通常のGETはそのまま への追加の往復は不要 Durable Object の タグ単位で無効化 一致するキャッシュをグローバルにpurge は、削除完了ではなく要求の受理を示す purge API HTTP 200 21