SvelteKitビルドとデプロイ

Cloudflare Pages

Cloudflare Pages にデプロイするには、adapter-cloudflare を使用してください。

このアダプターは、adapter-auto を使用するとデフォルトでインストールされます。Cloudflare Pagesを使い続ける予定がある場合は、adapter-auto からこのアダプターを直接使用することで、Cloudflare Workers 特有の値がローカル開発中にエミュレートされ、型宣言が自動的に適用され、Cloudflare 特有のオプションを設定できるようになります。

比較

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

使用方法

npm i -D @sveltejs/adapter-cloudflare でインストールし、アダプターを svelte.config.js に追加します。

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
			}
		})
	}
};

オプション

routes

adapter-cloudflare によって生成される _routes.json ファイルをカスタマイズできます。

include は関数を呼び出すルートを定義し、デフォルトは ['/*'] です。
exclude は関数を呼び出さないルートを定義します。これは、アプリケーションの静的アセットを提供するためのより高速で安価な方法です。この配列には、次の特別な値を含めることができます。
- <build> には、アプリケーションのビルドアーティファクト（Vite によって生成されたファイル）が含まれています。
- <files> には、static ディレクトリのコンテンツが含まれています。
- <prerendered> には、事前レンダリングされたページのリストが含まれています。
- <all> (デフォルト) には、上記のすべてが含まれています。

include と exclude のルールは、合わせて最大 100 個まで設定できます。通常は routes オプションを省略できますが、たとえば <prerendered> パスがこの制限を超える場合は、自動生成される ['/articles/foo', '/articles/bar', '/articles/baz', ...] の代わりに '/articles/*' を含む exclude リストを手動で作成すると役立つ場合があります。.

platformProxy

エミュレートされた `platform.env` ローカルバインディングの設定です。オプションの全リストについては、getPlatformProxy Wrangler API ドキュメントを参照してください。

デプロイ

開始するには、Cloudflare Pages のスタートガイドに従ってください。

プロジェクト設定を行う際には、以下の設定を使用する必要があります。

フレームワークプリセット – SvelteKit
ビルドコマンド – npm run build または vite build
ビルド出力ディレクトリ – .svelte-kit/cloudflare

ランタイム API

env オブジェクトには、プロジェクトのバインディングが含まれています。これには、KV/DO 名前空間などが含まれます。これは `platform` プロパティを介して SvelteKit に渡されます。また、context、`caches`、および `cf` も含まれるため、フックとエンドポイントでアクセスできます。

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

import { interface KVNamespace<Key extends string = string>KVNamespace, interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace } from '@cloudflare/workers-types';

declare global {
	namespace App {
		interface interface App.PlatformIf your adapter provides platform-specific context via event.platform, you can specify it here.
Platform {
			App.Platform.env?: {
    YOUR_KV_NAMESPACE: KVNamespace;
    YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace;
} | undefinedenv?: {
				type YOUR_KV_NAMESPACE: KVNamespace<string>YOUR_KV_NAMESPACE: interface KVNamespace<Key extends string = string>KVNamespace;
				type YOUR_DURABLE_OBJECT_NAMESPACE: DurableObjectNamespace<undefined>YOUR_DURABLE_OBJECT_NAMESPACE: interface DurableObjectNamespace<T extends Rpc.DurableObjectBranded | undefined = undefined>DurableObjectNamespace;
			};
		}
	}
}

export {};

ローカルでのテスト

`platform` プロパティの Cloudflare Workers 特有の値は、開発モードとプレビューモードでエミュレートされます。ローカルのバインディングは、`wrangler.toml` ファイルの設定に基づいて作成され、開発とプレビュー中に `platform.env` にデータを入力するために使用されます。バインディングの設定を変更するには、アダプター設定の `platformProxy` オプションを使用します。

ビルドをテストするには、wrangler **バージョン 3** を使用する必要があります。サイトをビルドしたら、`wrangler pages dev .svelte-kit/cloudflare` を実行します。

注意事項

プロジェクトのルートにある `/functions` ディレクトリに含まれる関数は、デプロイメントには含まれません。デプロイメントは、単一の `_worker.js` ファイルにコンパイルされます。関数は、SvelteKit アプリケーションでサーバーエンドポイントとして実装する必要があります。

Cloudflare Pages 特有の `_headers` および `_redirects` ファイルは、`/static` フォルダーに配置することで、静的アセットのレスポンス (画像など) に使用できます。

ただし、SvelteKit によって動的にレンダリングされるレスポンスには影響しません。カスタムヘッダーを返すか、サーバーエンドポイントから、または `handle` フックを使用してリダイレクトレスポンスを返す必要があります。

トラブルシューティング

参考資料

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

ファイルシステムへのアクセス

Cloudflare Workers では `fs` を使用できません。問題のルートを事前レンダリングする必要があります。

GitHub でこのページを編集

前へ次へ

シングルページアプリケーション Cloudflare Workers