Vite+Reactで作成したプロジェクトをFireBaseにデプロイしよう

プロジェクトの作成

viteで新規プロジェクトの作成(React+Javascript)

npm create vite@latest　myProject

依存関係のインストール

cd myProject
npm install

開発サーバーを起動して、プロジェクトが正しくセットアップされたことを確認

npm run dev

ブラウザで http://localhost:5173 を開くと、ViteのReactテンプレートが表示されるはずです。

FireBase

FireBaseの登録
Googleアカウントがあれば無料で使用できます
https://firebase.google.com/

プロジェクトを作成

プロジェクト命名
※この後Google アナリティクスを有効にするかどうか問われますが、どちらでもdeployはできました

< / > を 選択

✅このアプリのFirebaseHostingも設定します

npm install firebase

を実行して次へ(SDKは無視します)

npm install -g firebase-tools

を実行して次へ

firebase login

firebase init hosting //を実行

↓↓↓

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: deploytest-cb257 (DeployTest)
i  Using project deploytest-cb257 (DeployTest)

=== 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
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

※init ではなく init hostingで、
? What do you want to use as your public directory?　はdistを入力してください。

npm run build
firebase deploy

ビルドして、デプロイするとHosting URLが返ってくるのでアクセスして確認します

無事にデプロイできました

追記1:苦戦した事

上記の手順でもデプロイの段階でエラーが発生することがあったのですが、

firebase logout
firebase login

で解決して(FireBaseCLIの期限が切れていた)
デプロイが通ったらブラウザのクッキー削除や更新でしっかり表示されました。

追記2:なぜBuildをするのか

1. パフォーマンスの最適化(コードの圧縮とファイルの分割)
2. 本番環境向けの設定
3. ブラウザ互換性(トランスパイル)
4. セキュリティの向上(デバッグツールや詳細なエラーメッセージの削除)

npm run build は、開発環境で作成されたコードを本番環境に適した形に変換する重要なステップです。パフォーマンスの最適化、ブラウザ互換性の確保、セキュリティの向上、ホスティングの準備など、さまざまなメリットがあり、本番環境でのアプリケーションの品質とパフォーマンスを保証します。