何をするか？
Svelte/SvelteKit を使ったプロジェクト全体を、完全な静的リソースの形にビルドする SSG (Static Site Genration) 機能の使い方について説明します。 AWS の S3 ストレージのようなファイルの配信機能しか持たないサービスで Web サイトをホスティングする場合、SSG によるビルドが必要になります。
ちなみに、Cloudflare Pages や Vercel のようなモダンなホスティングサービス上で Svelte アプリをビルドする場合は、このような設定は一切行わずにデプロイすることができます（ゼロコンフィグ）。 できればそういったサービスを使うことを推奨しますが、ここでは何らかの事情でそういった便利なサービスを使用できないケースを想定しています（会社のポリシーで S3 しか使えないなど）。
SvelteKit の SSG 設定
adapter-static のインストール
SvelteKit の @sveltejs/adapter-static というモジュールが SSG 機能を提供しているので、まずはこのモジュールをインストールします。
$ npm install --save-dev @sveltejs/adapter-static
adapter-static の有効化
ビルド設定ファイル (svelte.config.js) で、adapter-static を使用するように設定します。
プロジェクトの初期状態では、次のような感じで adapter-auto というモジュールが使われるように設定されていると思います。
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter()
}
};
export default config;adapter-auto は、Vercel や Cloudflare Pages などのサービス上でビルドするときに使えるモジュールですが、SSG するときには使えないので、ここを adapter-static に置き換えてやります。
import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
adapter: adapter()
}
};
export default config;各ページのレンダリング設定
SSG によるビルドを行うためには、さらに各ページ (routes) でプリレンダリングを行う想定であることを宣言しておく必要があります。
これは、prerender という公開変数に true をセットするだけでよいのですが、次のような +layout.js ファイルを作成して、全ページにまとめて適用してしまうのが簡単です。
// SSG (Static Site Generation) のためプリレンダリングを有効化
export const prerender = true;
// すべてのページを index.html ファイルとして出力する
export const trailingSlash = 'always';上記の例では、ついでに trailingSlash の設定も追加しています。
この設定により、各ページの HTML は hoge.html ではなく、hoge/index.html という形で出力されるようになり、URL の末尾に .html を付けずに Web ページにアクセスできるようになります（ホスティング環境によっては、この設定が不要な場合もあります）。
SSG によるビルド
上記の設定が終わったら、あとは npm run build (vite build) でビルドを実行するだけです。
$ npm run build
うまくいくと、build ディレクトリに HTML ファイルなどが生成されます。
これらのファイルを S3 などにデプロイすれば OK です。
build/
+-- _app/
+-- favicon.png
+-- index.html
+-- page1/index.html
+-- page2/index.html
ローカルでテストサーバーを立てて表示を確認したいときは、次のようにします。
$ npm run preview -- --open
できたー ٩(๑❛ᴗ❛๑)۶ わーぃ