Svelte入門：SvelteKitでのアダプターについて

よっしー

こんにちは。よっしーです(^^)

今日は、SvelteKitでのアダプターについて解説しています。

背景
SvelteKitでのアダプターについて
アダプターの使用
コード解説
プラットフォーム固有のコンテキスト
おわりに

背景

SvelteKitでのアダプターについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

SvelteKitでのアダプターについて

SvelteKitアプリをデプロイする前に、デプロイ先に合わせてアプリを適応させる必要があります。アダプターは、ビルドされたアプリを入力として受け取り、デプロイ用の出力を生成する小さなプラグインです。

様々なプラットフォーム向けに公式アダプターが存在します：

Cloudflare Pages向けの@sveltejs/adapter-cloudflare
Cloudflare Workers向けの@sveltejs/adapter-cloudflare-workers
Netlify向けの@sveltejs/adapter-netlify
Nodeサーバー向けの@sveltejs/adapter-node
静的サイト生成（SSG）向けの@sveltejs/adapter-static
Vercel向けの@sveltejs/adapter-vercel

その他のプラットフォーム向けに、コミュニティが提供する追加のアダプターも存在します。

アダプターの使用

アダプターは svelte.config.js で指定されます:

// svelte.config.js
import adapter from 'svelte-adapter-foo';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	kit: {
		adapter: adapter({
			// adapter options go here
		})
	}
};

export default config;

コード解説

上記のコードは SvelteKit プロジェクトの設定を定義するものです。コードの主な要素と目的を解説します：

import adapter from 'svelte-adapter-foo';

svelte-adapter-foo というアダプターをインポートしています。
通常、このような名前のアダプターは存在しないので、これは仮想的なアダプター名か、カスタムアダプターを示していると思われます。

/** @type {import('@sveltejs/kit').Config} */

これは TypeScript の型注釈コメントです。
config オブジェクトが @sveltejs/kit の Config 型に準拠することを示しています。

const config = { ... }

SvelteKit の設定オブジェクトを定義しています。

kit: { ... }

SvelteKit 固有の設定を含むオブジェクトです。

adapter: adapter({ ... })

使用するアダプターとその設定を指定しています。
アダプターは、SvelteKit アプリケーションを特定の環境（Node.js、静的サイト、Cloudflare Workers など）にデプロイするためのものです。

// adapter options go here

このコメントは、アダプター固有のオプションをここに追加できることを示しています。

export default config;

設定オブジェクトをデフォルトエクスポートとしてエクスポートしています。

この設定ファイルの役割：

SvelteKit プロジェクトのビルドとデプロイ方法を定義します。
使用するアダプターを指定し、そのアダプター固有の設定を行います。

注意点と考慮事項：

アダプター名：

svelte-adapter-foo は一般的なアダプター名ではありません。実際のプロジェクトでは、@sveltejs/adapter-auto、@sveltejs/adapter-node、@sveltejs/adapter-static などの実在するアダプターを使用するべきです。

アダプターオプション：

実際の使用時には、コメントアウトされている部分に適切なオプションを追加する必要があります。これらのオプションは選択したアダプターによって異なります。

追加の設定：

必要に応じて、kit オブジェクト内に他の設定（例：paths、prerender、csp など）を追加できます。

環境固有の設定：

開発環境と本番環境で異なる設定が必要な場合、条件分岐を追加して環境ごとに適切な設定を行うことができます。

このファイルは SvelteKit プロジェクトの中心的な設定ファイルであり、プロジェクトのビルドとデプロイ戦略を決定する重要な役割を果たします。実際のプロジェクトでは、使用する具体的なアダプターとそのオプションを慎重に選択し、設定する必要があります。

プラットフォーム固有のコンテキスト

一部のアダプターは、リクエストに関する追加情報にアクセスできる場合があります。例えば、Cloudflare Workersは、KV名前空間などを含むenvオブジェクトにアクセスできます。これは、フックやサーバールートで使用されるRequestEventにplatformプロパティとして渡すことができます – 各アダプターのドキュメントを参照して、詳細を確認してください。