Cloudflare Workers

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

この adapter を使用する特別な理由がない限り、代わりに adapter-cloudflare を使用することをおすすめします。

Wrangler v2 が必要です。

使い方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()
  }
};

基本設定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 publish

カスタム設定permalink

wrangler.toml 以外の設定ファイルを使用したい場合は、以下のようにします:

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: '<your-wrangler-name>.toml' })
  }
};

環境変数permalink

KV/DO namespaces などを含んでいる env オブジェクトは、context や caches と一緒に platform プロパティ経由で 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');
}

これらの型をアプリで使えるようにするには、src/app.d.ts でこれらを参照します:

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

export {};

platform.env は本番向けビルドでのみ利用することができます。ローカルでテストするには wrangler を使ってください

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

Worker size limitspermalink

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

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

Serverless/Edge 環境では、fs.readFileSync などのメソッドでファイルシステムにアクセスすることはできません。もしこのような方法でファイルにアクセスする必要がある場合、アプリのビルド中にプリレンダリングでこれを行ってください。例えば、ブログを持っていて、CMS でコンテンツを管理したくない場合、コンテンツをプリレンダリングし (またはコンテンツを取得するエンドポイントをプリレンダリングし)、新しいコンテンツを追加するたびにブログを再デプロイする必要があります。