建置並部署
Netlify
在 GitHub 上編輯此頁面若要部署到 Netlify,請使用 adapter-netlify
。
當您使用 adapter-auto
時,預設會安裝此轉接器,但將其新增到專案中可讓您指定特定於 Netlify 的選項。
用法永久連結
使用 npm i -D @sveltejs/adapter-netlify
安裝,然後將轉接器新增到 svelte.config.js
ts
importCannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.adapter from'@sveltejs/adapter-netlify' ;export default {kit : {// default options are shownadapter :adapter ({// if true, will create a Netlify Edge Function rather// than using standard Node-based functionsedge : 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 usedsplit : 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。
ts
importCannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.adapter from'@sveltejs/adapter-netlify' ;export default {kit : {adapter :adapter ({// will create a Netlify Edge Function using Deno-based// rather than using standard Node-based functionsedge : true})}};
SvelteKit 功能的 Netlify 替代方案永久連結
你可以使用 SvelteKit 直接提供的功能來建置你的應用程式,而不用依賴任何 Netlify 功能。使用這些功能的 SvelteKit 版本,可以讓它們在開發模式中使用、透過整合測試進行測試,以及在你決定離開 Netlify 時與其他轉接器搭配使用。不過,在某些情況下,你可能會發現使用這些功能的 Netlify 版本是有益的。一個範例是,如果你要將已經在 Netlify 上架的應用程式遷移到 SvelteKit。
重新導向規則永久連結
在編譯期間,重新導向規則會自動附加到你的 _redirects
檔案。(如果它還不存在,它將會被建立。)這表示
[[redirects]]
在netlify.toml
中永遠不會比對,因為_redirects
有 較高的優先順序。因此,請務必將你的規則放入_redirects
檔案 中。_redirects
不應該有任何自訂的「全部比對」規則,例如/* /foobar/:splat
。否則,自動附加的規則永遠不會套用,因為 Netlify 只會處理 第一個比對的規則。
Netlify Forms永久連結
- 按照 這裡所述建立你的 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
時,這些是邊緣函式。
ts
export constParameter 'event' implicitly has an 'any' type.7006Parameter 'event' implicitly has an 'any' type.load = async () => { event constcontext =event .platform .context ;console .log (context ); // shows up in your functions log in the Netlify app};
ts
export constParameter 'event' implicitly has an 'any' type.7006Parameter 'event' implicitly has an 'any' type.load = async () => { event constcontext =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
不會在邊緣部署中運作(這可能會在未來有所改變)。
或者,你可以預先渲染相關路由。