Skip to main content

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 LTS 版本。然而,如果您升级的是您很久以前创建的项目,它可能卡在较旧版本上。请参阅Netlify 文档以获取有关手动指定当前 Node 版本的详细信息。

Netlify Edge Functions

SvelteKit 支持 Netlify Edge Functions。如果您将选项 edge: true 传递给 adapter 函数,服务器端渲染将在部署在接近网站访客的基于 Deno 的边缘函数中发生。如果设置为 false(默认值),网站将部署到基于 Node 的 Netlify Functions。

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。

_headers_redirects

The _headers_redirects 文件是针对 Netlify 的,可以将它们放入项目根目录以用于静态资源响应(如图片)。

重定向规则

在编译过程中,重定向规则会自动添加到您的 _redirects 文件中。(如果尚不存在,则会创建。)这意味着:

  • [[重定向]]netlify.toml 中永远不会与 _redirects 匹配,因为 优先级更高。所以请始终将您的规则放在 _redirects 文件 中。
  • _redirects 不应包含任何自定义的 “catch all” 规则,例如 /* /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 Functions托管。Netlify 函数处理程序具有额外的上下文,包括Netlify Identity信息。您可以通过在您的钩子中的event.platform.context字段或+page.server+layout.server端点中访问此上下文。当适配器配置中的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 importing the node:console module.

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/serverread 函数来访问您的文件。read 在边缘部署中不起作用(这可能在将来改变)。

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

Edit this page on GitHub llms.txt