キャッシュAPIの使用

Cache APIを使用して、CloudflareのキャッシュにR2オブジェクトを保存します。

ノート

Cache APIを使用するには、カスタムドメインを接続するか、ルートを設定してWorkerに接続する必要があります。Cloudflare Workersダッシュボードエディタ、Playgroundプレビュー、および任意の*.workers.devデプロイメントでのCache API操作は影響を与えません。

export default {
  async fetch(request, env, context) {
    try {
      const url = new URL(request.url);

      // キャッシュURLからキャッシュキーを構築
      const cacheKey = new Request(url.toString(), request);
      const cache = caches.default;

      // 値がすでにキャッシュに存在するか確認
      // 存在しない場合は、R2から取得し、将来のアクセスのためにキャッシュに保存する必要があります
      let response = await cache.match(cacheKey);

      if (response) {
        console.log(`キャッシュヒット: ${request.url}.`);
        return response;
      }

      console.log(
        `リクエストURL: ${request.url}のレスポンスがキャッシュに存在しません。リクエストを取得してキャッシュします。`
      );

      // キャッシュにない場合は、R2から取得
      const objectKey = url.pathname.slice(1);
      const object = await env.MY_BUCKET.get(objectKey);
      if (object === null) {
        return new Response('オブジェクトが見つかりません', { status: 404 });
      }

      // 適切なオブジェクトヘッダーを設定
      const headers = new Headers();
      object.writeHttpMetadata(headers);
      headers.set('etag', object.httpEtag);

      // Cache APIはCache-Controlヘッダーを尊重します。s-max-ageを10に設定すると
      // レスポンスが最大10秒間キャッシュに保持されることを制限します
      // ここでレスポンスに加えた変更はキャッシュされた値に反映されます
      headers.append('Cache-Control', 's-maxage=10');

      response = new Response(object.body, {
        headers,
      });

      // 取得したレスポンスをcacheKeyとして保存
      // waitUntilを使用して、キャッシュへの書き込みをブロックせずにレスポンスを返すことができます
      context.waitUntil(cache.put(cacheKey, response.clone()));

      return response;
    } catch (e) {
      return new Response('エラーが発生しました: ' + e.message);
    }
  },
};