[SvelteKit + Firebase] CLI 導入から静的サイトのデプロイまで

前提

• Firebase で使用するアカウント・プロジェクトは作成してある
• デプロイする SvelteKit のアプリケーションは開発してある
• 開発したアプリケーションが動的ルーティング等を含まず静的であること

Firebase CLI の導入

Firebase CLI をインストールする

今回は公式ドキュメントにおいて新規デベロッパーに推奨されている方法でインストールを行います。

Windows

Windows 用 Firebase CLI バイナリをダウンロードする。

macOS または Linux

次の cURL コマンドを実行します。

curl -sL https://firebase.tools | bash

📝 Tips: Password が分からない！

他の記事で見かけたトラブルとして「Password が分からない」というものがありました。
これは Firebase のアカウント等の Password ではなく、使っている PC の Password です。

インストールを確認する

firebase --version

バージョンが表示されれば問題ありません。

Firebase CLI にログイン

下記コマンドを実行するとログインのためにウェブページが開きます。

firebase login

複数のアカウントを持っている場合は、Firebase で使用しているアカウントを選択して下さい。
その後、アカウントが正しいかどうかを下記のコマンドで確認します。

firebase projects:list

Firebase コンソール に表示されているプロジェクトと同様のものが表示されていれば問題ありません。

SvelteKit アプリ側の調整

@sveltejs/adapter-static の導入

今回は静的なサイトをデプロイするため、@sveltejs/adapter-static という adapter を使用します。

yarn add -D @sveltejs/adapter-static
# または
npm i -D @sveltejs/adapter-static

svelte.config.js の編集

デフォルトの場合、adapter は @sveltejs/adapter-auto を使用していると思います。
今回は先にインストールした @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: adapter()
    }
};

export default config;

プリレンダリングの設定

Firebase Hosting にデプロイする静的サイトなのでプリレンダリングの設定を行います。
src/routes 配下に +layout.js または +layout.ts ファイルを作成して、以下のように設定します。

src/routes/+layout.js(ts)

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

src/routes に +layout.js(ts) を作成したため、このオプションで全てのページをプリレンダリングすることが出来ます。

Firebase CLI でデプロイ

Firebase プロジェクトの初期化

firebase init hosting

上記のコマンドを入力すると色々とオプションが表示されるので一つずつ答えていきましょう。
一例としては以下の通りです。

📝 Tips: 応答の一例

（Firebase 側のプロジェクトは作成済みのものとして進めています）

? Please select an option：

-> Use an existing project

? Select a default Firebase project for this directory：

-> (作成した Firebase プロジェクトを選択する)

? What do you want to use as your public directory?

build

? Configure as a single-page app (rewrite all urls to /index.html)?

N

? Set up automatic builds and deploys with GitHub?

N
（自動デプロイは設定した方が良いと思うが、取り急ぎデプロイだけ済ませたいので設定しない）

? File build/index.html already exists. Overwrite? (y/N)

N

デプロイ

ここまで来たらデプロイはコマンド一発です。

firebase deploy

今回は自動デプロイを設定していないので変更後はビルドしてから再び上記のコマンドでデプロイすれば更新されていることも確認できるかと思います。

おわり

これで SvelteKit で作成した静的なウェブアプリケーションを Firebase Hosting にデプロイすることができました！

---

最後まで読んで頂きありがとうございます。

この記事が役に立ったら 🩷 をもらえると嬉しいです！