跳至主要內容

建置並部署

Netlify

在 GitHub 上編輯此頁面

若要部署到 Netlify,請使用 adapter-netlify

當您使用 adapter-auto 時,預設會安裝此轉接器,但將其新增到專案中可讓您指定特定於 Netlify 的選項。

用法

使用 npm i -D @sveltejs/adapter-netlify 安裝,然後將轉接器新增到 svelte.config.js

svelte.config.js
ts
import adapter from '@sveltejs/adapter-netlify';
Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.
export default {
kit: {
// default options are shown
adapter: adapter({
// if true, will create a Netlify Edge Function rather
// than using standard Node-based functions
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: 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-based edge 函式中發生。如果設定為 false(預設),網站會部署至基於 Node 的 Netlify Functions。

svelte.config.js
ts
import adapter from '@sveltejs/adapter-netlify';
Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.
export default {
kit: {
adapter: adapter({
// will create a Netlify Edge Function using Deno-based
// rather than using standard Node-based functions
edge: true
})
}
};

SvelteKit 功能的 Netlify 替代方案

你可以使用 SvelteKit 直接提供的功能來建置你的應用程式,而不用依賴任何 Netlify 功能。使用這些功能的 SvelteKit 版本,可以讓它們在開發模式中使用、透過整合測試進行測試,以及在你決定離開 Netlify 時與其他轉接器搭配使用。不過,在某些情況下,你可能會發現使用這些功能的 Netlify 版本是有益的。一個範例是,如果你要將已經在 Netlify 上架的應用程式遷移到 SvelteKit。

重新導向規則

在編譯期間,重新導向規則會自動附加到你的 _redirects 檔案。(如果它還不存在,它將會被建立。)這表示

  • [[redirects]]netlify.toml 中永遠不會比對,因為 _redirects較高的優先順序。因此,請務必將你的規則放入 _redirects 檔案 中。
  • _redirects 不應該有任何自訂的「全部比對」規則,例如 /* /foobar/:splat。否則,自動附加的規則永遠不會套用,因為 Netlify 只會處理 第一個比對的規則

Netlify Forms

  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.js
ts
export const load = async (event) => {
Parameter 'event' implicitly has an 'any' type.7006Parameter 'event' implicitly has an 'any' type.
const context = event.platform.context;
console.log(context); // shows up in your functions log in the Netlify app
};
+page.server.ts
ts
export const load = async (event) => {
Parameter 'event' implicitly has an 'any' type.7006Parameter 'event' implicitly has an 'any' type.
const context = event.platform.context;
console.log(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 不會在邊緣部署中運作(這可能會在未來有所改變)。

或者,你可以預先渲染相關路由。

下一個 Vercel