Workerから始める

Cloudflare Pages

Use Cloudflare Pages for hosting full-stack applications instead of Workers Sites. Do not use Workers Sites for new projects.

Workers SitesはWrangler ↗を必要とします — 最新バージョンを使用していることを確認してください。

既存のWorkerプロジェクトがある場合、Workers Sitesを使用してWorkerに静的アセットを提供できます。

始め方

1. プロジェクトのルートにアセットを含むディレクトリを作成します（例: ./public）

2. wrangler.tomlファイルにそのディレクトリを指す設定を追加します。

   [site]
   bucket = "./public" # 静的アセットを含むディレクトリを追加してください！

3. プロジェクトに@cloudflare/kv-asset-handlerパッケージをインストールします：

   npm i -D @cloudflare/kv-asset-handler

4. WorkerのエントリポイントにgetAssetFromKV()関数をインポートし、静的アセットで応答するために使用します。

モジュールWorker

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";
import manifestJSON from "__STATIC_CONTENT_MANIFEST";
const assetManifest = JSON.parse(manifestJSON);

export default {
  async fetch(request, env, ctx) {
    try {
      // アセットを提供するか、元のWorkerコードを実行するかを決定するロジックを追加します
      return await getAssetFromKV(
        {
          request,
          waitUntil: ctx.waitUntil.bind(ctx),
        },
        {
          ASSET_NAMESPACE: env.__STATIC_CONTENT,
          ASSET_MANIFEST: assetManifest,
        },
      );
    } catch (e) {
      let pathname = new URL(request.url).pathname;
      return new Response(`"${pathname}" が見つかりません`, {
        status: 404,
        statusText: "見つかりません",
      });
    }
  },
};

サービスWorker

import { getAssetFromKV } from "@cloudflare/kv-asset-handler";

addEventListener("fetch", (event) => {
  event.respondWith(handleEvent(event));
});

async function handleEvent(event) {
  try {
    // アセットを提供するか、元のWorkerコードを実行するかを決定するロジックを追加します
    return await getAssetFromKV(event);
  } catch (e) {
    let pathname = new URL(event.request.url).pathname;
    return new Response(`"${pathname}" が見つかりません`, {
      status: 404,
      statusText: "見つかりません",
    });
  }
}

getAssetFromKV()の設定可能なオプションに関する詳細はkv-asset-handlerのドキュメント ↗を参照してください。

5. 通常通りにwrangler deployまたはnpx wrangler deployを実行します。Wranglerは設定されたディレクトリ内のアセットを自動的にアップロードします。

   npx wrangler deploy