Cloudflare WorkersとKVで キャッシュを非同期に更新する | Cloudflare Meetup Nagoya

2023/03/28 Cloudflare Meetup Nagoya Kick Off! で発表したLT資料です。
https://cfm-cts.connpass.com/event/275121/

Transcript

1. © 2023 Ateam Inc. Cloudflare Workers と KV で キャッシュを非同期に更新する Cloudflare Meetup Nagoya
2. © 2023 Ateam Inc. 自己紹介 Who am I ? Name: Aiji Uejima Twitter: aiji42_dev Github: aiji42 株式会社エイチームライフデザイン技術開発室所属 リードエンジニア 最近興味があるのはエッジランタイム。 毎日プライベートでGithubに草生やしながら頑張ってます！ 2
3. © 2023 Ateam Inc. モチベーション VercelのISRをCloudflareでも実現したい 3 https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/
4. © 2023 Ateam Inc. SwR ISRのベースになっているのはstale-while-revalidate 4 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate
5. © 2023 Ateam Inc. SwR Cache-Control: max-age=x, stale-while-revalidate=x 5 t max-age stale-while-revalidate max-age以内はキャッシュは新鮮 max-age以降、SwR以内はキャッシュは古い ただし再検証(キャッシュの更新)中は使っても良い Cache Cache-Control: max-age=60, stale-while-revalidate=120 なら... - 60 + 120 = 180秒間はキャッシュを使っていいよ - でも60秒以上経ったら、キャッシュを使っていいけど裏で更新してね
6. © 2023 Ateam Inc. CF Workers と KV を使って エッジ上でキャッシュをコントロールする 6
7. © 2023 Ateam Inc. Cloudflare Workers と KV 7 Cloudflare Workers - Cloudflareの各データセンターに配置されたエッジコンピューティング - 日本国内だけでも4つのロケーションがある - オリジンのリソースにプロキシすることも、単独でレスポンスを返すことも可能(Edge as Origin) - Javascriptで記述が可能 - コールドスタートのレイテンシが殆どないのが特徴 (https://blog.cloudflare.com/eliminating-cold-starts- with-cloudflare-workers/) Cloudflare Workers KV - Cloudflare Workers で利用するための Key-Value ストア - 書き込み頻度は低いが、高速かつ頻繁に読み出すデータに最適 - 変更が世界中のDCに伝搬するのに最大60s (※強整合ではない)
8. © 2023 Ateam Inc. 8 Cloudflare Workers と KV を使ったキャッシュの非同期更新機構 max-age SwR max-age SwR Cache-Control: max-age=60, stale- while-revalidate=60 Cache-Control: max-age=60, stale- while-revalidate=60 KVにキャッシュを保存 キャッシュを更新 + KV
9. © 2023 Ateam Inc. 実演 9
10. © 2023 Ateam Inc. 実演で使ったソースコードは githubにおいておきました! 10 https://github.com/aiji42/cloudflare-meetup-nagoya-1
11. © 2023 Ateam Inc. ワンポイントアドバイス KVのmetadataを使おう 11 KV は Key-Value だけでなく、任意のメータ情報を格納できる KVの有効期限 = キャッシュの有効期限 = max-age + SwR このTTLを超えるとキャッシュが破棄される 格納時点の時間 + max-age を計算しメタ情報に格納 取り出したときに取得時間と比較して、キャッシュが新鮮かどうかを判定する (新鮮でなければ、キャッシュを返却しつつバックグラウンドでキャッシュを更新する)
12. © 2023 Ateam Inc. ワンポイントアドバイス キャッシュの更新は waitUntil を使ってバックグラウンドで行おう 12 KVへのデータ格納はPromiseが返却されるので、本来はawaitで完了を待つ必要がある。 しかし、そうするとその分のレイテンシが発生してしまう。 waitUntilを使用すると、return後もPromiseが解消するまでバックグラウンドで生かし続けてくれる。
13. © 2023 Ateam Inc. おわり 13