SvelteKit构建和部署

Cloudflare Pages

要部署到 Cloudflare Pages，请使用 adapter-cloudflare。

当您使用 adapter-auto 时，默认情况下会安装此适配器。如果您计划继续使用 Cloudflare Pages，您可以从 adapter-auto 切换到直接使用此适配器，以便在本地开发期间模拟特定于 Cloudflare Workers 的值，自动应用类型声明，并提供设置 Cloudflare 特定选项的功能。

比较

adapter-cloudflare – 支持所有 SvelteKit 功能；为 Cloudflare Pages 构建
adapter-cloudflare-workers – 支持所有 SvelteKit 功能；为 Cloudflare Workers 构建
adapter-static – 仅生成客户端静态资产；与 Cloudflare Pages 兼容

用法

使用 npm i -D @sveltejs/adapter-cloudflare 安装，然后将适配器添加到您的 svelte.config.js

svelte.config

import import adapteradapter from '@sveltejs/adapter-cloudflare';

export default {
	kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			// See below for an explanation of these options
			routes: {
    include: string[];
    exclude: string[];
}routes: {
				include: string[]include: ['/*'],
				exclude: string[]exclude: ['<all>']
			},
			platformProxy: {
    configPath: string;
    environment: undefined;
    experimentalJsonConfig: boolean;
    persist: boolean;
}platformProxy: {
				configPath: stringconfigPath: 'wrangler.toml',
				environment: undefinedenvironment: var undefinedundefined,
				experimentalJsonConfig: booleanexperimentalJsonConfig: false,
				persist: booleanpersist: false
			}
		})
	}
};

选项

路由

允许您自定义 adapter-cloudflare 生成的 _routes.json 文件。

include 定义将调用函数的路由，默认为 ['/*']
exclude 定义**不会**调用函数的路由 - 这是服务应用静态资产更快、更便宜的方式。此数组可以包含以下特殊值
- <build> 包含您的应用构建工件（Vite 生成的文件）
- <files> 包含您的 static 目录的内容
- <prerendered> 包含预渲染页面的列表
- <all>（默认值）包含以上所有内容

您可以组合多达 100 个 include 和 exclude 规则。通常您可以省略 routes 选项，但如果（例如）您的 <prerendered> 路径超过此限制，您可能会发现手动创建一个包含 '/articles/*' 而不是自动生成的 ['/articles/foo', '/articles/bar', '/articles/baz', ...] 的 exclude 列表很有用。

platformProxy

模拟 platform.env 本地绑定的首选项。有关选项的完整列表，请参阅 getPlatformProxy Wrangler API 文档。

部署

请按照 Cloudflare Pages 入门指南开始。

配置项目设置时，必须使用以下设置

框架预设 – SvelteKit
构建命令 – npm run build 或 vite build
构建输出目录 – .svelte-kit/cloudflare

运行时 API

env 对象包含项目的绑定，包括 KV/DO 命名空间等。它通过 platform 属性传递给 SvelteKit，以及 context、caches 和 cf，这意味着您可以在钩子和端点中访问它

export async function function POST({ request, platform }: {
    request: any;
    platform: any;
}): Promise<void>POST({ request, platform }) {

	const const x: anyx = platform: anyplatform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

SvelteKit 的内置 $env 模块应优先用于环境变量。

要包含绑定类型声明，请在您的 src/app.d.ts 中引用它们

src/app.d

import { interface KVNamespace<Key extends string = string>KVNamespace, interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace } from '@cloudflare/workers-types';

declare global {
	namespace App {
		interface interface App.PlatformIf your adapter provides platform-specific context via event.platform, you can specify it here.
Platform {
			App.Platform.env?: {
    YOUR_KV_NAMESPACE: KVNamespace;
    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
} | undefinedenv?: {
				type YOUR_KV_NAMESPACE: KVNamespace<string>YOUR_KV_NAMESPACE: interface KVNamespace<Key extends string = string>KVNamespace;
				type YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>YOUR_DURABLE_OBJECT_NAMESPACE: interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace;
			};
		}
	}
}

export {};

本地测试

platform 属性中特定于 Cloudflare Workers 的值在开发和预览模式下模拟。本地绑定是根据 wrangler.toml 文件中的配置创建的，并在开发和预览期间用于填充 platform.env。使用适配器配置 platformProxy 选项来更改绑定的首选项。

要测试构建，您应该使用 wrangler **版本 3**。构建站点后，运行 wrangler pages dev .svelte-kit/cloudflare。

注释

项目根目录的 /functions 目录中包含的函数**不会**包含在部署中，该部署编译为单个 _worker.js 文件。函数应在您的 SvelteKit 应用中实现为服务器端点。

特定于 Cloudflare Pages 的 _headers 和 _redirects 文件可用于静态资产响应（如图像），方法是将它们放入 /static 文件夹中。

但是，它们对 SvelteKit 动态渲染的响应没有影响，后者应从服务器端点或使用 handle 钩子返回自定义标头或重定向响应。

故障排除

进一步阅读

您可能希望参考 Cloudflare 部署 SvelteKit 站点的文档。

访问文件系统

您不能在 Cloudflare Workers 中使用 fs - 您必须预渲染有问题的路由。

在 GitHub 上编辑此页面

单页应用 Cloudflare Workers