この章では、SvelteKitがビルドしたWebサイトとFirebaseで作成したプロジェクトを接続し、Firebase Hostingでインターネットに公開する方法を学習します。

2-1 Firebaseの準備

FirebaseはGoogleの提供するWebアプリケーション開発プラットフォームです。 今回のチュートリアルの内容は無料のSparkプランで使用できます。 GoogleアカウントでFirebaseの使用を開始し、コンソールからプロジェクトを作成する準備をしましょう。

Firebase プロジェクト

1. Firebaseの使用を開始します
   https://firebase.google.com/?hl=ja
2. コンソールでプロジェクトを追加します
   https://console.firebase.google.com/?hl=ja
3. プロジェクトに名前を付けて続行します。
   ここではstatic-webとしました。
4. Googleアナリティクスを有効にするかどうか尋ねられます。
   今回は使用しないので、チェックを外してプロジェクトを作成します。
5. 新しいプロジェクトの準備ができたら、続行します。
6. プロジェクトページが開くことを確認します。

Firebase CLI

1. コマンドラインインターフェイスをインストールします
   https://firebase.google.com/docs/cli?hl=ja#install_the_firebase_cli
2. Firebase CLIにログインしてテストするところまで進めば準備完了です。

2-2 Firebaseに接続する

ここでは、SvelteKitのプロジェクトとFirebaseのプロジェクトを接続します。

FirebaseのプロジェクトIDを確認する

WebブラウザでFirebaseのプロジェクトページを表示し、プロジェクトの設定画面を開きます。 プロジェクトIDの欄に表示されているIDを確認します。

SvelteKitプロジェクトと接続する

SvelteKitプロジェクト内で、Firebaseとの接続設定を行いましょう。

• trySvelteKit/static-web/フォルダでターミナルを起動します。
• firebase init hosting コマンドを実行し、初期設定を行います。
  • Please select an option と尋ねられるので、カーソルキーでUse an existing projectを選択し、エンターキーで進みます
  • Firebaseプロジェクトの一覧が表示されるので、カーソルキーで該当するプロジェクトIDを選択し、エンターキーで進みます
  • 公開するファイルのフォルダを尋ねられるので、
    buildと入力して、エンターキーで進みます
  • シングルページアプリケーションとして構成するかどうか尋ねられるので、
    Nを入力してエンターキーで進みます
  • 自動ビルド設定を尋ねられるので、
    Nを入力してエンターキーで進みます
  • indexファイルを上書きするかどうか尋ねられるので、
    Nを入力してエンターキーで進みます

firebase.jsonと.firebasercファイルが作成されFirebaseプロジェクトとの接続が完了します

2-3 Webサイトを公開する

ここまでで、SvelteKitがビルドしたWebサイトをインターネットに公開する準備ができました。 Firebaseのdeployコマンドを使って、Firebase HostingにWebサイトを公開(デプロイ)しましょう。

• trySvelteKit/static-web/フォルダでターミナルを開きます
• firebase deploy コマンドを実行します
• 成功すると、Deploy complete!のメッセージとともにProject ConsoleへのURLと、Hosting URLが表示されます。
• Hosting URLをWebブラウザで開いてWelcomeページが表示されることを確認します。