跳转到内容
搜索文档

从现有项目开始

最后更新 查看 MarkdownAgent 设置

Workers Sites 需要 Wrangler — 请确保使用最新版本

要部署预生成的静态站点项目,请从预生成的站点开始。Workers Sites 适用于所有静态站点生成器,例如:

快速入门

  1. 在项目根目录运行 wrangler init 命令以生成基本 Worker:

    wrangler init -y

    此命令添加/更新以下文件:

    • wrangler.jsonc:包含项目配置的文件。
    • package.json:添加 Wrangler devDependencies
    • tsconfig.json:如果尚不存在则添加,以支持用 TypeScript 编写 Worker。
    • src/index.ts:用 TypeScript 编写的基本 Cloudflare Worker。
  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",
		});
	}
}
  1. 运行 wrangler devnpx wrangler deploy 在 Cloudflare 上预览或部署站点。 Wrangler 会自动上传配置目录中找到的资源。

    npx wrangler deploy
  2. 将站点部署到您拥有且已作为 Cloudflare zone 附加的自定义域名。向 Wrangler 文件添加 route 属性。

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

了解配置项目的更多信息。

这篇文档对您有帮助吗?