Netlify
要部署到 Netlify,请使用 adapter-netlify
。
当您使用 adapter-auto
时,此适配器将默认安装,但将其添加到您的项目中允许您指定 Netlify 特定的选项。
用法
使用 npm i -D @sveltejs/adapter-netlify
安装,然后将适配器添加到您的 svelte.config.js
中
import import adapter
adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: any;
}
kit: {
// default options are shown
adapter: any
adapter: import adapter
adapter({
// if true, will create a Netlify Edge Function rather
// than using standard Node-based functions
edge: boolean
edge: false,
// if true, will split your app into multiple functions
// instead of creating a single one for the entire app.
// if `edge` is true, this option cannot be used
split: boolean
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 边缘函数
SvelteKit 支持 Netlify 边缘函数。如果您将选项 edge: true
传递给 adapter
函数,则服务器端渲染将在基于 Deno 的边缘函数中发生,该函数部署在靠近网站访问者的位置。如果设置为 false
(默认值),则站点将部署到基于 Node 的 Netlify 函数。
import import adapter
adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: import adapter
adapter({
// will create a Netlify Edge Function using Deno-based
// rather than using standard Node-based functions
edge: boolean
edge: true
})
}
};
Netlify 对 SvelteKit 功能的替代方案
您可以使用 SvelteKit 直接提供的功能构建您的应用程序,而无需依赖任何 Netlify 功能。使用这些功能的 SvelteKit 版本将允许它们在开发模式下使用,使用集成测试进行测试,并在您决定从 Netlify 切换时与其他适配器一起使用。但是,在某些情况下,您可能会发现使用这些功能的 Netlify 版本是有益的。一个例子是,如果您正在将已托管在 Netlify 上的应用程序迁移到 SvelteKit。
重定向规则
在编译期间,重定向规则会自动附加到您的 _redirects
文件中。(如果它尚不存在,它将被创建。)这意味着
netlify.toml
中的[[redirects]]
永远不会匹配,因为_redirects
具有 更高的优先级。因此,始终将您的规则放在_redirects
文件 中。_redirects
不应有任何自定义的“通配符”规则,例如/* /foobar/:splat
。否则,自动附加的规则将永远不会应用,因为 Netlify 仅处理 第一个匹配规则。
Netlify 表单
- 按照 此处 的说明创建您的 Netlify HTML 表单,例如
/routes/contact/+page.svelte
。(不要忘记添加隐藏的form-name
输入元素!) - Netlify 的构建机器人会在部署时解析您的 HTML 文件,这意味着您的表单必须以 HTML 格式 预渲染。您可以将
export const prerender = true
添加到您的contact.svelte
中以仅预渲染该页面,或设置kit.prerender.force: true
选项以预渲染所有页面。 - 如果您的 Netlify 表单具有 自定义成功消息,例如
<form netlify ... action="/success">
,则确保相应的/routes/success/+page.svelte
存在并已预渲染。
Netlify 函数
使用此适配器,SvelteKit 端点将作为 Netlify 函数 托管。Netlify 函数处理程序具有其他上下文,包括 Netlify Identity 信息。您可以通过钩子和 +page.server
或 +layout.server
端点内的 event.platform.context
字段访问此上下文。当适配器配置中的 edge
属性为 false
时,这些是 无服务器函数,或者当它为 true
时是 边缘函数。
export const const load: (event: any) => Promise<void>
load = async (event) => {
const const context: any
context = event: any
event.platform.context;
var console: Console
The console
module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
The module exports two specific components:
- A
Console
class with methods such as console.log()
, console.error()
and console.warn()
that can be used to write to any Node.js stream.
- A global
console
instance configured to write to process.stdout
and
process.stderr
. The global console
can be used without calling require('console')
.
Warning: The global console object’s methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O
for
more information.
Example using the global console
:
console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
// Error: Whoops, something bad happened
// at [eval]:5:15
// at Script.runInThisContext (node:vm:132:18)
// at Object.runInThisContext (node:vm:309:38)
// at node:internal/process/execution:77:19
// at [eval]-wrapper:6:22
// at evalScript (node:internal/process/execution:76:60)
// at node:internal/main/eval_string:23:3
const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
Example using the Console
class:
const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);
myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err
const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
console.Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
Prints to stdout
with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()
).
const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
See util.format()
for more information.
log(const context: any
context); // shows up in your functions log in the Netlify app
};
此外,您可以通过为它们创建一个目录并将配置添加到您的 netlify.toml
文件中来添加您自己的 Netlify 函数。例如
[build]
command = "npm run build"
publish = "build"
[functions]
directory = "functions"
疑难解答
访问文件系统
您不能在边缘部署中使用 fs
。
您可以在无服务器部署中使用它,但它不会按预期工作,因为文件不会从您的项目复制到您的部署中。相反,请使用 $app/server
中的 read
函数来访问您的文件。read
不在边缘部署中工作(这可能会在将来发生变化)。
或者,您可以预渲染相关的路由。