Cloudflare Pages

Cloudflare Pages にデプロイする場合は、adapter-cloudflare を使用します。

adapter-auto を使用している場合、この adapter は自動でインストールされますが、それよりもこの adapter 自体をプロジェクトに追加することをおすすめします。event.platform が自動で型付けされるからです。

比較permalink

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

特別な理由が無い限り、adapter-cloudflare-workers ではなく、この adapter を使用することをおすすめします。どちらの adapter も機能としては同等ですが、Cloudflare Pages は、GitHub インテグレーションによる自動ビルドや自動デプロイ、プレビューデプロイ、即時ロールバックなどの機能を提供します。

使い方permalink

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

svelte.config.js

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 – None
Build command – npm run build または vite build
Build output directory – .svelte-kit/cloudflare
Environment variables
- NODE_VERSION: 16

"production" 環境と "preview" 環境のどちらにも、環境変数 NODE_VERSION を追加する必要があります。これは、プロジェクトセットアップ時や、後で Pages プロジェクトのセッティングで追加できます。SvelteKit は Node 16.14 以降を要求するため、NODE_VERSION の値として 16 を使用する必要があります。

環境変数permalink

KV/DO namespaces などを含んでいる env オブジェクトは、context や caches と一緒に platform プロパティ経由で 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');
}

これらの型をアプリで使えるようにするには、src/app.d.ts でこれらを参照します:

src/app.d.ts

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

export {};

platform.env は本番向けビルドでのみ利用することができます。ローカルでテストするには wrangler を使ってください

Notespermalink

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

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

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

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

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

Serverless/Edge 環境では、fs.readFileSync などのメソッドでファイルシステムにアクセスすることはできません。もしこのような方法でファイルにアクセスする必要がある場合、アプリのビルド中にプリレンダリングでこれを行ってください。例えば、ブログを持っていて、CMS でコンテンツを管理したくない場合、コンテンツをプリレンダリングし (またはコンテンツを取得するエンドポイントをプリレンダリングし)、新しいコンテンツを追加するたびにブログを再デプロイする必要があります。

previous Single-page apps

next Cloudflare Workers