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

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

デプロイメント(Deployment)permalink

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

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

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

Bindingspermalink

env オブジェクトにはあなたのプロジェクトの bindings が含まれており、KV/DO namespaces などで構成されています。これは platform プロパティを介して context や caches と一緒に 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

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

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