SvelteKitで作成した静的サイトをFirebaseHostingにデプロイする

2023-01-17

はじめに

最近Svelteを触ってみたいという理由でポートフォリオサイトをSvelteKitで書き直していた。

ひとまずトップページの書き換えが済んだのでFirebaseHostingにデプロイしたが、その際の手順を残しておく。

前提

@sveltejs/kitのバージョンは現在最新の1.1.1を使用する
SvelteKitのプロジェクト作成はnpm create svelte@latestなどで済んでいることとする
Firebaseの設定はfirebase initなどで済んでいることとする
- 詳しくは公式ドキュメントを参照

手順

adapterのインストール

SvelteKitアプリをデプロイするには、デプロイ先に合ったadapterが必要になる。今回は静的なサイトをデプロイするので@sveltejs/adapter-staticというadapterを使用する。

npm i -D @sveltejs/adapter-static

ちなみに「sveltekit adapter firebase」などで検索するとjthegedus/svelte-adapter-firebaseというパッケージがヒットするが、こちらはサイトをCloudFunctionsで動かしたい場合に使うのが主な用途っぽい。

svelteの設定ファイルを編集

次にsvelte.config.js(ts)ファイルにadapterの設定を記述する。adapterのインポート先を@sveltejs/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;

ビルド成果物の出力ディレクトリはデフォルトでbuildになっている。adapter()に渡す引数で出力先を変更することができるので詳しくはドキュメントを参照されたい。今回はこのまま進める。

プリレンダリング設定

今回は静的サイトなのでプリレンダリングの設定をルートのlayoutファイルに記述する必要がある。

// src/routes/+layout.js(ts)

export const prerender = true;
export const trailingSlash = 'always';

また、この際にtrailingSlashの設定も一緒に記述しておく。SvelteKitではデフォルトでURLから末尾のスラッシュを取り除く挙動になっており、上記のtrailingSlashの設定をしておくことで/hogeに対するリクエスト時に/hoge.htmlではなく/hoge/index.htmlを返すためのファイルが生成されるようになる。

trailingSlashについてはドキュメントに記述があるので、各自のサイトに合った設定をしていただきたい。

https://kit.svelte.jp/docs/page-options#trailingslash

firebase.jsonの設定

firebase initコマンドによって自動生成したもを一応載せておく。hosting.publicの設定がSvelteKitの出力先ディレクトリと一致していることを確認していただきたい。

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}