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.

比較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
import adapter from '@sveltejs/adapter-cloudflare';
Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-cloudflare' or its corresponding type declarations.

export default {
	kit: {
		adapter: adapter({
			// See below for an explanation of these options
			routes: {
				include: ['/*'],
				exclude: ['<all>']
			},
			platformProxy: {
				configPath: 'wrangler.toml',
				environment: undefined,
				experimentalJsonConfig: false,
				persist: false
			}
		})
	}
};

Optionspermalink

routespermalink

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

platformProxypermalink

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

デプロイメント(Deployment)permalink

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

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

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

Runtime APIspermalink

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

ts
export async function POST({ request, platform }) {
Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.7031
7031Binding element 'request' implicitly has an 'any' type.
Binding element 'platform' implicitly has an 'any' type.
	const x = 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

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.

Notespermalink

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

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

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

トラブルシューティングpermalink

外部の資料permalink

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

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

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