はじめに
Vite + React + TypeScriptで作成したプロジェクトをFirebase Hostingにデプロイする手順をまとめます。
参考記事
上記記事のFirebase側の設定を参考にしています。Firebase SDKの導入はスキップしています。
前提
- Firebaseのアカウントがあること
- Firebase Consoleでプロジェクトを作成済みであること
- Viteプロジェクトが作成済みであること
Firebaseのどの機能を使用するか
Firebaseには多くの機能がありますが、今回使用するのは Hosting のみです。
| 機能 | 用途 | 今回使うか |
|---|---|---|
| Hosting | Webアプリをインターネットに公開する | 使う |
| Authentication | ログイン機能（Google、メール認証など） | 使わない |
| Firestore | NoSQLデータベース | 使わない |
| Storage | 画像やファイルの保存 | 使わない |
| Cloud Functions | サーバーレスでバックエンド処理を実行 | 使わない |
Hostingは静的ファイル（HTML/CSS/JS）を配信するための機能です。Viteでビルドした dist フォルダの中身をFirebaseのサーバーに置いて、URLでアクセスできるようにしてくれます。
手順
1. Firebase CLIの導入（一回だけ）
- ターミナル（Mac）or コマンドプロンプト（Windows）を開く
- 下記コマンドを実行する
実行する場所はどこでもOKです。 グローバルインストールは実行場所に関係なく、同じ場所にインストールされます。
npm install -g firebase-tools
-g はグローバルインストールのオプションです。プロジェクトフォルダではなく、PC全体にインストールされるため、どのフォルダからでも firebase コマンドが使えるようになります。
-g ありとなしの違い
| インストール先 | 使える範囲 | |
|---|---|---|
npm install -g パッケージ名 |
Node.jsのグローバルフォルダ | PC全体 |
npm install パッケージ名（-gなし） |
プロジェクトの node_modules
|
そのプロジェクトだけ |
グローバルのインストール先は以下のコマンドで確認できます。
npm root -g
普段アプリで使うパッケージ（React、Chakra UIなど）は -g なしでプロジェクトごとにインストール、CLIツール（firebase-tools など）は -g ありでPC全体にインストール、という使い分けが一般的です。
これで firebase コマンドが使えるようになります。
Firebase CLIとは
Firebase CLI（Command Line Interface） は、ターミナルからFirebaseの操作ができるツールです。
普段はFirebase Consoleの画面（ブラウザ）から設定しますが、CLIを使うとターミナルのコマンドだけで以下のことができます。
-
firebase login→ Firebaseにログイン -
firebase init→ プロジェクトの初期化 -
firebase deploy→ アプリのデプロイ -
firebase use→ 使用するプロジェクトの切り替え
つまり、ブラウザを開かずにターミナルだけでデプロイまで完結できるのがFirebase CLIです。
インストールできたか確認：
firebase --version
バージョン番号が表示されればOKです。
2. Firebaseへログイン
firebase login
ブラウザが開くので、Googleアカウントでログインします。
3. プロジェクトをビルド
firebase deploy 前にビルドしておきます。
npm run build
Viteの場合、ビルドの出力先は dist フォルダになります。
4. Firebase初期化
firebase init
以下のように質問されるので順番に答えていきます。
① 使用する機能を選択
Which Firebase features do you want to set up for this directory?
（このディレクトリでどのFirebase機能を使いますか？）
複数の機能が表示されますが、
Hosting: Set up deployments for static web apps
をスペースキーで選択してEnterを押します。
② プロジェクトの選択
Please select an option:
（オプションを選択してください）
- Use an existing project → Firebase Consoleで既にプロジェクトを作成済みの場合はこちら
- Create a new project → 新しくプロジェクトを作る場合
- Add Firebase to an existing Google Cloud Platform project → GCPプロジェクトに追加する場合
- Don't set up a default project → プロジェクトを紐付けない場合
通常は Use an existing project を選択して、一覧から自分のプロジェクトを選びます。
③ Hosting の設定
以下の質問に順番に答えます。
Q1: What do you want to use as your public directory?
（公開ディレクトリとしてどのフォルダを使いますか？）
→ dist と入力
Firebaseにアップロードするフォルダを指定します。Viteのビルド出力先は dist なので、dist と入力します。デフォルトの public のままだとアプリが正しく表示されないので注意。
Q2: Configure as a single-page app (rewrite all urls to /index.html)?
（シングルページアプリケーションとして設定しますか？すべてのURLを index.html にリダイレクトします）
→ Yes
Reactはシングルページアプリケーション（SPA）なので、Yesにします。これにより、どのURLにアクセスしても index.html が返されて、React Router等のクライアントサイドルーティングが正しく動作します。Noにすると、直接URLを入力したときに404エラーになる場合があります。
Q3: Set up automatic builds and deploys with GitHub?
（GitHubとの自動ビルド・デプロイを設定しますか？）
→ No
Yesにすると、GitHubにpushしたとき自動でビルド＆デプロイしてくれるGitHub Actionsが設定されます。後から自分でCI/CDを構築する予定がある場合や、まずは手動でデプロイしたい場合はNoで大丈夫です。
Q4: File dist/index.html already exists. Overwrite?
（dist/index.html は既に存在します。上書きしますか？）
→ No
ここでYesにすると、npm run build で生成された自分のアプリのファイルがFirebaseのデフォルトページに上書きされてしまいます。必ずNoを選びます。
以下のように表示されれば初期化完了です。
✔ Wrote configuration info to firebase.json
✔ Wrote project information to .firebaserc
✔ Firebase initialization complete!
5. デプロイ
firebase deploy
以下のように表示されればデプロイ成功です。
✔ Deploy complete!
Hosting URL: https://プロジェクトID.web.app
表示されたURLにアクセスすると、デプロイしたアプリが確認できます。
2回目以降のデプロイ
コードを変更した後は、ビルドしてデプロイするだけでOKです。
npm run build
firebase deploy
まとめ
- Firebase CLIをインストールして
firebase init→firebase deployでデプロイできる - 今回使うFirebaseの機能は Hosting のみ
- Viteの場合、public directoryは
distを指定する - Reactアプリの場合、single-page appの設定は Yes にする
-
dist/index.htmlの上書きは No にする（自分のアプリが消えるため） - 2回目以降は
npm run build→firebase deployの2コマンドで完了