跳至主要內容

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 版本。但是,如果您正在升級先前建立的專案,它可能會停留在較舊的版本。請參閱 Netlify 文件,以了解手動指定目前 Node 版本的詳細資訊。

Netlify Edge Functions

SvelteKit 支援 Netlify Edge Functions。如果您將選項 edge: true 傳遞給 adapter 函式,伺服器端渲染將在部署於靠近網站訪客的基於 Deno 的 edge 函式中發生。如果設定為 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。

重新導向規則

在編譯期間,重新導向規則會自動附加到您的 _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 Functions

使用此轉接器,SvelteKit 端點會託管為 Netlify Functions。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 上編輯此頁面

上一頁 下一頁