Netlify

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

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

使い方permalink

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

ts
import adapter from '@sveltejs/adapter-netlify';
Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.

export default {
	kit: {
		// default options are shown
		adapter: adapter({
			// if true, will create a Netlify Edge Function rather
			// than using standard Node-based functions
			edge: 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: false
		})
	}
};

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

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

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

Node versionpermalink

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

Netlify Edge Functionspermalink

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

ts
import adapter from '@sveltejs/adapter-netlify';
Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.2307Cannot find module '@sveltejs/adapter-netlify' or its corresponding type declarations.

export default {
	kit: {
		adapter: adapter({
			// will create a Netlify Edge Function using Deno-based
			// rather than using standard Node-based functions
			edge: true
		})
	}
};

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

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

リダイレクトルール(Redirect rules)permalink

コンパイル時に、リダイレクトルールは自動で _redirects ファイルに追記されます (もし存在しない場合は、作成されます)。つまり:

• _redirects のほうが優先度が高いため、netlify.toml にある [[redirects]] には決してマッチしません。そのため、ルールは常に _redirects ファイルに記載してください。
• _redirects には、/* /foobar/:splat のようなカスタムの "catch all" ルールを置くべきではありません。そうしないと、自動で追加されたルールが適用されなくなります。Netlify は最初にマッチしたルールだけを処理するからです。

Netlify Formspermalink

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 Functionspermalink

この 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 となります。

ts
export const load = async (event) => {
Parameter 'event' implicitly has an 'any' type.7006Parameter 'event' implicitly has an 'any' type.
	const context = event.platform.context;
	console.log(context); // shows up in your functions log in the Netlify app
};

ts
export const load = async (event) => {
Parameter 'event' implicitly has an 'any' type.7006Parameter 'event' implicitly has an 'any' type.
	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"

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

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

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

serverless デプロイメントでは fs を使用できますが、ファイルがプロジェクトからデプロイメントにコピーされないため、期待通りには動作しないでしょう。代わりに $app/server の read 関数を使用してファイルにアクセスしてください。edge デプロイメントでは read は動作しません（将来的に変更される可能性があります）。

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