Workers Sites 需要 Wrangler ↗ — 请确保使用最新版本。
如果你已有 Worker 项目,可以使用 Workers Sites 向 Worker 提供静态资源。
-
在项目根目录创建一个用于存放资源的目录(例如
./public) -
在 Wrangler 配置文件中添加指向该目录的配置。
{ "site": { "bucket": "./public" // Add the directory with your static assets! } }[site] bucket = "./public" -
在项目中安装
@cloudflare/kv-asset-handler包:npm i -D @cloudflare/kv-asset-handler -
将
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 文档 ↗。
-
像平常一样运行
wrangler deploy或npx wrangler deploy部署 Worker 项目。 Wrangler 会自动上传配置目录中找到的资源。npx wrangler deploy