Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

AijiUejima

March 28, 2023
Tweet

More Decks by AijiUejima

Other Decks in Technology

Transcript

  1. © 2023 Ateam Inc.
    Cloudflare Workers と KV で
    キャッシュを非同期に更新する
    Cloudflare Meetup Nagoya

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size 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 full-size slide

  9. © 2023 Ateam Inc.
    実演
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. © 2023 Ateam Inc.
    おわり
    13

    View full-size slide