はじめに
Firebaseの初期化作業時の質問内容が最新化されている情報が少なかったので、その辺りの情報を含めてFirebaseにデプロイした時の手順を簡単にまとめます。
Vite環境構築
① プロジェクトを作成したいディレクトリに移動して、以下のコマンドを実施
$ npm create vite@latest
プロジェクト名を入力して希望の言語を選択
② 完了したら、作成したプロジェクト配下に移動
$ cd プロジェクト名
③ package.jsonファイルを読み取り記載されているものをインストール
$ npm i
ここまでで環境構築は一通り終わりです。
Firebaseデプロイ
① Firebaseにアクセスをしてプロジェクトを作成します
② プロジェクトのページにいき、ウェブアプリのマークをクリック
③ ウェブアプリにFirebaseを追加する手順が出てくるため、手順に従って進める
途中Firebase initで初期化する手順がありますが、下記順番にみていきます。
? Which Firebase features do you want to set up for this directory? Press Space to select features, then Enter to confirm your choices.
(Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ Realtime Database: Configure a security rules file for Realtime Database and (optionally) provision default instance
◯ Firestore: Configure security rules and indexes files for Firestore
◯ Functions: Configure a Cloud Functions directory and its files
◯ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys
◯ Hosting: Set up GitHub Action deploys
◯ Storage: Configure a security rules file for Cloud Storage
◯ Emulators: Set up local emulators for Firebase products
今回はデプロイを行うので「 Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」を選択します。
? Please select an option: (Use arrow keys)
❯ Use an existing project
Create a new project
Add Firebase to an existing Google Cloud Platform project
Don't set up a default project
すでに作成ずみのプロジェクトを使用するので「Use an existing project」とします。
=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.
? What do you want to use as your public directory? dist
distを入力します。
私の場合は、ここをdistとしていないと後ほどデプロイした時に画面が表示されない事象につながりました。
（publicやbuildなどでも問題ない場合もあると思うので適宜自分のプロジェクトに合わせて選択してください）
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
SPAとして設定するか聞かれています。今回はReactを使用するプロジェクトなのでYesとしました。何かフレームワークを利用している場合はYesでいいと思います。
? Set up automatic builds and deploys with GitHub? No
もし自分でGithubActionsのワークフローファイルを作成する場合は、Noの方がいいです。
Yesとした場合、自動的にワークフローファイルなどを設定してくれるのですが裏でどのような作業をしているかわからずデバッグが必要な時に手こずる可能性があります。
私はここをYesとしたためエラーを解消するのにかなり時間がかかってしまいました。
✔ Firebase initialization complete!
と表示されれば、初期化の完了です。
④ 全ての手順が終わったら以下を実行しプロジェクトのビルドを行う
npm run build
⑤ その後デプロイを行う
firebase deploy
出てきたURLアクセスしてプロジェクトが表示されればデプロイ成功です。
おわりに
今回初めてFirebaseを利用してプロジェクトをデプロイしましたが、Firebaseホスティングの初期化作業の設定を間違えてしまい、のちのCD（自動デプロイ）作業でかなり手こずってしまいました。
同じような作業をする方の参考になれば幸いです！
参考