SvelteKit 最新中文文档教程(10)—— 部署 Cloudflare Pages 和 Cloudflare Workers

news2025/3/31 10:07:26

前言

Svelte,一个语法简洁、入门容易,面向未来的前端框架。

从 Svelte 诞生之初,就备受开发者的喜爱,根据统计,从 2019 年到 2024 年,连续 6 年一直是开发者最感兴趣的前端框架 No.1

image.png

Svelte 以其独特的编译时优化机制著称,具有轻量级高性能易上手等特性,非常适合构建轻量级 Web 项目

为了帮助大家学习 Svelte,我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习,也可以入手我的小册《Svelte 开发指南》,语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte!

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”,踏上“前端大佬成长之路”。

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 中:

// @errors: 2307
/// file: svelte.config.js
import adapter from '@sveltejs/adapter-cloudflare';

export default {
	kit: {
		adapter: adapter({
			// 以下选项的说明请见下文
			routes: {
				include: ['/*'],
				exclude: ['<all>']
			},
			platformProxy: {
				configPath: 'wrangler.toml',
				environment: undefined,
				experimentalJsonConfig: false,
				persist: false
			}
		})
	}
};

选项

routes

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

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

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

platformProxy

模拟 platform.env 本地绑定的偏好设置。完整的选项列表请参见 getPlatformProxy Wrangler API 文档。

部署

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

配置项目设置时,您必须使用以下设置:

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

运行时 API

env 对象包含您项目的绑定,包括 KV/DO 命名空间等。它通过 platform 属性传递给 SvelteKit,同时还有 contextcachescf,这意味着您可以在 hooks 和端点中访问它:

// @errors: 7031
export async function POST({ request, platform }) {
	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

[!NOTE] 应优先使用 SvelteKit 内置的 $env 模块来处理环境变量。

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

/// file: src/app.d.ts
import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';

declare global {
	namespace App {
		interface Platform {
+++			env?: {
				YOUR_KV_NAMESPACE: KVNamespace;
				YOUR_DURABLE_OBJECT_NAMESPACE: 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 — 您必须预渲染相关路由。

Cloudflare Workers

要部署到 Cloudflare Workers,请使用 adapter-cloudflare-workers

[!NOTE] 除非您有特别原因使用 adapter-cloudflare-workers,否则建议使用 adapter-cloudflare。两个适配器具有相同的功能,但 Cloudflare Pages 提供了更多功能,如 GitHub 集成自动构建和部署、预览部署、即时回滚等。

使用方法

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

// @errors: 2307
/// file: svelte.config.js
import adapter from '@sveltejs/adapter-cloudflare-workers';

export default {
	kit: {
		adapter: adapter({
			config: 'wrangler.toml',
			platformProxy: {
				configPath: 'wrangler.toml',
				environment: undefined,
				experimentalJsonConfig: false,
				persist: false
			}
		})
	}
};

选项

config

自定义 wrangler.tomlwrangler.json 配置文件的路径。

platformProxy

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

基本配置

此适配器需要在项目根目录中找到 wrangler.toml/wrangler.json 文件。它应该看起来像这样:

/// file: wrangler.toml
name = "<your-service-name>"
account_id = "<your-account-id>"

main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"

build.command = "npm run build"

compatibility_date = "2021-11-12"
workers_dev = true

<your-service-name> 可以是任何名称。<your-account-id> 可以通过登录到您的 Cloudflare 仪表板 并从 URL 末尾获取:

https://dash.cloudflare.com/<your-account-id>

[!NOTE] 您应该将 .cloudflare 目录(或您为 mainsite.bucket 指定的任何目录)添加到 .gitignore 中。

如果您还没有安装 wrangler 并登录,需要先执行这些操作:

npm i -g wrangler
wrangler login

然后,您可以构建并部署您的应用:

wrangler deploy

自定义配置

如果您想使用 wrangler.toml 以外的配置文件,可以使用 config 选项 指定。

如果您想启用 Node.js 兼容性,可以在 wrangler.toml 中添加 “nodejs_compat” 标志:

/// file: wrangler.toml
compatibility_flags = [ "nodejs_compat" ]

运行时 API

env 对象包含您项目的 绑定,包括 KV/DO 命名空间等。它通过 platform 属性传递给 SvelteKit,同时还包括 contextcachescf,这意味着您可以在 hooks 和端点中访问它:

// @errors: 7031
export async function POST({ request, platform }) {
	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

[!NOTE] 对于环境变量,应优先使用 SvelteKit 内置的 $env 模块。

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

/// file: src/app.d.ts
import { KVNamespace, DurableObjectNamespace } from '@cloudflare/workers-types';

declare global {
	namespace App {
		interface Platform {
+++			env?: {
				YOUR_KV_NAMESPACE: KVNamespace;
				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
			};+++
		}
	}
}

export {};
本地测试

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

要测试构建,您应该使用 wrangler 版本 3。构建完网站后,运行 wrangler dev

故障排除

Worker 大小限制

在部署到 workers 时,SvelteKit 生成的服务端会被打包成单个文件。如果您的 worker 在压缩后超过了 大小限制,Wrangler 将无法发布。通常您不太可能遇到这个限制,但某些大型库可能会导致这种情况。在这种情况下,您可以尝试通过仅在客户端导入这些库来减小 worker 的大小。更多信息请参见 FAQ。

访问文件系统

您不能在 Cloudflare Workers 中使用 fs — 您必须 预渲染 相关路由。

Svelte 中文文档

点击查看中文文档:

  • SvelteKit Cloudflare Pages
  • SvelteKit Cloudflare Workers

系统学习 Svelte,欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte!

此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章, 全系列文章目录:https://github.com/mqyqingfeng/Blog

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”,踏上“前端大佬成长之路”。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2322281.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

springboot使用阿里限流框架-sentinel

当前项目源码 控制台下载 启动bin中的看板服务&#xff1a;账号密码:sentinel/sentinel 官方文档地址 项目引入依赖 <!-- sentinel注解支持 --> <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-annotation-aspectj<…

鸿蒙特效教程10-卡片展开/收起效果

鸿蒙特效教程10-卡片展开/收起效果 在移动应用开发中&#xff0c;卡片是一种常见且实用的UI元素&#xff0c;能够将信息以紧凑且易于理解的方式呈现给用户。 本教程将详细讲解如何在HarmonyOS中实现卡片的展开/收起效果&#xff0c;通过这个实例&#xff0c;你将掌握ArkUI中状…

Qt在模块依靠情况下资源文件名称和资源名称的使用限制

概述 在Qt中使用添加资源文件的时候&#xff0c;对于资源文件名称的定义&#xff0c;往往是较为随意的。 但是当涉及到Qt库依赖的时候&#xff0c;则可能需要遵守一定的规则&#xff0c;否则可能出现文件找不到或者错误加载的问题。 环境 环境名称Qt 版本系统版本LinuxQt 5.…

MTK Android12-Android13 设置系统默认语言

Android 系统&#xff0c;默认语言 文章目录 需求&#xff1a;场景 参考资料实现方案实现思路编译脚本熟悉-平台熟悉mssi_64_cnkernel-4.19 解决方案修改文件-实现方案 源码分析PRODUCT_LOCALES 引用PRODUCT_DEFAULT_LOCALE 定义get-default-product-locale 方法定义PRODUCT_DE…

贪心算法——思路与例题

贪心算法&#xff1a;当我们分析一个问题时&#xff0c;我们往往先以最优的方式来解决问题&#xff0c;所以顾名思义为贪心。 例题1 题目分析&#xff1a;这题利用贪心算法来分析&#xff0c;最优解&#xff08;可容纳人数最多时&#xff09;一定是先考虑六人桌&#xff0c;然…

网络华为HCIA+HCIP 防火墙

防火墙部署模式 路由模式 有路由器的功能 路由器干的活 他都得干 透明模式 旁挂模式 IDS 端口镜像 VPN

WordPress超级菜单插件UberMenu v3.78汉化版

一、插件介绍 UberMenu 是一款功能强大的 WordPress 超级菜单插件,能够帮助站长创建响应式、可自定义的多级菜单。该插件支持动态内容加载、图标、图片、搜索框等丰富功能,并且兼容大多数 WordPress 主题。 UberMenu v3.78 经过完整汉化,适用于中文站点用户,让操作更加直观…

SQL中体会多对多

我们可以根据学生与课程多对多关系的数据库模型&#xff0c;给出实际的表数据以及对应的查询结果示例&#xff0c;会用到JOINLEFT JOIN两种连接 1. 学生表&#xff08;students&#xff09; student_idstudent_name1张三2李四3王五 2. 课程表&#xff08;courses&#xff09…

23种设计模式-备忘录(Memento)设计模式

备忘录设计模式 &#x1f6a9;什么是备忘录设计模式&#xff1f;&#x1f6a9;备忘录设计模式的特点&#x1f6a9;备忘录设计模式的结构&#x1f6a9;备忘录设计模式的优缺点&#x1f6a9;备忘录设计模式的Java实现&#x1f6a9;代码总结&#x1f6a9;总结 &#x1f6a9;什么是…

2024年3月全国计算机等级考试真题(二级C语言)

&#x1f600; 第1题 下列叙述中正确的是 A. 矩阵是非线性结构 B. 数组是长度固定的线性表 C. 对线性表只能作插入与删除运算 D. 线性表中各元素的数据类型可以不同 题目解析&#xff1a; A. 矩阵是非线性结构 错误。矩阵通常是二维数组&#xff0c;属…

【MySQL】索引 事务

目录 一、索引 概念 作用 使用场景 使用 查看索引 创建索引 删除索引 背后的数据结构 二、事务 为什么使用事务 事务的概念 使用 开启事务 执行多条 SQL 语句 回滚或提交&#xff1a;rollback/commit; 事务的基本特性 原子性 一致性 持久性 隔离性 脏读 …

【江协科技STM32】软件SPI读写W25Q64芯片(学习笔记)

SPI通信协议及S为5Q64简介&#xff1a;【STM32】SPI通信协议&W25Q64Flash存储器芯片&#xff08;学习笔记&#xff09;-CSDN博客 STM32与W25Q64模块接线&#xff1a; SPI初始化&#xff1a; 片选SS、始终SCK、MOSI都是主机输出引脚&#xff0c;输出引脚配置为推挽输出&…

Git+Fork 入门介绍

git 分区理解 fork安装 从路径下去拿软件时&#xff0c;注意先拉到本地。经验来看&#xff0c;fork直接安装会出不可思议的问题。 fork操作 安装&#xff0c;注意设置好名字&#xff0c;如果之前安装的同学&#xff0c;名字没有写好&#xff0c;重新安装设置好名字。 clone操…

Windows系统安装Node.js和npm教程【成功】

0.引言——Node.js和npm介绍 项目描述Node.js基于Chrome V8引擎的JavaScript运行环境&#xff0c;使JavaScript可用于服务器端开发。采用单线程、非阻塞I/O及事件驱动架构&#xff0c;适用于构建Web服务器、实时应用和命令行工具等npmNode.js的包管理器与大型软件注册表。拥有…

Axure RP9.0 教程:左侧菜单列表导航 ( 点击父级菜单,子菜单自动收缩或展开)【响应式的菜单导航】

文章目录 引言I 实现步骤添加商品管理菜单组推拉效果引言 应用场景:PC端管理后台页面,左侧菜单列表导航。 思路: 用到了动态面板的两个交互效果来实现:隐藏/显示切换、展开/收起元件向下I 实现步骤 添加商品管理菜单组 在左侧画布区域添加一个菜单栏矩形框;再添加一个商…

科技赋能|ZGIS综合管网智能管理平台守护地下城市生命线

地下管网作为城市公共安全的重要组成部分&#xff0c;担负着城市的信息传递、能源输送、排涝减灾等重要任务&#xff0c;是维系城市正常运行、满足群众生产生活需要的重要基础设施&#xff0c;是城市各功能区有机连接和运转的维系&#xff0c;因此&#xff0c;也被称为城市“生…

如何保证LabVIEW软件开发的质量?

LabVIEW作为图形化编程工具&#xff0c;广泛应用于工业测控、自动化测试等领域。其开发模式灵活&#xff0c;但若缺乏规范&#xff0c;易导致代码可读性差、维护困难、性能低下等问题。保证LabVIEW开发质量需从代码规范、模块化设计、测试验证、版本管理、文档完善等多维度入手…

如何快速解决 Postman 报错?

介绍一些 Postman 常见的报错与处理方法&#xff0c;希望能够对大家有所帮助。 Postman 一直转圈打不开的问题 Postman 报错处理指南&#xff1a;常见报错与解决方法

C++ 多线程简要讲解

std::thread是 C11 标准库中用于多线程编程的核心类&#xff0c;提供线程的创建、管理和同步功能。下面我们一一讲解。 一.构造函数 官网的构造函数如下&#xff1a; 1.默认构造函数和线程创建 thread() noexcept; 作用&#xff1a;创建一个 std::thread 对象&#xff0c;但…

如何设计一个处理物联网设备数据流的后端系统。

一、系统架构设计 物联网设备数据流的后端系统通常包括以下几个主要组件: ①设备数据采集层:负责从物联网设备收集数据。 ②数据传输层:负责将设备数据传输到后端系统。 ③数据处理层:实时或批量处理传输到后的数据。 ④存储层:负责存储设备数据。 ⑤API层:提供外部…