Cloudflare Workers

Cloudflare Workers にデプロイする場合は、adapter-cloudflare-workers を使用します。

Unless you have a specific reason to use adapter-cloudflare-workers, it’s recommended that you use adapter-cloudflare instead. Both adapters have equivalent functionality, but Cloudflare Pages offers features like GitHub integration with automatic builds and deploys, preview deployments, instant rollback and so on.

使い方

npm i -D @sveltejs/adapter-cloudflare-workers を実行してインストールし、svelte.config.js にこの adapter を追加します:

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
			}
		})
	}
};

Options

config

Path to your custom wrangler.toml config file.

platformProxy

Preferences for the emulated platform.env local bindings. See the getPlatformProxy Wrangler API documentation for a full list of options.

基本設定

この adapter では、プロジェクトの root に wrangler.toml ファイルを置くことを想定しています。内容としては以下のようなものです:

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 dashboard にログインし、URL の末尾から取得できます:

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

.cloudflare ディレクトリ (または main と site.bucket に指定したディレクトリ) を .gitignore に追加する必要があります。

wrangler をインストールしてログインする必要がありますが、もしまだやっていなければ:

npm i -g wrangler
wrangler login

その後、アプリをビルドしデプロイすることができます:

wrangler deploy

カスタム設定

If you would like to use a config file other than wrangler.toml you can specify so using the config option.

Node.js 互換 を有効化したい場合は、wrangler.toml で “nodejs_compat” フラグを追加してください:

compatibility_flags = [ "nodejs_compat" ]

Runtime APIs

env オブジェクトにはあなたのプロジェクトの bindings が含まれており、KV/DO namespaces などで構成されています。これは platform プロパティを介して context、caches、cf と一緒に SvelteKit に渡されます。つまり、hooks とエンドポイントでこれらにアクセスできるということです:

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 でこれらを参照します:

declare global {
	namespace App {
		interface Platform {
			env?: {
				YOUR_KV_NAMESPACE: KVNamespace;
				YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
			};
		}
	}
}

export {};

Testing Locally

Cloudflare Workers specific values in the platform property are emulated during dev and preview modes. Local bindings are created based on the configuration in your wrangler.toml file and are used to populate platform.env during development and preview. Use the adapter config platformProxy option to change your preferences for the bindings.

For testing the build, you should use wrangler version 3. Once you have built your site, run wrangler dev.

トラブルシューティング

Worker size limits

Workers にデプロイする場合、SvelteKit が生成したサーバーは1つのファイルにバンドルされます。minify 後に Worker が そのサイズの上限 を超過する場合、Wrangler が Worker の公開に失敗します。通常、この制限に引っかかることはほとんどありませんが、一部の大きいライブラリではこれが発生することがあります。その場合、大きいライブラリをクライアントサイドでのみインポートするようにすることで、Worker のサイズを小さくすることができます。詳細は FAQ をご覧ください。

ファイルシステムにアクセスする

Cloudflare Workers では fs を使用することはできません。そうする必要があるルート(route)についてはプリレンダリングする必要があります。