Cloudflare Pages
Edit this page on GitHubCloudflare Pages にデプロイする場合は、adapter-cloudflare
を使用します。
adapter-auto
を使用している場合、この adapter は自動でインストールされますが、それよりもこの adapter 自体をプロジェクトに追加することをおすすめします。event.platform
が自動で型付けされるからです。
比較permalink
adapter-cloudflare
– SvelteKit の全ての機能をサポートします; Cloudflare Pages 向けにビルドしますadapter-cloudflare-workers
– SvelteKit の全ての機能をサポートします; Cloudflare Workers 向けにビルドしますadapter-static
– クライアントサイドの静的なアセットを生成するのみです; Cloudflare Pages と互換性があります
特別な理由が無い限り、
adapter-cloudflare-workers
ではなく、この adapter を使用することをおすすめします。どちらの adapter も機能としては同等ですが、Cloudflare Pages は、GitHub インテグレーションによる自動ビルドや自動デプロイ、プレビューデプロイ、即時ロールバックなどの機能を提供します。
使い方permalink
npm i -D @sveltejs/adapter-cloudflare
を実行してインストールし、svelte.config.js
にこの adapter を追加します:
ts
importCannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.adapter from'@sveltejs/adapter-cloudflare' ;export default {kit : {adapter :adapter ({// See below for an explanation of these optionsroutes : {include : ['/*'],exclude : ['<all>']}})}};
Optionspermalink
The routes
option allows you to customise the _routes.json
file generated by adapter-cloudflare
.
include
defines routes that will invoke a function, and defaults to['/*']
exclude
defines routes that will not invoke a function — this is a faster and cheaper way to serve your app's static assets. This array can include the following special values:<build>
contains your app's build artifacts (the files generated by Vite)<files>
contains the contents of yourstatic
directory<prerendered>
contains a list of prerendered pages<all>
(the default) contains all of the above
You can have up to 100 include
and exclude
rules combined. Generally you can omit the routes
options, but if (for example) your <prerendered>
paths exceed that limit, you may find it helpful to manually create an exclude
list that includes '/articles/*'
instead of the auto-generated ['/articles/foo', '/articles/bar', '/articles/baz', ...]
.
デプロイメント(Deployment)permalink
Cloudflare Pages の始め方は、Get Started Guide に従ってください。
プロジェクトのセッティングを設定するときは、以下のセッティングを使用しなければなりません:
- Framework preset – None
- Build command –
npm run build
またはvite build
- Build output directory –
.svelte-kit/cloudflare
- Environment variables
NODE_VERSION
:16
"production" 環境と "preview" 環境のどちらにも、環境変数
NODE_VERSION
を追加する必要があります。これは、プロジェクトセットアップ時や、後で Pages プロジェクトのセッティングで追加できます。SvelteKit は Node16.14
以降を要求するため、NODE_VERSION
の値として16
を使用する必要があります。
環境変数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 を使ってください
Notespermalink
プロジェクトの root にある /functions
ディレクトリに含まれる関数はデプロイメントには含まれず、1つの _worker.js
ファイルにコンパイルされます。関数は、あなたの SvelteKit アプリの サーバーエンドポイント(server endpoints) として実装する必要があります。
Cloudflare Pages 固有の _headers
ファイルと _redirects
ファイルについては、/static
フォルダに置くことで、静的アセットのレスポンス (画像など) に使用することができます。
しかし、SvelteKit が動的にレンダリングするレスポンスには効果がありません。この場合にカスタムヘッダーやリダイレクトレスポンスを返すには、サーバーエンドポイント(server endpoints) や handle
hook から返す必要があります。
トラブルシューティングpermalink
ファイルシステムにアクセスするpermalink
Serverless/Edge 環境では、fs.readFileSync
などのメソッドでファイルシステムにアクセスすることはできません。もしこのような方法でファイルにアクセスする必要がある場合、アプリのビルド中にプリレンダリングでこれを行ってください。例えば、ブログを持っていて、CMS でコンテンツを管理したくない場合、コンテンツをプリレンダリングし (またはコンテンツを取得するエンドポイントをプリレンダリングし)、新しいコンテンツを追加するたびにブログを再デプロイする必要があります。