ビルドとデプロイ
Cloudflare Workers
Edit this page on GitHubCloudflare Workers にデプロイする場合は、adapter-cloudflare-workers
を使用します。
Unless you have a specific reason to use
adapter-cloudflare-workers
, it's recommended that you useadapter-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
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');}
環境変数については、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
platform.env
is only available in the final build and not in dev mode. For testing the build, you can use wrangler. Once you have built your site, run wrangler dev
. Ensure you have your bindings in your wrangler.toml
. Wrangler version 3 is recommended.
platform.env
は最終的なビルドでのみ利用可能であり、開発モード (dev mode) では利用できません。ビルドをテストするには、wrangler をお使いいただけます。サイトをビルドし、wrangler dev
を実行してください。bindings が wrangler.toml
にあることを確認してください。Wrangler のバージョンは 3 を推奨します。
トラブルシューティングpermalink
Worker size limitspermalink
Workers にデプロイする場合、SvelteKit が生成したサーバーは1つのファイルにバンドルされます。minify 後に Worker が そのサイズの上限 を超過する場合、Wrangler が Worker の公開に失敗します。通常、この制限に引っかかることはほとんどありませんが、一部の大きいライブラリではこれが発生することがあります。その場合、大きいライブラリをクライアントサイドでのみインポートするようにすることで、Worker のサイズを小さくすることができます。詳細は FAQ をご覧ください。
ファイルシステムにアクセスするpermalink
Serverless/Edge 環境では、fs.readFileSync
などのメソッドでファイルシステムにアクセスすることはできません。もしこのような方法でファイルにアクセスする必要がある場合、アプリのビルド中にプリレンダリングでこれを行ってください。例えば、ブログを持っていて、CMS でコンテンツを管理したくない場合、コンテンツをプリレンダリングし (またはコンテンツを取得するエンドポイントをプリレンダリングし)、新しいコンテンツを追加するたびにブログを再デプロイする必要があります。