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/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/68bdc794-bb38-acb4-47b5-0d78f99d02ad.png)
プロジェクトを作成
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/c0918cf1-bac0-c6b1-893e-3914feb3481c.png)
プロジェクト命名
※この後Google アナリティクスを有効にするかどうか問われますが、どちらでもdeployはできました
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/d244ef86-1bed-81f9-6267-efebd84d721b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/0eec01a0-8c1a-5419-1c95-dc2df57a33b0.png)

< / > を 選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/291436bb-9bc7-639a-eb5d-d71f40b3bf86.png)
✅このアプリのFirebaseHostingも設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/d7b74cb6-f2ba-da56-9b64-3ec6d7270b78.png)
```
npm install firebase
```
を実行して次へ(SDKは無視します)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/a1bd1618-9536-0f08-0cde-dad39cbf681d.png)
```
npm install -g firebase-tools
```
を実行して次へ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/4ec72db9-842b-791f-50fa-a87a51bb7256.png)
```
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が返ってくるのでアクセスして確認します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3784604/88a0beed-3324-4d6a-d9cc-8958828f206b.png)
無事にデプロイできました

# 追記1:苦戦した事
上記の手順でもデプロイの段階でエラーが発生することがあったのですが、
```
firebase logout
firebase login
```
で解決して(FireBaseCLIの期限が切れていた)
デプロイが通ったらブラウザのクッキー削除や更新でしっかり表示されました。


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

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

https://qiita.com/bell_007/items/e84cd7a11b1d196e8bb4