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: {
// 显示默认选项
adapter: any
adapter: import adapter
adapter({
// 如果为 true,将创建 Netlify Edge Function 而不是
// 使用标准的基于 Node 的函数
edge: boolean
edge: false,
// 如果为 true,将把您的应用拆分为多个函数
// 而不是为整个应用创建单个函数。
// 如果 `edge` 为 true,则不能使用此选项
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 Edge Functions
SvelteKit 支持 Netlify Edge Functions。如果您向 adapter
函数传递 edge: true
选项,服务端渲染将在部署在靠近站点访问者的基于 Deno 的边缘函数中进行。如果设置为 false
(默认值),站点将部署到基于 Node 的 Netlify Functions。
import import adapter
adapter from '@sveltejs/adapter-netlify';
export default {
kit: {
adapter: any;
}
kit: {
adapter: any
adapter: import adapter
adapter({
// 将使用基于 Deno 的 Netlify Edge Function
// 而不是使用标准的基于 Node 的函数
edge: boolean
edge: true
})
}
};
SvelteKit 功能的 Netlify 替代方案
您可以直接使用 SvelteKit 提供的功能构建应用,而无需依赖任何 Netlify 功能。使用这些功能的 SvelteKit 版本将允许它们在开发模式下使用,通过集成测试进行测试,并在您决定切换到其他适配器时能够正常工作。但是,在某些情况下,使用这些功能的 Netlify 版本可能会更有利。例如,如果您正在将已经托管在 Netlify 上的应用迁移到 SvelteKit。
重定向规则
在编译期间,重定向规则会自动附加到您的 _redirects
文件中。(如果该文件尚不存在,它将被创建。)这意味着:
netlify.toml
中的[[redirects]]
永远不会匹配,因为_redirects
具有更高的优先级。因此,始终将您的规则放在_redirects
文件中。_redirects
不应该有任何自定义的”捕获所有”规则,如/* /foobar/:splat
。否则,由于 Netlify 只处理第一个匹配的规则,自动附加的规则将永远不会被应用。
Netlify Forms
- 按照这里的描述创建您的 Netlify HTML 表单,例如作为
/routes/contact/+page.svelte
。(别忘了添加隐藏的form-name
input 元素!) - Netlify 的构建机器人在部署时解析您的 HTML 文件,这意味着您的表单必须预渲染为 HTML 。您可以在您的
contact.svelte
中添加export const prerender = true
来仅预渲染该页面,或设置kit.prerender.force: true
选项来预渲染所有页面。 - 如果您的 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。
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); // 在 Netlify 应用的函数日志中显示
};
此外,您可以通过创建一个目录并在 netlify.toml
文件中添加配置来添加您自己的 Netlify 函数。例如:
[build]
command = "npm run build"
publish = "build"
[functions]
directory = "functions"
故障排除
访问文件系统
您不能在 edge 部署中使用 fs
。
您可以在 serverless 部署中使用它,但它不会按预期工作,因为文件不会从您的项目复制到部署中。相反,使用 $app/server
中的 read
函数来访问您的文件。read
在 edge 部署中不起作用(这在将来可能会改变)。
或者,您可以预渲染相关路由。