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
   

   View Slide

2. © 2023 Ateam Inc.
   自己紹介
   Who am I ?
   Name: Aiji Uejima
   Twitter: aiji42_dev
   Github: aiji42
   株式会社エイチームライフデザイン技術開発室所属
   リードエンジニア
   最近興味があるのはエッジランタイム。
   毎日プライベートでGithubに草生やしながら頑張ってます！
   2
   

   View Slide

3. © 2023 Ateam Inc.
   モチベーション
   VercelのISRをCloudflareでも実現したい
   3
   https://www.smashingmagazine.com/2021/04/incremental-static-regeneration-nextjs/
   

   View Slide

4. © 2023 Ateam Inc.
   SwR
   ISRのベースになっているのはstale-while-revalidate
   4
   https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control#stale-while-revalidate
   

   View Slide

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秒以上経ったら、キャッシュを使っていいけど裏で更新してね
   

   View Slide

6. © 2023 Ateam Inc.
   CF Workers と KV を使って
   エッジ上でキャッシュをコントロールする
   6
   

   View Slide

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 (※強整合ではない)
   

   View Slide

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
   

   View Slide

9. © 2023 Ateam Inc.
   実演
   9
   

   View Slide

10. © 2023 Ateam Inc.
    実演で使ったソースコードは
    githubにおいておきました!
    10
    https://github.com/aiji42/cloudflare-meetup-nagoya-1
    

    View Slide

11. © 2023 Ateam Inc.
    ワンポイントアドバイス
    KVのmetadataを使おう
    11
    KV は Key-Value だけでなく、任意のメータ情報を格納できる
    KVの有効期限 = キャッシュの有効期限 = max-age + SwR
    このTTLを超えるとキャッシュが破棄される
    格納時点の時間 + max-age を計算しメタ情報に格納
    取り出したときに取得時間と比較して、キャッシュが新鮮かどうかを判定する
    (新鮮でなければ、キャッシュを返却しつつバックグラウンドでキャッシュを更新する)
    

    View Slide

12. © 2023 Ateam Inc.
    ワンポイントアドバイス
    キャッシュの更新は waitUntil を使ってバックグラウンドで行おう
    12
    KVへのデータ格納はPromiseが返却されるので、本来はawaitで完了を待つ必要がある。
    しかし、そうするとその分のレイテンシが発生してしまう。
    waitUntilを使用すると、return後もPromiseが解消するまでバックグラウンドで生かし続けてくれる。
    

    View Slide

13. © 2023 Ateam Inc.
    おわり
    13
    

    View Slide