Vercel

若要部署到 Vercel，請使用 adapter-vercel。

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

用法永久連結

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

ts
import adapter from '@sveltejs/adapter-vercel';

export default {
	kit: {
		adapter: adapter({
			// see below for options that can be set here
		})
	}
};

部署設定永久連結

若要控制您的路由如何部署到 Vercel 作為函式，您可以指定部署設定，透過上述顯示的選項或在 +server.js、+page(.server).js 和 +layout(.server).js 檔案內的 export const config 進行設定。

例如，您可以將應用程式的部分部署為 邊緣函式...

ts
/** @type {import('@sveltejs/adapter-vercel').Config} */
export const config = {
	runtime: 'edge'
};

ts
import type { Config } from '@sveltejs/adapter-vercel';

export const config: Config = {
	runtime: 'edge',
};

...而其他部分部署為 無伺服器函式（請注意，在版面配置中指定 config，它會套用至所有子頁面）

ts
/** @type {import('@sveltejs/adapter-vercel').Config} */
export const config = {
	runtime: 'nodejs18.x'
};

ts
import type { Config } from '@sveltejs/adapter-vercel';

export const config: Config = {
	runtime: 'nodejs18.x',
};

下列選項套用至所有函式

• runtime：'edge'、'nodejs18.x' 或 'nodejs20.x'。預設情況下，此轉接器會選取與專案在 Vercel 控制台中設定為使用的 Node 版本相應的 'nodejs<version>.x'
• regions：邊緣網路區域 陣列（預設為無伺服器函式的 ["iad1"]）或 'all'（如果 runtime 為 edge（其預設值）。請注意，僅企業方案支援無伺服器函式的多個區域
• split：如果為 true，會將路由部署為個別函式。如果在轉接器層級將 split 設為 true，所有路由都將部署為個別函式

此外，下列選項適用於邊緣函式

• external：esbuild 在打包函式時應視為外部的相依性陣列。這只應用于排除不會在 Node 外部執行的選用相依性

下列選項適用於無伺服器函式

• memory：函式可用的記憶體量。預設為 1024 Mb，且可在 Pro 或 Enterprise 帳戶中以 64Mb 為增量減少至 128 Mb 或 增加 至 3008 Mb
• maxDuration：函式的 最大執行時間。Hobby 帳戶預設為 10 秒，Pro 帳戶為 15 秒，Enterprise 帳戶為 900 秒
• isr：增量靜態重新產生設定，說明如下

如果函式需要存取特定區域的資料，建議將其部署在同一個區域（或接近該區域）以獲得最佳效能。

影像最佳化永久連結

您可以設定 images 設定來控制 Vercel 如何建置您的影像。請參閱 影像設定參考 以取得完整詳細資料。例如，您可以設定

import adapter from '@sveltejs/adapter-vercel';

export default {
	kit: {
		adapter({
			images: {
				sizes: [640, 828, 1200, 1920, 3840],
				formats: ['image/avif', 'image/webp'],
				minimumCacheTTL: 300,
				domains: ['example-app.vercel.app'],
			}
		})
	}
};

增量靜態重新產生永久連結

Vercel 支援 增量靜態重新產生 (ISR)，它提供預先渲染內容的效能和成本優勢，並具備動態渲染內容的彈性。

若要將 ISR 加入路由，請在您的 config 物件中加入 isr 屬性

ts
import { BYPASS_TOKEN } from '$env/static/private';

export const config = {
	isr: {
		// Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function.
		// Setting the value to `false` means it will never expire.
		expiration: 60,

		// Random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset
		// with a __prerender_bypass=<token> cookie.
		//
		// Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
		bypassToken: BYPASS_TOKEN,

		// List of valid query parameters. Other parameters (such as utm tracking codes) will be ignored,
		// ensuring that they do not result in content being regenerated unnecessarily
		allowQuery: ['search']
	}
};

ts
import { BYPASS_TOKEN } from '$env/static/private';

export const config = {
	isr: {
		// Expiration time (in seconds) before the cached asset will be re-generated by invoking the Serverless Function.
		// Setting the value to `false` means it will never expire.
		expiration: 60,

		// Random token that can be provided in the URL to bypass the cached version of the asset, by requesting the asset
		// with a __prerender_bypass=<token> cookie.
		//
		// Making a `GET` or `HEAD` request with `x-prerender-revalidate: <token>` will force the asset to be re-validated.
		bypassToken: BYPASS_TOKEN,

		// List of valid query parameters. Other parameters (such as utm tracking codes) will be ignored,
		// ensuring that they do not result in content being regenerated unnecessarily
		allowQuery: ['search'],
	},
};

expiration 屬性為必填；其他屬性皆為選填。

環境變數永久連結

Vercel 提供一組 特定於部署的環境變數。與其他環境變數一樣，這些變數可從 $env/static/private 和 $env/dynamic/private 存取（有時 — 稍後會詳細說明），但無法從其公開對應項存取。若要從用戶端存取其中一個變數

ts
import { VERCEL_COMMIT_REF } from '$env/static/private';

/** @type {import('./$types').LayoutServerLoad} */
export function load() {
	return {
		deploymentGitBranch: VERCEL_COMMIT_REF
	};
}

ts
import { VERCEL_COMMIT_REF } from '$env/static/private';
import type { LayoutServerLoad } from './$types';

export const load: LayoutServerLoad = () => {
	return {
		deploymentGitBranch: VERCEL_COMMIT_REF,
	};
};

<script>
	/** @type {import('./$types').LayoutServerData} */
	export let data;
</script>

<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>

<script lang="ts">
	import type { LayoutServerData } from './$types';
	
	export let data: LayoutServerData;
</script>

<p>This staging environment was deployed from {data.deploymentGitBranch}.</p>

由於在 Vercel 上建置時，這些變數在建置時間和執行時間之間保持不變，我們建議使用 $env/static/private — 它會靜態替換變數，啟用最佳化（例如消除無用程式碼）— 而不是 $env/dynamic/private。

傾斜保護永久連結

當您的應用程式新版本部署時，屬於舊版本的資產可能無法再存取。如果使用者在發生此情況時正在積極使用您的應用程式，則當他們導航時可能會導致錯誤 — 這稱為版本傾斜。SvelteKit 透過偵測因版本傾斜而產生的錯誤並強制重新載入以取得應用程式的最新版本來減輕此問題，但這將導致任何用戶端狀態遺失。（您也可以透過觀察 updated 儲存值來主動減輕此問題，該值會在部署新版本時告知用戶端。）

傾斜保護 是 Vercel 的一項功能，可將用戶端要求路由到其原始部署。當使用者造訪您的應用程式時，會設定一個包含部署 ID 的 cookie，並且任何後續要求都將路由到該部署，只要傾斜保護處於啟用狀態。當他們重新載入頁面時，他們將取得最新的部署。（updated 儲存不受此行為影響，因此將繼續報告新的部署。）若要啟用它，請前往 Vercel 上專案設定的高階部分。

基於 cookie 的傾斜保護附帶一個警告：如果使用者在多個分頁中開啟多個版本的應用程式，則來自舊版本的請求將路由到較新的版本，這表示他們將回退到 SvelteKit 內建的傾斜保護。

注意事項永久連結

Vercel 函數永久連結

如果您在專案根目錄的 api 目錄中包含 Vercel 函數，則 /api/* 的任何要求不會由 SvelteKit 處理。您應該在 SvelteKit 應用程式中將這些實作為 API 路由，除非您需要使用非 JavaScript 語言，這種情況下您需要確保在 SvelteKit 應用程式中沒有任何 /api/* 路由。

Node 版本永久連結

在特定日期之前建立的專案可能會預設使用比 SvelteKit 目前要求的更舊的 Node 版本。您可以在專案設定中變更 Node 版本。

疑難排解永久連結

存取檔案系統永久連結

您無法在邊緣函數中使用 fs。

您可以在無伺服器函數中使用它，但它不會按預期運作，因為檔案不會從您的專案複製到您的部署中。請改用 $app/server 中的 read 函數來存取您的檔案。read 不會在部署為邊緣函數的路由中運作（這可能會在未來變更）。

或者，您可以預先渲染有問題的路由。