跳转到内容
搜索文档

从 Worker 开始

最后更新 查看 MarkdownAgent 设置

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

如果你已有 Worker 项目,可以使用 Workers Sites 向 Worker 提供静态资源。

快速入门

  1. 在项目根目录创建一个用于存放资源的目录(例如 ./public

  2. 在 Wrangler 配置文件中添加指向该目录的配置。

    {
      "site": {
        "bucket": "./public" // Add the directory with your static assets!
      }
    }
    [site]
    bucket = "./public"
  3. 在项目中安装 @cloudflare/kv-asset-handler 包:

    npm i -D @cloudflare/kv-asset-handler
  4. 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 {
			// 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",
		});
	}
}

有关 getAssetFromKV() 可配置选项的更多信息,请参阅 kv-asset-handler 文档

  1. 像平常一样运行 wrangler deploynpx wrangler deploy 部署 Worker 项目。 Wrangler 会自动上传配置目录中找到的资源。

    npx wrangler deploy

这篇文档对您有帮助吗?