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: {
// 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
設定來決定將靜態資產寫入的位置,如同此範例設定
[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。
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 功能的方案
您可以使用 SvelteKit 直接提供的功能來建置應用程式,而無需依賴任何 Netlify 功能。使用 SvelteKit 版本的這些功能將允許它們在開發模式中使用、使用整合測試進行測試,並且在您決定從 Netlify 切換時與其他轉接器一起使用。但是,在某些情況下,您可能會發現使用 Netlify 版本的這些功能會很有益。一個例子是,如果您正在將已經託管在 Netlify 上的應用程式遷移到 SvelteKit。
重新導向規則
在編譯期間,重新導向規則會自動附加到您的 _redirects
檔案中。(如果它還不存在,則會建立它。)這表示
netlify.toml
中的[[redirects]]
永遠不會匹配,因為_redirects
具有 更高的優先順序。因此,請務必將您的規則放置在_redirects
檔案中。_redirects
不應有任何自訂的「捕捉所有」規則,例如/* /foobar/:splat
。否則,自動附加的規則將永遠不會被套用,因為 Netlify 只會處理 第一個匹配的規則。
Netlify 表單
- 依照 這裡 的說明建立您的 Netlify HTML 表單,例如作為
/routes/contact/+page.svelte
。(別忘了新增隱藏的form-name
輸入元素!) - Netlify 的建置機器人在部署時會解析您的 HTML 檔案,這表示您的表單必須 預先渲染 為 HTML。您可以將
export const prerender = true
新增至您的contact.svelte
以預先渲染該頁面,或設定kit.prerender.force: true
選項以預先渲染所有頁面。 - 如果您的 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
時,這些是 邊緣函式。
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 函式。例如
[build]
command = "npm run build"
publish = "build"
[functions]
directory = "functions"
疑難排解
存取檔案系統
您無法在邊緣部署中使用 fs
。
您可以在無伺服器部署中使用它,但它不會如預期般運作,因為檔案不會從您的專案複製到您的部署中。請改用 $app/server
中的 read
函式來存取您的檔案。read
在邊緣部署中無法運作(這可能在未來變更)。
或者,您可以預先渲染相關的路由。