Cloudflare Workers でキャッシュ層を作る

公開日: 2025-02-23

画像サーバーの前段に Cloudflare Workers でキャッシュ層を作ったら転送量が大幅に減ったので記録です。

やったこと

以下のコードで Workers を作りカスタムドメインを当てる
ソースコードの URL を Workers に割り当てたドメインに変更する

export default {
  async fetch(request, env, ctx) {
    // 1) リクエストURLを解析
    const url = new URL(request.url)

    // 書き換え元・書き換え先のドメイン
    const domain = 'workers.example.com' // Workers に割り当てるドメイン
    const mirror = 'origin.example.com' // 本来の画像サーバーのドメイン

    // 2) ドメインが一致する場合は書き換え
    if (url.hostname === domain) {
      url.hostname = mirror
    }

    // 3) キャッシュキーとして使うために、新しい Request オブジェクトを作成
    const cacheKey = new Request(url.toString(), {
      method: request.method,
      headers: request.headers,
      body: request.body,
      redirect: request.redirect,
      // POST / PUT などでボディがある場合はストリームを読み込み済みにする必要があるため注意。
      // ここではGETリクエスト想定で簡単に記述しています。
    })

    // 4) デフォルトキャッシュから取得を試みる
    const cache = caches.default
    let response = await cache.match(cacheKey)

    // 5) キャッシュに無ければ fetch
    if (!response) {
      response = await fetch(cacheKey)

      // 6) レスポンスがOKならキャッシュに put する
      if (response.ok) {
        // 非同期タスクとしてキャッシュ処理をバックグラウンド実行
        ctx.waitUntil(cache.put(cacheKey, response.clone()))
      }
    }

    // 7) レスポンスを返却
    return response
  },
}