Netlify

Netlify にデプロイする場合は、adapter-netlify を使用します。

adapter-auto を使用している場合、この adapter は自動でインストールされますが、この adapter 自体をプロジェクトに追加すれば Netlify 固有のオプションを指定できるようになります。

使い方

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

import import adapteradapter from '@sveltejs/adapter-netlify';

/** @type {import('@sveltejs/kit').Config} */
const const config: Configconfig = {
	Config.kit?: KitConfig | undefined
SvelteKit options.
@see
https://svelte.dev/docs/kit/configurationkit: {
		// default options are shown
		KitConfig.adapter?: Adapter | undefined
Your adapter is run when executing vite build. It determines how the output is converted for different platforms.
@default
undefinedadapter: import adapteradapter({
			// if true, will create a Netlify Edge Function rather
			// than using standard Node-based functions
			edge: booleanedge: false,

			// if true, will split your app into multiple functions
			// instead of creating a single one for the entire app.
			// if `edge` is true, this option cannot be used
			split: booleansplit: false
		})
	}
};

export default const config: Config
config;

そして、プロジェクトの root に netlify.toml ファイルを置くのを忘れないでください。このファイルの build.publish に基づいて静的なアセットをどこに書き込むか決定します。こちらのサンプルの設定をご覧ください:

[build]
	command = "npm run build"
	publish = "build"

netlify.toml ファイルが見つからない、もしくは build.publish の値が見つからない場合、"build" のデフォルト値が使用されます。Netlify の UI で publish ディレクトリを他の場所に設定する場合は、netlify.toml にも同じ場所を設定するか、"build" のデフォルト値を使用する必要があることにご注意ください。

Node version

新しいプロジェクトではデフォルトで現時点の Node LTS バージョンが使用されます。しかし、少し前に作成したプロジェクトをアップグレードする場合、古いバージョンで止まってしまうかもしれません。手動で現時点の Node バージョンを指定する場合、詳細は Netlify のドキュメントをご参照ください。

Netlify Edge Functions

SvelteKit は Netlify Edge Functions をサポートしています。adapter 関数に edge: true オプションを渡すと、サイト訪問者に近い場所にデプロイされる Deno ベースの edge function でサーバーサイドレンダリングが行われるようになります。false を設定した場合 (デフォルト)、サイトは Node ベースの Netlify Functions にデプロイされます。

import import adapteradapter from '@sveltejs/adapter-netlify';

/** @type {import('@sveltejs/kit').Config} */
const const config: Configconfig = {
	Config.kit?: KitConfig | undefined
SvelteKit options.
@see
https://svelte.dev/docs/kit/configurationkit: {
		KitConfig.adapter?: Adapter | undefined
Your adapter is run when executing vite build. It determines how the output is converted for different platforms.
@default
undefinedadapter: import adapteradapter({
			// will create a Netlify Edge Function using Deno-based
			// rather than using standard Node-based functions
			edge: booleanedge: true
		})
	}
};

export default const config: Config
config;

SvelteKit の機能を代替する Netlify の機能

Netlify の機能に依存することなく、SvelteKit が直接提供する機能を使ってアプリを構築することができます。こういった機能は SvelteKit のほうを選択すると、開発モードでその機能を使用でき、インテグレーションテストが可能になり、Netlify から切り替えることになった場合に他の adapter で動作させることができます。しかし、シナリオによっては Netlify のほうの機能を使用したほうが有益な場合もあります。例えば、すでに Netlify でホストされているアプリを SvelteKit に移行する場合です。

_headers and _redirects

The _headers and _redirects files specific to Netlify can be used for static asset responses (like images) by putting them into the project root folder. You can also use [[redirects]] in your netlify.toml.

Netlify Forms

1. こちらにあるように、例えば /routes/contact/+page.svelte に、Netlify HTML form を作成します。(hidden の form-name input 要素を追加するのを忘れずに！)
2. Netlify の build bot はデプロイ時にあなたの HTML ファイルをパースします。つまり、あなたの form は HTML としてプリレンダリングされるようにしておかないといけません。あなたの contact.svelte に export const prerender = true を追加してそのページだけプリレンダリングするか、または kit.prerender.force: true オプションを設定して全てのページをプリレンダリングするようにしておくか、で対応できます。
3. あなたの Netlify form に <form netlify ... action="/success"> のようなカスタムの成功メッセージがある場合、それに対応する /routes/success/+page.svelte が存在しプリレンダリングされるか確認してください。

Netlify Functions

この adapter によって、SvelteKit エンドポイントは Netlify Functions としてホストされます。Netlify function ハンドラには追加のコンテキストがあり、Netlify Identity 情報が含まれています。このコンテキストは、あなたの hooks や +page.server と +layout.server エンドポイント の中で event.platform.context フィールドを介してアクセスできます。adapter config の edge プロパティが false の場合はserverless functions、true の場合は edge functions となります。

/** @type {import('./$types').PageServerLoad} */
export const load = async (event) => {
	const context = event.platform?.context;
	console.log(context); // shows up in your functions log in the Netlify app
};

import type { PageServerLoad } from './$types';

export const load: PageServerLoad = async (event) => {
	const context = event.platform?.context;
	console.log(context); // shows up in your functions log in the Netlify app
};

さらに、ディレクトリを追加して netlify.toml に設定を追加することで、独自の Netlify functions を追加することができます。例えば:

[build]
	command = "npm run build"
	publish = "build"

[functions]
	directory = "functions"

トラブルシューティング

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

edge デプロイメントでは fs を使用することはできません。

serverless デプロイメントでは fs を使用できますが、ファイルがプロジェクトからデプロイメントにコピーされないため、期待通りには動作しないでしょう。代わりに $app/server の read 関数を使用してファイルにアクセスしてください。この関数は、edge デプロイメントでも、デプロイされたパブリックアセットのロケーションからファイルを読み込むことで動作します。

その代わりに、fs を使用する必要があるルート(route)についてはプリレンダリングする必要があります。