SvelteKit 最新中文文档教程(11)—— 部署 Netlify 和 Vercel

前言

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

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

image.png

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

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

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

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

Netlify

要部署到 Netlify,请使用 adapter-netlify

当您使用 adapter-auto 时,此适配器将默认安装,但将其添加到您的项目中可以指定 Netlify 特定的选项。

用法

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

// @errors: 2307
/// file: svelte.config.js
import adapter from '@sveltejs/adapter-netlify';export default {kit: {// 显示默认选项adapter: adapter({// 如果为 true,将创建 Netlify Edge Function 而不是// 使用标准的基于 Node 的函数edge: false,// 如果为 true,将把您的应用拆分为多个函数// 而不是为整个应用创建单个函数。// 如果 `edge` 为 true,则不能使用此选项split: false})}
};

然后,确保在项目根目录中有一个 netlify.toml 文件。这将根据 build.publish 设置确定写入静态资源的位置,如此示例配置所示:

[build]command = "npm run build"publish = "build"

如果缺少 netlify.toml 文件或 build.publish 值,将使用默认值 "build"。请注意,如果您在 Netlify UI 中将发布目录设置为其他值,那么您也需要在 netlify.toml 中设置它,或使用默认值 "build"

Node 版本

新项目默认将使用当前的 Node LTS 版本。但是,如果您正在升级很久以前创建的项目,它可能会停留在旧版本上。有关手动指定当前 Node 版本的详细信息,请参阅 Netlify 文档。

Netlify Edge Functions

SvelteKit 支持 Netlify Edge Functions。如果您向 adapter 函数传递 edge: true 选项,服务端渲染将在部署在靠近站点访问者的基于 Deno 的边缘函数中进行。如果设置为 false(默认值),站点将部署到基于 Node 的 Netlify Functions。

// @errors: 2307
/// file: svelte.config.js
import adapter from '@sveltejs/adapter-netlify';export default {kit: {adapter: adapter({// 将使用基于 Deno 的 Netlify Edge Function// 而不是使用标准的基于 Node 的函数edge: true})}
};

SvelteKit 功能的 Netlify 替代方案

您可以直接使用 SvelteKit 提供的功能构建应用,而无需依赖任何 Netlify 功能。使用这些功能的 SvelteKit 版本将允许它们在开发模式下使用,通过集成测试进行测试,并在您决定切换到其他适配器时能够正常工作。但是,在某些情况下,使用这些功能的 Netlify 版本可能会更有利。例如,如果您正在将已经托管在 Netlify 上的应用迁移到 SvelteKit。

重定向规则

在编译期间,重定向规则会自动附加到您的 _redirects 文件中。(如果该文件尚不存在,它将被创建。)这意味着:

  • netlify.toml 中的 [[redirects]] 永远不会匹配,因为 _redirects 具有更高的优先级。因此,始终将您的规则放在 _redirects 文件中。
  • _redirects 不应该有任何自定义的"捕获所有"规则,如 /* /foobar/:splat。否则,由于 Netlify 只处理第一个匹配的规则,自动附加的规则将永远不会被应用。
Netlify Forms
  1. 按照这里的描述创建您的 Netlify HTML 表单,例如作为 /routes/contact/+page.svelte。(别忘了添加隐藏的 form-name input 元素!)
  2. Netlify 的构建机器人在部署时解析您的 HTML 文件,这意味着您的表单必须预渲染为 HTML 。您可以在您的 contact.svelte 中添加 export const prerender = true 来仅预渲染该页面,或设置 kit.prerender.force: true 选项来预渲染所有页面。
  3. 如果您的 Netlify 表单有一个自定义成功消息,如 <form netlify ... action="/success">,则确保相应的 /routes/success/+page.svelte 存在并已预渲染。
Netlify Functions

使用此适配器,SvelteKit 端点将作为 Netlify Functions 托管。Netlify 函数处理程序具有额外的上下文,包括 Netlify Identity 信息。您可以通过您的 hooks 和 +page.server+layout.server 端点中的 event.platform.context 字段访问此上下文。当适配器配置中的 edge 属性为 false 时,这些是serverless functions,当为 true 时,这些是edge functions。

// @errors: 2705 7006
/// file: +page.server.js
export const load = async (event) => {const context = event.platform.context;console.log(context); // 在 Netlify 应用的函数日志中显示
};

此外,您可以通过创建一个目录并在 netlify.toml 文件中添加配置来添加您自己的 Netlify 函数。例如:

[build]command = "npm run build"publish = "build"[functions]directory = "functions"

故障排除

访问文件系统

您不能在 edge 部署中使用 fs

可以在 serverless 部署中使用它,但它不会按预期工作,因为文件不会从您的项目复制到部署中。相反,使用 $app/server 中的 read 函数来访问您的文件。read 在 edge 部署中不起作用(这在将来可能会改变)。

或者,您可以预渲染相关路由。

Vercel

要部署到 Vercel,请使用 adapter-vercel

当您使用 adapter-auto 时,这个适配器会被默认安装,但将其添加到您的项目中可以让您指定 Vercel 特定的选项。

用法

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

// @errors: 2307 2345
/// file: svelte.config.js
import adapter from '@sveltejs/adapter-vercel';export default {kit: {adapter: adapter({// 可以在此处设置选项,详见下文})}
};

部署配置

要控制您的路由如何作为函数部署到 Vercel,您可以通过上面显示的选项或在 +server.js+page(.server).js+layout(.server).js 文件中使用 export const config 来指定部署配置。

例如,您可以将应用的某些部分部署为 Edge Functions…

/// file: about/+page.js
/** @type {import('@sveltejs/adapter-vercel').Config} */
export const config = {runtime: 'edge'
};

…其他部分则作为 Serverless Functions(注意,在布局中指定 config 时,它会应用于所有子页面):

/// file: admin/+layout.js
/** @type {import('@sveltejs/adapter-vercel').Config} */
export const config = {runtime: 'nodejs22.x'
};

以下选项适用于所有函数:

  • runtime'edge''nodejs18.x''nodejs20.x''nodejs22.x'。默认情况下,适配器会选择与您的项目在 Vercel 仪表板上配置的 Node 版本对应的 'nodejs<version>.x'
  • regions:边缘网络区域数组(对于 serverless 函数默认为 ["iad1"])或当 runtimeedge 时为 'all'(其默认值)。注意,serverless 函数的多区域部署仅在企业版计划中支持
  • split:如果为 true,会导致路由被部署为独立函数。如果在适配器级别将 split 设置为 true,所有路由都将被部署为独立函数

此外,以下选项适用于 edge functions:

  • external:esbuild 在打包函数时应该视为外部的依赖项数组。这只应用于排除在 Node 之外不会运行的可选依赖项

以下选项适用于 serverless 函数:

  • memory:函数可用的内存量。默认为 1024 Mb,可以降低到 128 Mb 或在专业版或企业版账户中以 64Mb 为增量增加到 3008 Mb
  • maxDuration:函数的最大执行时长。Hobby 账户默认为 10 秒,Pro 为 15 秒,Enterprise 为 900
  • isr:配置增量静态重生成,详见下文

如果您的函数需要访问特定区域的数据,建议将它们部署在同一区域(或靠近该区域)以获得最佳性能。

图像优化

您可以设置 images 配置来控制 Vercel 如何构建您的图像。完整细节请参见图像配置参考。例如,您可以设置:

// @errors: 2300 2842 7031 1181 1005 1136 1128
/// file: svelte.config.js
import adapter from '@sveltejs/adapter-vercel';export default {kit: {adapter({images: {sizes: [640, 828, 1200, 1920, 3840],formats: ['image/avif', 'image/webp'],minimumCacheTTL: 300,domains: ['example-app.vercel.app'],}})}
};

增量静态重生成

Vercel 支持增量静态重生成 (ISR),它提供了预渲染内容的性能和成本优势,同时保持动态渲染内容的灵活性。

要为路由添加 ISR,在您的 config 对象中包含 isr 属性:

// @errors: 2664
import { BYPASS_TOKEN } from '$env/static/private';export const config = {isr: {// 缓存资源将通过调用 Serverless 函数重新生成的过期时间(以秒为单位)。// 将值设置为 `false` 表示永不过期。expiration: 60,// 可以在 URL 中提供的随机令牌,通过使用 __prerender_bypass=<token> cookie 请求资源来绕过缓存版本。//// 使用 `x-prerender-revalidate: <token>` 进行 `GET` 或 `HEAD` 请求将强制重新验证资源。bypassToken: BYPASS_TOKEN,// 有效查询参数列表。其他参数(如 utm 跟踪代码)将被忽略,// 确保它们不会导致不必要的内容重新生成allowQuery: ['search']}
};

expiration 属性是必需的;其他都是可选的。

预渲染的页面将忽略 ISR 配置。

环境变量

Vercel 提供了一组用于部署的特定的环境变量。像其他环境变量一样,这些变量可以从 $env/static/private$env/dynamic/private 访问(有时候 — 稍后会详细说明),并且不能从它们的公共对应项访问。要从客户端访问这些变量之一:

// @errors: 2305
/// file: +layout.server.js
import { VERCEL_COMMIT_REF } from '$env/static/private';/** @type {import('./$types').LayoutServerLoad} */
export function load() {return {deploymentGitBranch: VERCEL_COMMIT_REF};
}
<!--- file: +layout.svelte --->
<script>/** @type {{ data: import('./$types').LayoutServerData }} */let { data } = $props();
</script><p>此暂存环境是从 {data.deploymentGitBranch} 部署的。</p>

由于在 Vercel 上构建时,所有这些变量在构建时和运行时之间都保持不变,我们建议使用 $env/static/private(它会静态替换变量,启用死代码消除等优化)而不是 $env/dynamic/private

版本偏差保护

当部署应用的新版本时,之前版本的资源可能不再可访问。如果用户在此时正在使用您的应用,在导航时可能会导致错误 — 这就是所谓的版本偏差。SvelteKit 通过检测由版本偏差导致的错误并触发硬重载来获取应用的最新版本来缓解这个问题,但这会导致客户端状态丢失。(您也可以通过观察 updated store 值来主动缓解它,这个值会告诉客户端何时部署了新版本。)

版本偏差保护是Vercel 的一个功能,可以将客户端请求路由到它们的原始部署。当用户访问您的应用时,会设置一个带有部署 ID 的 cookie,只要版本偏差保护处于活动状态,任何后续请求都会被路由到该部署。当他们重新加载页面时,将获得最新的部署。(updated store 不受此行为影响,因此将继续报告新的部署。)要启用它,请访问 Vercel 上项目设置的高级部分。

基于 cookie 的版本偏差保护有一个注意事项:如果用户在多个标签页中打开了您的应用的多个版本,旧版本的请求将被路由到较新的版本,这意味着它们将回退到 SvelteKit 的内置版本偏差保护。

注意事项

Vercel 函数

如果您在项目根目录的 api 目录中有 Vercel 函数,任何对 /api/* 的请求将不会由 SvelteKit 处理。您应该在您的 SvelteKit 应用中将这些实现为 API 路由,除非您需要使用非 JavaScript 语言,在这种情况下您需要确保您的 SvelteKit 应用中没有任何 /api/* 路由。

Node 版本

在某个日期之前创建的项目可能默认使用比 SvelteKit 当前要求的更旧的 Node 版本。您可以在项目设置中更改 Node 版本。

故障排除

访问文件系统

您不能在 edge functions 中使用 fs

可以在 serverless 函数中使用它,但它不会按预期工作,因为文件不会从您的项目复制到您的部署中。相反,使用 $app/server 中的 read 函数来访问您的文件。read 在部署为 edge functions 的路由中不起作用(这在将来可能会改变)。

或者,您可以预渲染相关路由。

Svelte 中文文档

点击查看中文文档:

  • SvelteKit Netlify
  • SvelteKit Vercel

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

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

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

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

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

相关文章

计算机等级4级数据库工程师(笔记1)

数据依赖&#xff08;2&#xff09;&#xff1a;多值依赖 进程&#xff08;4&#xff09;&#xff1a;PCB 内存管理&#xff08;3&#xff09; 文件管理&#xff08;3&#xff09; 关系模型中数据的物理结构是一张二维表&#xff08;错&#xff09; 在用户看来&#xff0c;…

pod 不允许改哪些字段?

在 Kubernetes 中&#xff0c;Pod 是一种不可变的资源对象。这意味着一旦 Pod 被创建&#xff0c;其中的一些字段是无法修改的。如果你需要对这些不可变字段进行更改&#xff0c;通常的做法是删除旧的 Pod 并创建一个新的 Pod。 以下是一些在 Pod 中不可修改的关键字段&#x…

量子计算的黎明:从理论到现实的突破之旅

在科技发展的浩瀚星空中&#xff0c;量子计算如同一颗璀璨的新星&#xff0c;正逐渐照亮人类探索未知领域的道路。从最初的理论构想&#xff0c;到如今实验室中的初步实现&#xff0c;量子计算正经历着一场从梦想到现实的华丽蜕变。这场变革不仅挑战了我们对计算本质的理解&…

【Unity】 HTFramework框架(六十三)SerializableDictionary可序列化字典

更新日期&#xff1a;2025年3月26日。 Github 仓库&#xff1a;https://github.com/SaiTingHu/HTFramework Gitee 仓库&#xff1a;https://gitee.com/SaiTingHu/HTFramework 索引 一、SerializableDictionary可序列化字典1.使用SerializableDictionary2.实现思路 二、Serializ…

二叉树练习

102. 二叉树的层序遍历 - 力扣&#xff08;LeetCode&#xff09; 使用队列进行层序遍历。 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.v…

深入了解 Git Merge:用法、类型与合并冲突处理

文章目录 深入了解 Git Merge&#xff1a;用法、类型与合并冲突处理一、Git Merge 是什么&#xff1f;二、Git Merge 的工作流程四、Git Merge 的类型1. Fast-forward Merge&#xff08;快进合并&#xff09;2. Three-way Merge&#xff08;三方合并&#xff09; 四、Git Merge…

DeepSeek助力Vue开发:打造丝滑的键盘快捷键

DeepSeek助力Vue开发&#xff1a;打造丝滑的键盘快捷键 大家好&#xff0c;给大家分享一篇文章&#xff01;并提供具体代码实现帮助大家深入理解&#xff0c;彻底掌握&#xff01;如果能帮助到大家或给大家一些灵感和启发&#xff0c;欢迎收藏关注。&#x1f495;&#x1f495;…

FreeRTOS 队列结构体 xQUEUE 深度解析

一、核心成员与功能设计 FreeRTOS 的队列结构体 xQUEUE 是任务间通信&#xff08;IPC&#xff09;的核心数据结构&#xff0c;通过统一的设计支持队列、信号量、互斥量等多种同步机制。其设计体现了 ​**"数据拷贝 结构复用"** 的理念&#xff0c;兼顾轻量化与扩展…

斜对角线的应用

引入 题目描述 经典应用&#xff1a;八皇后问题 dg和udg数组的解释 对角线 d g [ u i ] d g [ u i ] dg[ui]dg[ui] dg[ui]dg[ui]&#xff0c;反对角线 u d g [ n − u i ] u d g [ n − u i ] udg[n−ui]udg[n−ui] udg[n−ui]udg[n−ui]中的下标 u i ui ui和 n − …

简单聊聊Oracle和MySQL数据库的区别和使用场景

对于IT的技术人员&#xff0c;MySQL是非常熟悉的开源数据库&#xff0c;在各个行业被广泛应用。但是对于Oracle数据库&#xff0c;很多专业的IT从业人员不太了解&#xff0c;今天就来聊一聊Oracle和MySQL的一些区别。 1. 使用场景 首先MySQL是在各种IT公司或者非IT公司广泛应用…

STM32学习笔记之存储器映射(原理篇)

&#x1f4e2;&#xff1a;如果你也对机器人、人工智能感兴趣&#xff0c;看来我们志同道合✨ &#x1f4e2;&#xff1a;不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 &#x1f4e2;&#xff1a;文章若有幸对你有帮助&#xff0c;可点赞 &#x1f44d;…

mapbox V3 新特性,添加三维球鹰眼图控件

👨‍⚕️ 主页: gis分享者 👨‍⚕️ 感谢各位大佬 点赞👍 收藏⭐ 留言📝 加关注✅! 👨‍⚕️ 收录于专栏:mapbox 从入门到精通 文章目录 一、🍀前言1.1 ☘️mapboxgl.Map 地图对象1.2 ☘️mapboxgl.Map style属性1.3 ☘️mapbox-gl-globe-minimap 三维球体鹰眼…

MySQL-调优策略-SQL语句

引言 架构调优&#xff0c;在系统设计时首先需要充分考虑业务的实际情况&#xff0c;是否可以把不适合数据库做的事情放到数据仓库、搜索引擎或者缓存中去做&#xff1b;然后考虑写的并发量有多大&#xff0c;是否需要采用分布式&#xff1b;最后考虑读的压力是否很大&#xf…

6502电气集中联锁道岔控制电路的工作过程

6502电气集中联锁道岔控制电路的工作过程主要包括选择进路、转换道岔、锁闭进路、开放信号和解锁进路等环节&#xff0c;以下是其具体工作过程模拟&#xff1a; 选择进路&#xff1a; 按压按钮&#xff1a;操作人员在控制台上按压进路两端的按钮&#xff0c;如始端按钮和终端按…

DS足球监控【比分直播】监控,钉钉实现自动提醒

文章目录 目标网站分析详细分析提醒工具代码截图成功提示对爬虫、逆向感兴趣的同学可以查看文章,一对一小班教学:https://blog.csdn.net/weixin_35770067/article/details/142514698 目标网站分析 https://live.dszuqiu.com/监控目标:实现固定时间内对比分监控,实现自动下单…

基于ssm的医院预约挂号系统

一、系统架构 前端&#xff1a;jsp | bootstrap | jquery | css | ajax 后端&#xff1a;spring | springmvc | mybatis 环境&#xff1a;jdk1.8 | mysql | maven | tomcat 二、代码及数据 三、功能介绍 01. 注册 02. 登录 03. 首页 04. 医院挂号 05. …

华为OD机试A卷 - 快递业务站 计算快递主站点(C++ Java JavaScript Python )

最新华为OD机试 真题目录:点击查看目录 华为OD面试真题精选:点击立即查看 题目描述 快递业务范围有 N 个站点,A 站点与 B 站点可以中转快递,则认为 A-B 站可达, 如果 A-B 可达,B-C 可达,则 A-C 可达。 现在给 N 个站点编号 0、1、…n-1,用 s[i][j]表示 i-j 是否可…

三维动态规划-LeetCode3418. 机器人可以获得的最大金币数

太爽了&#xff01;做完这道题&#xff0c;让我感觉就像是斩杀了一条大龙&#xff01;历时72天&#xff0c;分3次花掉30小时。终获突破&#xff01; 零、题目 3418. 机器人可以获得的最大金币数 给你一个 m x n 的网格。一个机器人从网格的左上角 (0, 0) 出发&#xff0c;目…

相生、相克、乘侮、复杂病机及对应的脏腑功能联系

一、五行相生关系&#xff08;母子关系&#xff09; 五行生序脏腑关系生理表现举例木生火肝&#xff08;木&#xff09;滋养心&#xff08;火&#xff09;肝血充足则心血旺盛火生土心&#xff08;火&#xff09;温煦脾&#xff08;土&#xff09;心阳充足则脾胃运化功能正常土…

Ubuntu22.04搭建freeradius操作说明

Ubuntu22.04搭建freeradius操作说明 更新依赖库 sudo apt update sudo apt install build-essential sudo apt install libtalloc-dev sudo apt install libssl-dev 按照freeradius sudo apt install freeradius 修改freeradius配置 文件路径如下 /etc/freeradius/3.…