Cloudflare Workers
Edit this page on GitHubCloudflare Workers にデプロイする場合は、adapter-cloudflare-workers
を使用します。
この adapter を使用する特別な理由がない限り、代わりに adapter-cloudflare
を使用することをおすすめします。
Wrangler v2 が必要です。
使い方permalink
npm i -D @sveltejs/adapter-cloudflare-workers
を実行してインストールし、svelte.config.js
にこの adapter を追加します:
ts
importCannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.adapter from'@sveltejs/adapter-cloudflare-workers' ;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
importCannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare-workers' or its corresponding type declarations.adapter from'@sveltejs/adapter-cloudflare-workers' ;export default {kit : {adapter :adapter ({config : '<your-wrangler-name>.toml' })}};
環境変数permalink
KV/DO namespaces などを含んでいる env
オブジェクトは、context
や caches
と一緒に platform
プロパティ経由で SvelteKit に渡されます。つまり、hooks とエンドポイントの中でアクセスできるということです:
ts
export async functionBinding element 'request' implicitly has an 'any' type.Binding element 'platform' implicitly has an 'any' type.7031POST ({, request }) { platform
7031Binding element 'request' implicitly has an 'any' type.Binding element 'platform' implicitly has an 'any' type.constx =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 でコンテンツを管理したくない場合、コンテンツをプリレンダリングし (またはコンテンツを取得するエンドポイントをプリレンダリングし)、新しいコンテンツを追加するたびにブログを再デプロイする必要があります。