SvelteKit を使った静的サイトへのデプロイ

はじめに

先日、以下の投稿で、SvelteKitを使いましたが、今回は実際に
静的サイトとしてデプロイするための準備について記載します。

Adapters

公式サイトによると、デプロイする前に環境に合わせて設定をする必要があるようです。

静的サイトにデプロイするための準備

インストール

アダプターを使うため、インストールをします。

npm install -D @sveltejs/adapter-static

設定を修正する

svelte.config.js ファイルを、以下のように修正します。

- import adapter from '@sveltejs/adapter-auto';
+ import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: [
		preprocess({
		  postcss: true,
		}),
	  ],

	kit: {
-		adapter: adapter()
+		adapter: adapter({
+    		pages: 'build',
+			assets: 'build',
+			fallback: 'index.html',
+			precompress: false,
+			strict: true
+		})
	}
};

export default config;

ビルドする

設定は以上です。ここまで終わったらビルドしましょう。

npm run build

こんな風に、index.htmlが生成されていればOKです。

最後に

無事、静的コンテンツにすることができました。
この後は、これをSpring Bootに組み込んで、みたいと思っています。