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

Cloudflare Workersで動的コンテンツをキャッシュする際の新たな選択肢

Cloudflare Workersで動的コンテンツをキャッシュする際の新たな選択肢

yoshitaka KOITABASHI

August 24, 2023
Tweet

More Decks by yoshitaka KOITABASHI

Other Decks in Technology

Transcript

  1. Cloudflare Workersで動的コンテンツを
    キャッシュする際の新たな選択肢
    KOITABASHI Yoshitaka
    2023/8/24 yoshii0110 1

    View full-size slide

  2. 2023/8/24 yoshii0110 2
    KOITABASHI Yoshitaka
    @yoshii0110
    Momento - community advocate
    KDDIアジャイル開発センター – software engineer
    Amazon EC2, AWS Fargate, AWS App Runner
    🥷
    🏢
    💕

    View full-size slide

  3. 静的コンテンツと動的コンテンツ
    • 静的なコンテンツを配信するwebページ
    ユーザが毎回閲覧する度に表示内容が変わらず同じものが配信
    よくあるLPや個人ブログなども静的なコンテンツとして取り扱ってそう
    コンテンツ例: HTMLファイルや画像など
    • 動的なコンテンツを配信するwebページ
    あるページへアクセスするタイミング、ページの位置、デバイスなどの
    ユーザ固有の要因に基づいて変化するコンテンツを配信
    技術記事プラットフォームなど、大量のユーザが記事を公開/閲覧を
    行うサービスなどが該当
    2023/8/24 yoshii0110 3

    View full-size slide

  4. モダンなフロントエンドのページレンダリング
    • Reactive Web Application
    • Client Side Rendering (CSR)
    => CSRでできたアプリが、Sigle Page Application (SPA) – React, Vue,
    Angular とかとか
    • Server Side Rendering (SSR)
    – Next, Nuxt とかとか
    • Static Site Generator (SSG)
    Jamstackな仕組み, Gatsby, Hugo, Next, Nuxt とかとか
    • Incremental Static Regeneration (ISR)
    – Next (9.4で追加された機能)
    2023/8/24 yoshii0110 4

    View full-size slide

  5. SSR (Server Side Rendering)
    • リクエストに対して動的に生成されたHTMLを返却
    • JavaScript、仮想DOMなどをサーバーサイドでも利用
    • デメリットは、サーバーサイドの重さです。
    API通信などを利用すると、レスポンスに時間がかかる
    2023/8/24 yoshii0110 5

    View full-size slide

  6. SSG (Static Site Generator)
    • リクエストに対して事前に生成されたHTMLを返却
    • SSGではビルド時にHTMLを生成
    • 配信は非常に高速だが、デプロイ後はページ内容を動的に変更できない
    2023/8/24 yoshii0110 6

    View full-size slide

  7. ISR (Incremental Static Regeneration)
    • リクエストに対して静的にビルドされたページを返す。
    • 有効期限を超えたら非同期で静的ページの再生成をSSRで行う。
    • キャッシュを活用しつつ、静的ページの更新を自動的に行え、一定時間後再度
    リクエストがあった場合、次回以降の内容をビルドするので内容が更新される。
    2023/8/24 yoshii0110 7

    View full-size slide

  8. 静的コンテンツのキャッシュ
    • 例えば、SSGで作成されたHTML, CSS, JS 画像などの
    静的コンテンツを返却する応答時間を短くしたい場合に考える
    キャッシュ戦略として CDN(content delivery network)
    を使用する方法があります。
    • CDNは、オリジンサーバーへのアクセス集中を防ぎ、地理的に
    近いエッジロケーション(エッジサーバー)に誘導するイメージ。
    • エッジロケーションは世界中に配置されており、
    パブリッククラウドのリージョンにあるデータセンターよりも分散的に
    より多く設置されている。
    2023/8/24 yoshii0110 8

    View full-size slide

  9. CDNの標準的な使われ方
    • よくあるのは、エッジロケーションはユーザーからの
    アクセスがあると、オリジンサーバを参照して次回以降の
    アクセスのためにコンテンツをキャッシュします。
    • 次回以降のアクセスでは、キャッシュしたコンテンツを
    ユーザーに配信する
    2023/8/24 yoshii0110 9

    View full-size slide

  10. モダンなWebアプリケーションとCDN
    • 近年だと、先ほど紹介したページレンダリングの仕組みが
    たくさんある中で、ブラウザ側のjavascriptが行う仕事が増え、
    jsファイルのサイズも大きくなってきています。
    • SSGを使ったとしても、サイズが大きくなったHTML、javascriptをよ
    りユーザに早く届ける時にCDNが重要です。
    • 最近だとCDNを意識しないで使えるサービスもあります。
    • Vercel
    • AWS Amplify
    2023/8/24 yoshii0110 10

    View full-size slide

  11. 動的コンテンツのキャッシュ
    • 例えば、SSR/ISRの様にその時々でアクセスする度にコンテンツが
    変わったり、webアプリ上のコンテンツを何かしらのスクリプトや
    トリガーによって変更が走り生成されるパターンがあったりします。
    • 動的コンテンツの配信について、ユーザへの応答時間を短縮するには、
    ユーザにより遠くにあるオリジンサーバへ毎回アクセスするのではなく、
    CDN上でスクリプトが実行できると嬉しいですよね?
    • これによって、動的コンテンツは”キャッシュされる“ので、クライアント
    からのリクエストへの応答時間が短縮され、動的コンテンツを扱う
    webアプリケーションが高速化されます。
    2023/8/24 yoshii0110 11

    View full-size slide

  12. CDNのエッジサーバでアプリケーション実行
    • 近年だとCDNのエッジ上でjavascriptなどが実行できるサービスに人気が出てま
    す。
    • なぜ、そんな話をしているのかというと、エッジでアプリケーションが実行できると、
    動的コンテンツのキャッシュに作用してくるからです。
    • ユーザ起因のイベント、web サーバ起因のイベントなどを基に動的コンテンツを生
    成してクライアントに提供したり、静的コンテンツを変更、キャッシュの操作ができ
    る様になります。
    • Cloudflare Workers
    • Vercel Edge Functions
    • AWS CloudFront Functions
    • AWS Lambda@Edge
    2023/8/24 yoshii0110 12
    引用: https://blog.cloudflare.com/eliminating-cold-starts-with-cloudflare-workers/

    View full-size slide

  13. 今回実現したいこと
    • Stale-While-Revalidate から着想された
    @yusukebe さんの “Dynamic Content Storing” を踏襲する
    • これをhonoとCloudflare Workers、momento cacheを利用して
    実装していく
    2023/8/24 yoshii0110 13
    https://yusukebe.com/posts/2022/dcs/
    https://datatracker.ietf.org/doc/html/rfc5861

    View full-size slide

  14. キャッシュ戦略: Stale-While-Revalidate
    • web ではキャッシュの制御にHTTPヘッダを用いてブラウザやプロキシを
    コントロールする。
    • Stale-While-Revalidate は、そんなヘッダでキャッシュ制御する仕組みです。
    • よくキャッシュの指定でCache-Control,Expires,Etag,Last-Modifiedなどの
    ものを利用すると思う。
    • Stale-While-Revalidateを利用すると動きとして、コンテンツは
    キャッシュから表示するが、裏で非同期にキャッシュを更新しておく
    ような動きになります。
    2023/8/24 yoshii0110 14
    https://docs.fastly.com/ja/guides/serving-stale-content
    https://datatracker.ietf.org/doc/html/rfc5861

    View full-size slide

  15. Stale-While-Revalidateのフロー
    2023/8/24 yoshii0110 15
    https://blog.jxck.io/entries/2016-04-16/stale-while-revalidate.html
    従来: max-age Stale-While-Revalidate

    View full-size slide

  16. Cloudflare Workers / honoとは?
    • Cloudflare Workers
    • Cloudflareのサーバレスサービス
    • AWS Lambda や Google Cloud Functions などとは異なり、
    CDNのエッジサーバーでコードを実行する
    • V8エンジンのisolateを使い、各リクエストに対して独立した実行環境を提供
    • hono
    • エッジ用に開発された小さく、シンプルかつ超高速な Web フレームワーク
    • repo: https://github.com/honojs/hono
    • docs: https://hono.dev/
    2023/8/24 yoshii0110 16

    View full-size slide

  17. Momento とは?
    • Momento とは、アプリケーションエンジニアにとって快適な世界を
    作っていき、彼らによって生み出されたサービスをより早く、
    よりセキュアに、より安定的に送り出す仕組みを提供する
    サーバレスサービスです。
    • 機能として、現時点だと3つ
    ①: momento Cache
    ②: momento Topics (Pub/Sub)
    ③: momento Vector Index (AI / ML)
    2023/8/24 yoshii0110 17
    https://www.gomomento.com/

    View full-size slide

  18. Momento chache を利用したキャッシュ戦略
    2023/8/24 yoshii0110 18

    View full-size slide

  19. Momento cache のシンプルさ
    2023/8/24 yoshii0110 19

    View full-size slide

  20. Momento chache を利用したキャッシュ戦略
    – 基本の動作シーケンス図
    2023/8/24 yoshii0110 20
    ①: ユーザがあるwebページを
    見たときに、Cloudflare workers
    はoriginではなく、momento
    cacheから動的コンテンツを取得
    ②: momento cacheにコンテンツの
    キャッシュがなければ、originへ
    fetchする

    View full-size slide

  21. Momento chache を利用したキャッシュ戦略
    – キャッシュ細かい流れに注目したシーケンス図
    2023/8/24 yoshii0110 21
    前提として、momento cacheには
    同じ動的コンテンツが2つキャッシュされている
    "fresh", "stale"というプレフィックスをつけたkeyで
    同じレスポンスをキャッシュする “stale”の方のttlを
    長めに設定
    ①: まずは"fresh"というプレフィックスの
    keyでキャッシュしたvalueを返却
    ②: "fresh"のキャッシュのTTLが切れたら、
    "stale" の キャッシュを返し、
    “fresh”はfetchし直したキャッシュと入れ替える

    View full-size slide

  22. 検証
    2023/8/24 yoshii0110 22
    TTLが切れていてもStaleが存在すれば fetchが実行され、
    その後キャッシュする動きが見て取れる
    検証repo: https://github.com/Yoshiitaka/momento-cloudflare-swr

    View full-size slide

  23. キャッシュヒットとミスなどのメトリクスをコンソールより確認
    2023/8/24 yoshii0110 23

    View full-size slide

  24. Momento とCloudflareとの統合
    • ブログ: https://www.gomomento.com/blog/momento-cache-is-now-accessible-at-
    the-edge
    • 公式ドキュメント: https://docs.momentohq.com/ja/develop/api-reference/http-api
    • 公式ドキュメント: https://docs.momentohq.com/ja/develop/integrations/cloudflare
    • サンプルコード: https://github.com/momentohq/client-sdk-
    javascript/tree/main/examples/cloudflare-workers
    2023/8/24 yoshii0110 24

    View full-size slide

  25. 他のキャッシュとしての選択肢
    • Cache API
    • KVストア
    • Upstash
    • etc…
    2023/8/24 yoshii0110 25

    View full-size slide