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

はじめに

最近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"
      }
    ]
  }
}

ビルドとデプロイ

以上の設定の上、以下のコマンドでbuildディレクトリにビルド成果物が作成された。

npm run build

これをfirebase deployコマンドでそのままデプロイしても良いし、firebase initでGitHubActionsのファイルも自動生成しているのであればコミットしてプッシュすれば自動デプロイが走ってデプロイが完了する。

おわり

これでポートフォリオサイトがSvelte/SvelteKit製になった。公式ドキュメントが日本語対応しているので機能について一通り目を通すことができたし、Svelteを触るという当初の目的は達成できた。あとはプロフィールと問い合わせページがまだ書き換え途中なので早くやり切ってしまいたい。

参考

• Adaptersのドキュメント
  • https://kit.svelte.jp/docs/adapters
• @sveltejs/adapter-staticのREADME
  • https://github.com/sveltejs/kit/tree/master/packages/adapter-static
• trailingSlashの設定について
  • https://kit.svelte.jp/docs/page-options#trailingslash