こんにちは。よっしーです(^^)
今日は、SvelteKitでのアダプタ作成について解説しています。
背景
SvelteKitでのアダプタ作成について調査する機会がありましたので、その時の内容を備忘として記事に残しました。
アダプタとは
SvelteKitにおけるアダプタは、アプリケーションを特定の環境やプラットフォームにデプロイするために重要な役割を果たします。以下にSvelteKitのアダプタについての主要な情報をお伝えします：
- 目的：
アダプタは、SvelteKitアプリケーションを特定の環境（例：Node.js、静的ホスティング、サーバーレス関数など）で動作させるためのインターフェースを提供します。 - 主要なアダプタ：
- @sveltejs/adapter-auto: 自動的に適切なアダプタを選択します。
- @sveltejs/adapter-node: Node.jsサーバー用
- @sveltejs/adapter-static: 静的サイト生成（SSG）用
- @sveltejs/adapter-vercel: Vercelプラットフォーム用
- @sveltejs/adapter-netlify: Netlify用
- 使用方法：
svelte.config.jsファイルでアダプタを指定します。例えば：
import adapter from '@sveltejs/adapter-node';
export default {
kit: {
adapter: adapter()
}
};- カスタムアダプタ：
特定の環境に合わせてカスタムアダプタを作成することも可能です。 - ビルドプロセス：
アダプタは、npm run buildコマンドを実行したときに、指定された環境に適したフォーマットでアプリケーションをビルドします。 - 環境固有の設定：
各アダプタには、特定の環境に最適化するための独自のオプションがあることがあります。
アダプタを適切に選択することで、SvelteKitアプリケーションを様々な環境やプラットフォームに効率的にデプロイできます。特定のデプロイ環境や要件がある場合は、それに最適なアダプタを選ぶことが重要です。
アダプタ作成
お好みの環境用のアダプターがまだ存在しない場合は、独自のアダプターを構築することができます。あなたの環境に似たプラットフォーム用のアダプターのソースコードを参考にし、それを出発点としてコピーすることをお勧めします。
アダプターパッケージは、Adapterを作成する以下のAPIを実装します：
/** @param {AdapterSpecificOptions} options */
export default function (options) {
/** @type {import('@sveltejs/kit').Adapter} */
const adapter = {
name: 'adapter-package-name',
async adapt(builder) {
// adapter implementation
},
async emulate() {
return {
async platform({ config, prerender }) {
// the returned object becomes `event.platform` during dev, build and
// preview. Its shape is that of `App.Platform`
}
}
},
supports: {
read: ({ config, route }) => {
// Return `true` if the route with the given `config` can use `read`
// from `$app/server` in production, return `false` if it can't.
// Or throw a descriptive error describing how to configure the deployment
}
}
};
return adapter;
}これらのうち、nameとadaptは必須です。emulateとsupportsはオプションです。
adaptメソッド内で、アダプタが行うべき事項がいくつかあります：
- ビルドディレクトリをクリアする
builder.writeClient、builder.writeServer、builder.writePrerenderedを使用してSvelteKitの出力を書き込む- 以下を行うコードを出力する：
${builder.getServerDirectory()}/index.jsからServerをインポートするbuilder.generateManifest({ relativePath })で生成されたマニフェストを使用してアプリをインスタンス化する- プラットフォームからのリクエストをリッスンし、必要に応じて標準的なRequestに変換し、
server.respond(request, { getClientAddress })関数を呼び出してResponseを生成し、それに応答する server.respondに渡されるplatformオプションを通じて、プラットフォーム固有の情報をSvelteKitに公開する- 必要に応じて、ターゲットプラットフォームで動作するように
fetchをグローバルにシムする。SvelteKitはundiciを使用できるプラットフォーム用に@sveltejs/kit/node/polyfillsヘルパーを提供している - 必要に応じて、ターゲットプラットフォームで依存関係をインストールする必要がないように出力をバンドルする
- ユーザーの静的ファイルと生成されたJS/CSSを、ターゲットプラットフォームの正しい場所に配置する
可能な限り、アダプタの出力をbuild/ディレクトリの下に配置し、中間出力を.svelte-kit/[adapter-name]の下に配置することをお勧めします。
この情報は、SvelteKitのアダプタを開発する際の主要な要件と推奨事項を示しています。特定のプラットフォームやホスティング環境に合わせてカスタムアダプタを作成する場合に、これらの指針に従うことで、SvelteKitアプリケーションを効果的にデプロイできるアダプタを構築できます。
コード解説
このコードは、SvelteKitのカスタムアダプタを定義するためのテンプレートです。各部分について解説します：
- 関数定義:
/** @param {AdapterSpecificOptions} options */
export default function (options) {これは、アダプタ固有のオプションを受け取る関数です。
- アダプタオブジェクト:
/** @type {import('@sveltejs/kit').Adapter} */
const adapter = {SvelteKitのAdapterインターフェースに準拠したオブジェクトを定義しています。
- アダプタのプロパティ:
name: アダプタパッケージの名前を指定します。adapt: アダプタの主要な実装を行うメソッドです。emulate: 開発環境でのエミュレーションを提供するオプションのメソッドです。supports: 特定の機能のサポート状況を確認するオプションのオブジェクトです。
adaptメソッド:
async adapt(builder) {
// adapter implementation
}ここでアダプタの主要な実装を行います。
emulateメソッド:
async emulate() {
return {
async platform({ config, prerender }) {
// プラットフォーム固有の実装
}
}
}開発、ビルド、プレビュー時にevent.platformとなるオブジェクトを返します。
supportsオブジェクト:
supports: {
read: ({ config, route }) => {
// `read`機能のサポート状況を確認するロジック
}
}特定の機能（この場合はread）がサポートされているかどうかを判断するロジックを実装します。
- アダプタの返却:
return adapter;設定されたアダプタオブジェクトを返します。
このコードは、SvelteKitのカスタムアダプタを作成するための基本的な構造を提供しています。実際の使用時には、特定のホスティング環境やプラットフォームに合わせてadaptメソッドや他のプロパティを適切に実装する必要があります。
おわりに
今日は、 SvelteKitでのアダプタ作成について解説しました。
何か質問や相談があれば、コメントをお願いします。また、エンジニア案件の相談にも随時対応していますので、お気軽にお問い合わせください。
それでは、また明日お会いしましょう(^^)
コメント