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.

使い方permalink

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

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

export default {
	kit: {
		adapter: adapter({
	  config: 'wrangler.toml',
			platformProxy: {
				configPath: 'wrangler.toml',
				environment: undefined,
				experimentalJsonConfig: false,
				persist: false
			}
	})
	}
};

Optionspermalink

configpermalink

Path to your custom wrangler.toml config file.

platformProxypermalink

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

基本設定permalink

この 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

カスタム設定permalink

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 APIspermalink

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

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

Testing Locallypermalink

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.

トラブルシューティングpermalink

Worker size limitspermalink

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

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

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