この記事はRust+SvelteKit+CDK で RSS 要約アプリを作ってみる Advent Calendar 2025の 16 日目の記事になります。
また、筆者が属している株式会社野村総合研究所のアドベントカレンダーもあるので、ぜひ購読ください。
はじめに
SvelteKit はデフォルトでは SSR（サーバーサイドレンダリング）向けのフレームワークですが、設定次第ではSSG（静的サイトジェネレーター）としても機能します。SSG でサイトを生成すると、あらかじめレンダリングをして HTML ファイルを準備できるので、サイトの公開にサーバが不要で、高速にページを表示することができます。
今回は、SvelteKit を SSG モードで動作させ、AWS S3 + CloudFront で配信するための設定方法を解説します。静的サイトなので S3 を使うことができます。HTML（と CSS 一式）を S3 上に配置し、Cloudfront 経由で公開します。
SvelteKit と Adapter
Adapter
SvelteKit はビルド成果物をどこで動かすかをAdapterというプラグインで切り替えます。
-
adapter-auto(デフォルト): Vercel や Netlify などの環境を自動検知します -
adapter-node: Node.js サーバーとして動かします -
adapter-static: すべてのページを事前に HTML として生成します
今回は S3 でホスティングするため、adapter-staticを選択します。
Prerender
SvelteKit で SSG を行うには、各ページ（またはレイアウト）で「このページはプリレンダリング（事前生成）する」と宣言する必要があります。
設定はルート単位で指定できます。今回はすべてのページを対象としたいため、トップレベルで設定します。
設定自体はexport const prerender = true; という一行を書くだけです。
SumaRSS での実装
adapter-static の導入
まずパッケージをインストールします。
npm install -D @sveltejs/adapter-static
次に svelte.config.js を書き換えます。
import adapter from "@sveltejs/adapter-static";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
/** @type {import('@sveltejs/kit').Config} */
const config = {
preprocess: vitePreprocess(),
kit: {
// adapter-staticを使用
adapter: adapter(),
},
};
export default config;
全ページを SSG 化する
前述の通り、export const prerender = true;を書いたルートについては SSG が有効になります。トップレベルの+layout.tsに記述すると、このファイルはすべてのルートに対して適用されるので、すべてのルートを SSG の対象にすることができます。
// src/routes/+layout.ts
// これですべてのページがビルド時にHTML化される
export const prerender = true;
ビルドとデプロイ
npm run build
これを実行すると、build/ ディレクトリに index.html やアセットファイルが生成されます。
この build/ フォルダの中身をそのまま S3 にアップロードします。SSG の場合、URL 構成とディレクトリ構成は一致するので、例えばbuild/about/index.htmlというファイルは/aboutという URL で公開されます。
あらかじめデータをフェッチして HTML に埋め込みたい場合
サイトのコンテンツの全てをソースコードとして書いておくのではなく、外部のデータソースから取得して埋め込んで生成したいときもあると思います（DB の内容を表示するなど）。
SSG の場合、ビルドした段階で HTML の内容は確定するので、ビルド時にデータを取得して HTML に埋め込むことになります。データの取得部分は、SSG かそうでないかを意識する必要がなく、SvelteKit 側がよしなに吸収してくれます（SSG であればビルド時点のものを、そうでなければレンダリング時のものを出してくれる）。
ただし、パスパラメータ（/blog/[slug]のような動的ルート）の場合は、ビルド時にすべてのパターンに対して事前にレンダリングしなければならないため、そのための記述が必要になります。その点について次回の記事で解説します。