Netlify
要部署到 Netlify,请使用 adapter-netlify
。
¥To deploy to Netlify, use adapter-netlify
.
当你使用 adapter-auto
时,此适配器将默认安装,但将其添加到你的项目中允许你指定特定于 Netlify 的选项。
¥This adapter will be installed by default when you use adapter-auto
, but adding it to your project allows you to specify Netlify-specific options.
用法(Usage)
¥Usage
使用 npm i -D @sveltejs/adapter-netlify
安装,然后将适配器添加到你的 svelte.config.js
:
¥Install with npm i -D @sveltejs/adapter-netlify
, then add the adapter to your 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
设置确定在何处写入静态资源:
¥Then, make sure you have a netlify.toml file in the project root. This will determine where to write static assets based on the build.publish
settings, as per this sample configuration:
[build]
command = "npm run build"
publish = "build"
如果缺少 netlify.toml
文件或 build.publish
值,则将使用默认值 "build"
。请注意,如果你已将 Netlify UI 中的发布目录设置为其他内容,那么你也需要在 netlify.toml
中设置它,或者使用默认值 "build"
。
¥If the netlify.toml
file or the build.publish
value is missing, a default value of "build"
will be used. Note that if you have set the publish directory in the Netlify UI to something else then you will need to set it in netlify.toml
too, or use the default value of "build"
.
Node 版本(Node version)
¥Node version
新项目将默认使用当前的 Node LTS 版本。但是,如果你正在升级不久前创建的项目,它可能会停留在旧版本上。有关手动指定当前 Node 版本的详细信息,请参阅 Netlify 文档。
¥New projects will use the current Node LTS version by default. However, if you’re upgrading a project you created a while ago it may be stuck on an older version. See the Netlify docs for details on manually specifying a current Node version.
Netlify Edge 函数(Netlify Edge Functions)
¥Netlify Edge Functions
SvelteKit 支持 Netlify Edge 函数。如果你将选项 edge: true
传递给 adapter
函数,服务器端渲染将在部署在靠近站点访问者的基于 Deno 的边缘函数中进行。如果设置为 false
(默认值),站点将部署到基于 Node 的 Netlify 函数。
¥SvelteKit supports Netlify Edge Functions. If you pass the option edge: true
to the adapter
function, server-side rendering will happen in a Deno-based edge function that’s deployed close to the site visitor. If set to false
(the default), the site will deploy to Node-based Netlify Functions.
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 功能替代品(Netlify alternatives to SvelteKit functionality)
¥Netlify alternatives to SvelteKit functionality
你可以使用 SvelteKit 直接提供的功能构建你的应用,而无需依赖任何 Netlify 功能。使用这些功能的 SvelteKit 版本将允许它们在开发模式下使用,使用集成测试进行测试,并与其他适配器一起使用,以防你决定放弃 Netlify。但是,在某些情况下,你可能会发现使用这些功能的 Netlify 版本会很有帮助。一个例子是,如果你正在将已经托管在 Netlify 上的应用迁移到 SvelteKit。
¥You may build your app using functionality provided directly by SvelteKit without relying on any Netlify functionality. Using the SvelteKit versions of these features will allow them to be used in dev mode, tested with integration tests, and to work with other adapters should you ever decide to switch away from Netlify. However, in some scenarios you may find it beneficial to use the Netlify versions of these features. One example would be if you’re migrating an app that’s already hosted on Netlify to SvelteKit.
重定向规则(Redirect rules)
¥Redirect rules
在编译期间,重定向规则会自动附加到你的 _redirects
文件中。(如果它尚不存在,它将被创建。)这意味着:
¥During compilation, redirect rules are automatically appended to your _redirects
file. (If it doesn’t exist yet, it will be created.) That means:
netlify.toml
中的[[redirects]]
永远不会匹配,因为_redirects
有 更高优先级。因此,请始终将规则放在_redirects
文件 中。¥
[[redirects]]
innetlify.toml
will never match as_redirects
has a higher priority. So always put your rules in the_redirects
file._redirects
不应该有任何自定义 “全部捕获” 规则,例如/* /foobar/:splat
。否则,由于 Netlify 仅处理 第一个匹配规则,因此自动附加的规则将永远不会应用。¥
_redirects
shouldn’t have any custom “catch all” rules such as/* /foobar/:splat
. Otherwise the automatically appended rule will never be applied as Netlify is only processing the first matching rule.
Netlify 表单(Netlify Forms)
¥Netlify Forms
按照 此处 所述创建 Netlify HTML 表单,例如
/routes/contact/+page.svelte
。(不要忘记添加隐藏的form-name
输入元素!)¥Create your Netlify HTML form as described here, e.g. as
/routes/contact/+page.svelte
. (Don’t forget to add the hiddenform-name
input element!)Netlify 的构建机器人在部署时解析你的 HTML 文件,这意味着你的表单必须是 prerendered 作为 HTML。你可以将
export const prerender = true
添加到你的contact.svelte
以仅预渲染该页面,也可以设置kit.prerender.force: true
选项以预渲染所有页面。¥Netlify’s build bot parses your HTML files at deploy time, which means your form must be prerendered as HTML. You can either add
export const prerender = true
to yourcontact.svelte
to prerender just that page or set thekit.prerender.force: true
option to prerender all pages.如果你的 Netlify 表单具有类似
<form netlify ... action="/success">
的 自定义成功消息,请确保相应的/routes/success/+page.svelte
存在并已预渲染。¥If your Netlify form has a custom success message like
<form netlify ... action="/success">
then ensure the corresponding/routes/success/+page.svelte
exists and is prerendered.
Netlify 函数(Netlify Functions)
¥Netlify Functions
使用此适配器,SvelteKit 端点托管为 Netlify 函数。Netlify 函数处理程序具有额外的上下文,包括 Netlify Identity 信息。你可以通过钩子和 +page.server
或 +layout.server
端点内的 event.platform.context
字段访问此上下文。当适配器配置中的 edge
属性为 false
时,这些为 无服务器函数;当适配器配置中的 edge
属性为 true
时,这些为 边缘函数。
¥With this adapter, SvelteKit endpoints are hosted as Netlify Functions. Netlify function handlers have additional context, including Netlify Identity information. You can access this context via the event.platform.context
field inside your hooks and +page.server
or +layout.server
endpoints. These are serverless functions when the edge
property is false
in the adapter config or edge functions when it is 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 函数。例如:
¥Additionally, you can add your own Netlify functions by creating a directory for them and adding the configuration to your netlify.toml
file. For example:
[build]
command = "npm run build"
publish = "build"
[functions]
directory = "functions"
故障排除(Troubleshooting)
¥Troubleshooting
访问文件系统(Accessing the file system)
¥Accessing the file system
你不能在边缘部署中使用 fs
。
¥You can’t use fs
in edge deployments.
你可以在无服务器部署中使用它,但它不会按预期工作,因为文件不会从你的项目复制到你的部署中。相反,使用 $app/server
中的 read
函数来访问你的文件。read
不在边缘部署内工作(未来可能会发生变化)。
¥You can use it in serverless deployments, but it won’t work as expected, since files are not copied from your project into your deployment. Instead, use the read
function from $app/server
to access your files. read
does not work inside edge deployments (this may change in future).
或者,你可以 prerender 相关路由。
¥Alternatively, you can prerender the routes in question.