ビルドとデプロイ
Cloudflare Pages
Edit this page on GitHubCloudflare Pages にデプロイする場合は、adapter-cloudflare
を使用します。
This adapter will be installed by default when you use adapter-auto
. If you plan on staying with Cloudflare Pages you can switch from adapter-auto
to using this adapter directly so that type declarations will be automatically applied and you can set Cloudflare-specific options.
比較permalink
adapter-cloudflare
– SvelteKit の全ての機能をサポートします; Cloudflare Pages 向けにビルドしますadapter-cloudflare-workers
– SvelteKit の全ての機能をサポートします; Cloudflare Workers 向けにビルドしますadapter-static
– クライアントサイドの静的なアセットを生成するのみです; Cloudflare Pages と互換性があります
使い方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 – SvelteKit
- Build command –
npm run build
orvite build
- Build output directory –
.svelte-kit/cloudflare
Bindingspermalink
env
オブジェクトにはあなたのプロジェクトの bindings が含まれており、KV/DO namespaces などで構成されています。これは platform
プロパティを介して context
や caches
と一緒に 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 version 3. Once you have built your site, run wrangler pages dev .svelte-kit/cloudflare
. Ensure you have your bindings in your wrangler.toml
.
Notespermalink
プロジェクトの root にある /functions
ディレクトリに含まれる関数はデプロイメントには含まれず、1つの _worker.js
ファイルにコンパイルされます。関数は、あなたの SvelteKit アプリの サーバーエンドポイント(server endpoints) として実装する必要があります。
Cloudflare Pages 固有の _headers
ファイルと _redirects
ファイルについては、/static
フォルダに置くことで、静的アセットのレスポンス (画像など) に使用することができます。
しかし、SvelteKit が動的にレンダリングするレスポンスには効果がありません。この場合にカスタムヘッダーやリダイレクトレスポンスを返すには、サーバーエンドポイント(server endpoints) や handle
hook から返す必要があります。
トラブルシューティングpermalink
外部の資料permalink
Cloudflare の、SvelteKit サイトのデプロイに関するドキュメントをご参照ください。
ファイルシステムにアクセスするpermalink
Serverless/Edge 環境では、fs.readFileSync
などのメソッドでファイルシステムにアクセスすることはできません。もしこのような方法でファイルにアクセスする必要がある場合、アプリのビルド中にプリレンダリングでこれを行ってください。例えば、ブログを持っていて、CMS でコンテンツを管理したくない場合、コンテンツをプリレンダリングし (またはコンテンツを取得するエンドポイントをプリレンダリングし)、新しいコンテンツを追加するたびにブログを再デプロイする必要があります。