SvelteKitBuild and deploy

Cloudflare Pages

Cloudflare 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 values specific to Cloudflare Workers are emulated during local development, type declarations are automatically applied, and the ability to set Cloudflare-specific options is provided.

比較

adapter-cloudflare – SvelteKit の全ての機能をサポートします; Cloudflare Pages 向けにビルドします
adapter-cloudflare-workers – SvelteKit の全ての機能をサポートします; Cloudflare Workers 向けにビルドします
adapter-static – クライアントサイドの静的なアセットを生成するのみです; Cloudflare Pages と互換性があります

使い方

npm i -D @sveltejs/adapter-cloudflare を実行してインストールし、svelte.config.js にこの adapter を追加します:

svelte.config

import import adapteradapter from '@sveltejs/adapter-cloudflare';

export default {
	kit: {
    adapter: any;
}kit: {
		adapter: anyadapter: import adapteradapter({
			// See below for an explanation of these options
			routes: {
    include: string[];
    exclude: string[];
}routes: {
				include: string[]include: ['/*'],
				exclude: string[]exclude: ['<all>']
			},
			platformProxy: {
    configPath: string;
    environment: undefined;
    experimentalJsonConfig: boolean;
    persist: boolean;
}platformProxy: {
				configPath: stringconfigPath: 'wrangler.toml',
				environment: undefinedenvironment: var undefinedundefined,
				experimentalJsonConfig: booleanexperimentalJsonConfig: false,
				persist: booleanpersist: false
			}
		})
	}
};

Options

routes

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 your static 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', ...].

platformProxy

Preferences for the emulated platform.env local bindings. See the getPlatformProxy Wrangler API documentation for a full list of options.

デプロイメント(Deployment)

Cloudflare Pages の始め方は、Get Started Guide に従ってください。

プロジェクトのセッティングを設定するときは、以下のセッティングを使用しなければなりません:

Framework preset – SvelteKit
Build command – npm run build or vite build
Build output directory – .svelte-kit/cloudflare

Runtime APIs

env オブジェクトにはあなたのプロジェクトの bindings が含まれており、KV/DO namespaces などで構成されています。これは platform プロパティを介して context、caches、cf と一緒に SvelteKit に渡されます。つまり、hooks とエンドポイントでこれらにアクセスできるということです:

export async function function POST({ request, platform }: {
    request: any;
    platform: any;
}): Promise<void>POST({ request, platform }) {

	const const x: anyx = platform: anyplatform.env.YOUR_DURABLE_OBJECT_NAMESPACE.idFromName('x');
}

環境変数については、SvelteKit のビルトインの $env モジュールを優先的に使用したほうが良いでしょう。

バインディングの型宣言を含めるには、、src/app.d.ts でこれらを参照します:

src/app.d

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

export {};

Testing Locally

Cloudflare Workers specific values in the platform property are emulated during dev and preview modes. Local bindings are created based on the configuration in your wrangler.toml file and are used to populate platform.env during development and preview. Use the adapter config platformProxy option to change your preferences for the bindings.

For testing the build, you should use wrangler version 3. Once you have built your site, run wrangler pages dev .svelte-kit/cloudflare.

Notes

プロジェクトの root にある /functions ディレクトリに含まれる関数はデプロイメントには含まれず、1つの _worker.js ファイルにコンパイルされます。関数は、あなたの SvelteKit アプリのサーバーエンドポイント(server endpoints) として実装する必要があります。

Cloudflare Pages 固有の _headers ファイルと _redirects ファイルについては、/static フォルダに置くことで、静的アセットのレスポンス (画像など) に使用することができます。

しかし、SvelteKit が動的にレンダリングするレスポンスには効果がありません。この場合にカスタムヘッダーやリダイレクトレスポンスを返すには、サーバーエンドポイント(server endpoints) や handle hook から返す必要があります。

トラブルシューティング

外部の資料

Cloudflare の、SvelteKit サイトのデプロイに関するドキュメントをご参照ください。

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

Cloudflare Workers では fs を使用することはできません。そうする必要があるルート(route)についてはプリレンダリングする必要があります。

Edit this page on GitHub

previous next

Single-page apps Cloudflare Workers