既存のものから始める

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 ↗ が必要です — 最新バージョンを使用してください。

既存の静的サイトプロジェクトをデプロイするには、事前に生成されたサイトから始めます。Workers Sites はすべての静的サイトジェネレーターと連携します。例えば：

• Hugo ↗
• Gatsby ↗、Nodeが必要
• Jekyll ↗、Rubyが必要
• Eleventy ↗、Nodeが必要
• WordPress ↗（Pagesを使用した静的WordPressサイトのデプロイに関するチュートリアルを参照）

始め方

1. プロジェクトのディレクトリのルートで wrangler init コマンドを実行して、基本的なWorkerを生成します：

   wrangler init -y

   このコマンドは以下のファイルを追加/更新します：

   • wrangler.toml: プロジェクト設定を含むファイル。
   • package.json: WranglerのdevDependenciesが追加されます。
   • tsconfig.json: TypeScriptでWorkerを書くために、まだ存在しない場合は追加されます。
   • src/index.ts: TypeScriptで書かれた基本的なCloudflare Worker。

2. サイトのビルド/出力ディレクトリを wrangler.toml ファイルに追加します：

   [site]
   bucket = "./public" # <-- ここにビルドディレクトリ名を追加します。

   最も人気のある静的サイトジェネレーターのデフォルトディレクトリは以下の通りです：

   • Hugo: public
   • Gatsby: public
   • Jekyll: _site
   • Eleventy: _site

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

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

4. src/index.ts の内容を以下のコードスニペットに置き換えます：

モジュール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: "見つかりません",
    });
  }
}

5. wrangler dev または npx wrangler deploy を実行して、Cloudflare上でサイトをプレビューまたはデプロイします。 Wranglerは、設定されたディレクトリ内のアセットを自動的にアップロードします。

   npx wrangler deploy

6. 所有していて、すでにCloudflareゾーンとして接続されている カスタムドメイン にサイトをデプロイします。 wrangler.toml ファイルに route プロパティを追加します。

   route = "https://example.com/*"

   ノート

   route を適切に設定するための ルートに関するドキュメントを参照してください。

プロジェクトの設定についてさらに学びましょう。