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({
			// 以下选项的说明请见下文
			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
			}
		})
	}
};

选项

routes

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

include 定义将调用函数的路由，默认为 ['/*']
exclude 定义将不调用函数的路由 — 这是一种更快且更经济的方式来提供应用的静态资源。这个数组可以包含以下特殊值：
- <build> 包含您的应用构建产物（由 Vite 生成的文件）
- <files> 包含您的 static 目录的内容
- <prerendered> 包含预渲染页面的列表
- <all> (默认值) 包含以上所有内容

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

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，这意味着您可以在 hooks 和端点中访问它：

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