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

ts
import adapter from '@sveltejs/adapter-cloudflare';
Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.

export default {
	kit: {
		adapter: adapter({
			// See below for an explanation of these options
			routes: {
				include: ['/*'],
				exclude: ['<all>']
			},
	  platformProxy: {
		persist: './your-custom-path'
	  }
		})
	}
};

選項永久連結

路由永久連結

允許您自訂由 adapter-cloudflare 生成的 _routes.json 檔案。

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

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

platformProxypermalink

已模擬 platform.env 本地繫結的偏好設定。請參閱 getPlatformProxy Wrangler API 文件，以取得選項的完整清單。

部署permalink

請遵循 開始使用指南，開始使用 Cloudflare Pages。

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

• 架構預設值 – SvelteKit
• 建置指令 – npm run build 或 vite build
• 建置輸出目錄 – .svelte-kit/cloudflare

執行時期 APIpermalink

env 物件包含專案的 繫結，其中包含 KV/DO 名稱空間等。它會透過 platform 屬性傳遞給 SvelteKit，連同 context、caches 和 cf，表示您可以在掛勾和端點中存取它

ts
export async function POST({ request, platform }) {
Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.7031
7031Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.
	const x = platform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

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

若要包含繫結的類型宣告，請在 src/app.d.ts 中參照它們

declare global {
	namespace App {
		interface Platform {
			env?: {
				YOUR_KV_NAMESPACE: KVNamespace;
				YOUR_DURABLE_OBJECT_NAMESPACE: 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 掛勾傳回自訂標頭或重新導向回應。

疑難排解永久連結

進一步閱讀永久連結

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

存取檔案系統永久連結

您無法在 Cloudflare Workers 中使用 fs — 您必須預先渲染有問題的路由。