← Cloudflare Workers / workers / configuration / sites

Начало с имеющегося

Workers Sites требует Wrangler ↗ : обязательно используйте последняя версия.

Чтобы развернуть уже существующий проект статического сайта, начните с готового сайта. Workers Sites работает со всеми генераторами статических сайтов, например:

• Hugo ↗
• Gatsby ↗, требует Node
• Jekyll ↗, требует Ruby
• Eleventy ↗, требует Node
• WordPress ↗ (см. руководство по развёртывание статических сайтов WordPress с помощью Pages)

1. Выполните wrangler init команду в корне каталога проекта, чтобы создать базовый Worker:

   wrangler init -y

   Эта команда добавляет и обновляет следующие файлы:

   • wrangler.jsonc: Файл, содержащий конфигурацию проекта.
   • package.json: Wrangler devDependencies добавлены.
   • tsconfig.json: Добавляется, если его еще нет, чтобы можно было писать Worker на TypeScript.
   • src/index.ts: Базовый Cloudflare Worker, написанный на TypeScript.

2. Добавьте каталог сборки/вывода своего сайта в файл Wrangler:

   {
     "site": {
       "bucket": "./public" // <-- Add your build directory name here.
     }
   }

   [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 следующим фрагментом кода:

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 {
			// Add logic to decide whether to serve an asset or run your original Worker code
			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}" not found`, {
				status: 404,
				statusText: "not found",
			});
		}
	},
};

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

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

async function handleEvent(event) {
	try {
		// Add logic to decide whether to serve an asset or run your original Worker code
		return await getAssetFromKV(event);
	} catch (e) {
		let pathname = new URL(event.request.url).pathname;
		return new Response(`"${pathname}" not found`, {
			status: 404,
			statusText: "not found",
		});
	}
}

5. Запустите wrangler dev или npx wrangler deploy чтобы предварительно просмотреть или развернуть ваш сайт на Cloudflare. Wrangler автоматически загрузит ресурсы, найденные в настроенном каталоге.

   npx wrangler deploy

6. Разверните ваш сайт в пользовательский домен который принадлежит вам и уже подключён как зона Cloudflare. Добавьте route свойство в файл Wrangler.

   {
     "route": "https://example.com/*"
   }

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

Подробнее о настройка вашего проекта.