跳至主要内容

Netlify

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

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

用法

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

svelte.config
import import adapteradapter from '@sveltejs/adapter-netlify';

export default {
	
kit: {
    adapter: any;
}
kit
: {
// default options are shown adapter: anyadapter: import adapteradapter({ // if true, will create a Netlify Edge Function rather // than using standard Node-based functions edge: booleanedge: 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: booleansplit: 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 函数。

svelte.config
import import adapteradapter from '@sveltejs/adapter-netlify';

export default {
	
kit: {
    adapter: any;
}
kit
: {
adapter: anyadapter: import adapteradapter({ // will create a Netlify Edge Function using Deno-based // rather than using standard Node-based functions edge: booleanedge: true }) } };

Netlify 对 SvelteKit 功能的替代方案

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

重定向规则

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

  • netlify.toml 中的 [[redirects]] 永远不会匹配,因为 _redirects 具有 更高的优先级。因此,始终将您的规则放在 _redirects 文件 中。
  • _redirects 不应有任何自定义的“通配符”规则,例如 /* /foobar/:splat。否则,自动附加的规则将永远不会应用,因为 Netlify 仅处理 第一个匹配规则

Netlify 表单

  1. 按照 此处 的说明创建您的 Netlify HTML 表单,例如 /routes/contact/+page.svelte。(不要忘记添加隐藏的 form-name 输入元素!)
  2. Netlify 的构建机器人会在部署时解析您的 HTML 文件,这意味着您的表单必须以 HTML 格式 预渲染。您可以将 export const prerender = true 添加到您的 contact.svelte 中以仅预渲染该页面,或设置 kit.prerender.force: true 选项以预渲染所有页面。
  3. 如果您的 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 时是 边缘函数

+page.server
export const const load: (event: any) => Promise<void>load = async (event) => {
	const const context: anycontext = event: anyevent.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
@seesource
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.

@sincev0.1.100
log
(const context: anycontext); // 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 不在边缘部署中工作(这可能会在将来发生变化)。

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

在 GitHub 上编辑此页面

上一页 下一页