SvelteKit建置與部署

Cloudflare Workers

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

除非您有特定理由使用 adapter-cloudflare-workers，否則建議您改用 adapter-cloudflare。兩種轉接器功能相同，但 Cloudflare Pages 提供自動建置和部署的 GitHub 整合、預覽部署、即時回滾等功能。

用法

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

svelte.config

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

export default {
	kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			config: stringconfig: 'wrangler.toml',
			platformProxy: {
    configPath: string;
    environment: undefined;
    experimentalJsonConfig: boolean;
    persist: boolean;
}platformProxy: {
				configPath: stringconfigPath: 'wrangler.toml',
				environment: undefinedenvironment: var undefinedundefined,
				experimentalJsonConfig: booleanexperimentalJsonConfig: false,
				persist: booleanpersist: false
			}
		})
	}
};

選項

config

您的自訂 wrangler.toml 設定檔的路徑。

platformProxy

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

基本設定

此轉接器預期會在專案根目錄中找到 wrangler.toml 檔案。它應該看起來像這樣

wrangler

name = "<your-service-name>"
account_id = "<your-account-id>"

main = "./.cloudflare/worker.js"
site.bucket = "./.cloudflare/public"

build.command = "npm run build"

compatibility_date = "2021-11-12"
workers_dev = true

<your-service-name> 可以是任何名稱。<your-account-id> 可以透過登入您的 Cloudflare 儀表板，並從 URL 的結尾處取得。

https://dash.cloudflare.com/<your-account-id>

您應該將 .cloudflare 目錄 (或您為 main 和 site.bucket 指定的任何目錄) 新增到您的 .gitignore。

如果您尚未安裝 wrangler 並登入，則需要安裝並登入。

npm i -g wrangler
wrangler login

然後，您可以建置您的應用程式並部署它

wrangler deploy

自訂設定

如果您想要使用 wrangler.toml 以外的設定檔，可以使用 config 選項來指定。

如果您想要啟用 Node.js 相容性，您可以將 “nodejs_compat” 旗標新增到 wrangler.toml

wrangler

compatibility_flags = [ "nodejs_compat" ]

執行階段 API

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

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 dev。

疑難排解

Worker 大小限制

部署到 workers 時，SvelteKit 產生的伺服器會綑綁成單一檔案。如果您的 worker 在縮小後超過大小限制，Wrangler 將無法發佈您的 worker。您通常不太可能達到此限制，但某些大型程式庫可能會導致這種情況發生。在這種情況下，您可以嘗試僅在用戶端匯入這些程式庫，以減少 worker 的大小。如需更多資訊，請參閱常見問題。

存取檔案系統

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

在 GitHub 上編輯此頁面

上一個下一個

Cloudflare Pages Netlify