Svelte入門：SvelteKitでのNetlify

今日は、SvelteKitでのNetlifyについて解説しています。

背景

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

Netlifyとは

Netlifyは、ウェブサイトやウェブアプリケーションのホスティングと継続的デプロイメントを提供する人気のあるプラットフォームです。主な特徴は以下の通りです：

1. 静的サイトホスティング: HTMLやJavaScript、CSSなどの静的ファイルを簡単にホストできます。
2. 継続的デプロイメント: GitHubやGitLabなどのリポジトリと連携し、コードの変更を自動的にデプロイします。
3. サーバーレス機能: NetlifyのFunctionsを使用して、バックエンド機能を追加できます。
4. カスタムドメイン: 独自ドメインの使用や、無料のSSL証明書の提供があります。
5. フォーム処理: 静的サイトでもフォーム送信を処理できる機能があります。
6. CDN: グローバルCDNを使用して、高速なコンテンツ配信を実現します。
7. プレビュー機能: プルリクエストごとにプレビュー環境を自動生成します。

Netlifyは特に、JAMstackアーキテクチャを採用したプロジェクトに適しており、多くの開発者やチームに利用されています。

Netlifyへのデプロイ

Netlifyにデプロイするには、adapter-netlifyを使用してください。 このアダプターはadapter-autoを使用する際にデフォルトでインストールされますが、プロジェクトに明示的に追加することで、Netlify固有のオプションを指定できるようになります。

使い方

npm i -D @sveltejs/adapter-netlify でインストールし、アダプターを svelte.config.js に追加します。

// svelte.config.js
import adapter from '@sveltejs/adapter-netlify';

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
		})
	}
};

次に、プロジェクト ルートに netlify.toml ファイルがあることを確認します。これにより、次のサンプル構成に従って、build.publish 設定に基づいて静的アセットを書き込む場所が決定されます。

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

netlify.tomlファイルが存在しない場合、またはbuild.publishの値が設定されていない場合、デフォルト値として"build"が使用されます。Netlify UIでパブリッシュディレクトリを別の値に設定している場合は、netlify.tomlでもその値を設定するか、デフォルト値の"build"を使用する必要があります。

node バージョン

新しいプロジェクトでは、デフォルトで現在のNode LTSバージョンが使用されます。しかし、しばらく前に作成したプロジェクトをアップグレードする場合、古いバージョンのままになっている可能性があります。最新のNodeバージョンを手動で指定する方法については、Netlifyのドキュメントを参照してください。

Netlify Edge Functions

SvelteKitはNetlify Edge Functionsをサポートしています。adapter関数にedge: trueオプションを渡すと、サーバーサイドレンダリングはサイト訪問者の近くにデプロイされるDeno基盤のエッジ関数で行われます。false（デフォルト値）に設定すると、サイトはNode基盤のNetlify Functionsにデプロイされます。

// svelte.config.js
import adapter from '@sveltejs/adapter-netlify';

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 代替

SvelteKitが直接提供する機能を使用してアプリケーションを構築することができ、Netlifyの機能に依存する必要はありません。SvelteKitのバージョンの機能を使用することで、開発モードでの利用、統合テストでのテスト、そして将来Netlify以外のアダプターに切り替える場合の互換性が確保できます。ただし、状況によってはNetlifyバージョンの機能を使用することが有益な場合もあります。例えば、すでにNetlifyでホストされているアプリケーションをSvelteKitに移行する場合などです。

リダイレクトルール

コンパイル時に、リダイレクトルールが自動的に_redirectsファイルに追加されます。（まだ存在しない場合は作成されます。）これは以下のことを意味します：

• netlify.toml内の[[redirects]]は一致することはありません。_redirectsがより高い優先順位を持つためです。したがって、常にルールは_redirectsファイルに記述してください。
• _redirectsには/* /foobar/:splatのようなカスタムの「キャッチオール」ルールを含めるべきではありません。そうしないと、Netlifyは最初に一致するルールのみを処理するため、自動的に追加されたルールが適用されなくなってしまいます。

Netlify Forms

1. こちらで説明されているように、NetlifyのHTMLフォームを作成します。例えば、/routes/contact/+page.svelteとして作成します。（隠しのform-name入力要素を追加することを忘れないでください！）
2. Netlifyのビルドボットはデプロイ時にHTMLファイルを解析するため、フォームはHTMLとしてプリレンダリングされている必要があります。contact.svelteにexport const prerender = trueを追加してそのページだけをプリレンダリングするか、kit.prerender.force: trueオプションを設定してすべてのページをプリレンダリングすることができます。
3. Netlifyフォームに<form netlify ... action="/success">のようなカスタムの成功メッセージがある場合、対応する/routes/success/+page.svelteが存在し、プリレンダリングされていることを確認してください。

Netlify Functions

このアダプターを使用すると、SvelteKitのエンドポイントはNetlify Functionsとしてホストされます。Netlify関数ハンドラーには、Netlify Identityの情報を含む追加のコンテキストがあります。このコンテキストには、フックや+page.serverまたは+layout.serverエンドポイント内のevent.platform.contextフィールドを通してアクセスできます。アダプター設定でedgeプロパティがfalseの場合はこれらはサーバーレス関数となり、trueの場合はエッジ関数となります。

+page.server.js
export const load = async (event) => {
	const context = event.platform.context;
	console.log(context); // shows up in your functions log in the Netlify app
};

さらに、独自の Netlify 関数を追加するには、それらの関数用のディレクトリを作成し、netlify.toml ファイルに構成を追加します。

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

[functions]
	directory = "functions"

トラブルシューティング

ファイルシステムへのアクセス

エッジデプロイメントではfsを使用することはできません。 サーバーレスデプロイメントでは使用できますが、プロジェクトからデプロイメントにファイルがコピーされないため、期待通りに動作しません。代わりに、$app/serverからread関数を使用してファイルにアクセスしてください。readはエッジデプロイメント内では機能しません（将来変更される可能性があります）。 別の方法として、該当のルートをプリレンダリングすることもできます。

おわりに

今日は、 SvelteKitでのNetlifyについて解説しました。