SvelteKit建置和部署

Cloudflare Pages

若要部署到 Cloudflare Pages，請使用 adapter-cloudflare。

當您使用 adapter-auto 時，此轉接器將會預設安裝。如果您計畫繼續使用 Cloudflare Pages，您可以從 adapter-auto 切換為直接使用此轉接器，以便在本地開發期間模擬 Cloudflare Workers 特有的值、自動套用類型宣告，並提供設定 Cloudflare 特定選項的能力。

比較

adapter-cloudflare – 支援所有 SvelteKit 功能；為 Cloudflare Pages 建置
adapter-cloudflare-workers – 支援所有 SvelteKit 功能；為 Cloudflare Workers 建置
adapter-static – 僅產生用戶端靜態資源；與 Cloudflare Pages 相容

使用方式

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

svelte.config

import import adapteradapter from '@sveltejs/adapter-cloudflare';

export default {
	kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			// See below for an explanation of these options
			routes: {
    include: string[];
    exclude: string[];
}routes: {
				include: string[]include: ['/*'],
				exclude: string[]exclude: ['<all>']
			},
			platformProxy: {
    configPath: string;
    environment: undefined;
    experimentalJsonConfig: boolean;
    persist: boolean;
}platformProxy: {
				configPath: stringconfigPath: 'wrangler.toml',
				environment: undefinedenvironment: var undefinedundefined,
				experimentalJsonConfig: booleanexperimentalJsonConfig: false,
				persist: booleanpersist: false
			}
		})
	}
};

選項

routes

讓您可以自訂 adapter-cloudflare 產生的 _routes.json 檔案。

include 定義會呼叫函式的路由，預設為 ['/*']
exclude 定義「不」會呼叫函式的路由 — 這是更快且更便宜的方式來提供應用程式的靜態資源。此陣列可以包含下列特殊值
- <build> 包含您的應用程式建置產物（Vite 產生的檔案）
- <files> 包含您的 static 目錄的內容
- <prerendered> 包含預先渲染頁面的清單
- <all>（預設）包含以上所有內容

您最多可以合併 100 個 include 和 exclude 規則。一般而言，您可以省略 routes 選項，但如果（例如）您的 <prerendered> 路徑超出該限制，您可能會發現手動建立包含 '/articles/*' 而不是自動產生的 ['/articles/foo', '/articles/bar', '/articles/baz', ...] 的 exclude 清單很有幫助。

platformProxy

模擬的 platform.env 本機綁定的偏好設定。如需選項的完整清單，請參閱 getPlatformProxy Wrangler API 文件。

部署

請遵循 Cloudflare Pages 的入門指南開始使用。

設定專案設定時，您必須使用下列設定

框架預設 – SvelteKit
建置命令 – npm run build 或 vite build
建置輸出目錄 – .svelte-kit/cloudflare

執行階段 API

env 物件包含您專案的綁定，其中包含 KV/DO 命名空間等。它會透過 platform 屬性傳遞至 SvelteKit，以及 context、caches 和 cf，這表示您可以在 hook 和端點中存取它

export async function function POST({ request, platform }: {
    request: any;
    platform: any;
}): Promise<void>POST({ request, platform }) {

	const const x: anyx = platform: anyplatform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

環境變數應優先使用 SvelteKit 的內建 $env 模組。

若要包含綁定的類型宣告，請在您的 src/app.d.ts 中參考它們

src/app.d

import { interface KVNamespace<Key extends string = string>KVNamespace, interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace } from '@cloudflare/workers-types';

declare global {
	namespace App {
		interface interface App.PlatformIf your adapter provides platform-specific context via event.platform, you can specify it here.
Platform {
			App.Platform.env?: {
    YOUR_KV_NAMESPACE: KVNamespace;
    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
} | undefinedenv?: {
				type YOUR_KV_NAMESPACE: KVNamespace<string>YOUR_KV_NAMESPACE: interface KVNamespace<Key extends string = string>KVNamespace;
				type YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>YOUR_DURABLE_OBJECT_NAMESPACE: interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace;
			};
		}
	}
}

export {};

在本機測試

在開發和預覽模式期間，會模擬 platform 屬性中 Cloudflare Workers 的特定值。本機綁定會根據您的 wrangler.toml 檔案中的組態建立，並在開發和預覽期間用來填入 platform.env。使用轉接器組態 platformProxy 選項來變更您對綁定的偏好設定。

若要測試建置，您應該使用 wrangler 版本 3。建置您的網站後，請執行 wrangler pages dev .svelte-kit/cloudflare。

注意事項

專案根目錄中 /functions 目錄中的函式「不會」包含在部署中，該部署會編譯為單一 _worker.js 檔案。函式應實作為 SvelteKit 應用程式中的伺服器端點。

Cloudflare Pages 特有的 _headers 和 _redirects 檔案可以透過將其放入 /static 資料夾，用於靜態資源回應（例如圖片）。

但是，它們不會對 SvelteKit 動態呈現的回應產生任何影響，SvelteKit 應該從伺服器端點或使用 handle hook 回傳自訂標頭或重新導向回應。

疑難排解

延伸閱讀

您可能需要參考 Cloudflare 的文件以部署 SvelteKit 網站。

存取檔案系統

您無法在 Cloudflare Workers 中使用 fs — 您必須預先渲染相關路由。

在 GitHub 上編輯此頁面

上一個下一個

單頁應用程式 Cloudflare Workers