Firebase Hosting 環境構築～デプロイ

環境構築からデプロイまで行った作業記録です。
躓いたところをメモっています。
以下を参考にさせていただきました。

- [Facebook公式のcreate-react-appコマンドを使ってReact.jsアプリを爆速で作成する](https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614)
- [（初心者向け）Firebase HostingへReactプロジェクトを公開する手順](https://qiita.com/junara/items/74801923ca108b328b26)

##プロジェクトの作成

ブラウザからFirebaseへアクセスしログイン、プロジェクトを作成する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/a4f9d3aa-6b30-c5c1-33c4-f1e1e2866f89.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/ab20921e-9f5b-3388-bdae-0cff61fdc334.png)

##firebase-tools のインストール
`npm install -g firebase-tools`

##create-react-app のインストール
`npm install -g create-react-app`

これをしないと、`create-react-app`実行時にエラーが出る。

```
create-react-app : 用語 'create-react-app' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。
```

##ローカルでプロジェクトの作成
`mkdir react-app`

`cd react-app`

`create-react-app hello-world`

```sh
We suggest that you begin by typing:

  cd hello-world
  npm start

Happy hacking!
```

##ローカルで起動

App.jsを修正

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/1211d002-c683-b01a-15e6-fffc05cb6f42.png)

```
$ npm start
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/08240b06-a09e-c5bf-6ce7-1b5b1d127c16.png)

##Firebaseとの連携
```sh
firebase login
```

![login.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/69fd2176-ff9f-49aa-380a-7325c19a4807.png)

ログイン後

![successful.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/0fd2238e-e0cc-e80b-37fd-3566fd2978d3.png)

コンソールに以下が表示される。

```sh
Waiting for authentication...

+  Success! Logged in as XXXXX@gmail.com
```

##Firebase Hostingへの接続設定を追加

```sh
$ firebase init

     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:
省略
? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ( ) Database: Deploy Firebase Realtime Database Rules
 ( ) Firestore: Deploy rules and create indexes for Firestore
 ( ) Functions: Configure and deploy Cloud Functions
>( ) Hosting: Configure and deploy Firebase Hosting sites
 ( ) Storage: Deploy Cloud Storage security rules
 ( ) Emulators: Set up local emulators for Firebase features
```

エラーが表示。スペースを押してなかったため。

```
Error: Must select at least one feature. Use SPACEBAR to select features, or provide a feature with firebase init [feature_name]
```

再度実行しHostingを選択、**スペース** を押しエンター。

`Use an existing project`を選択し作成したプロジェクトを選択。

```sh
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: 
> hello-world-9b4bd (hello-world)
```
※後述するが`File dist\index.html already exists. Overwrite?`の選択肢はNoにすること。

```sh
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
+  Wrote public/index.html

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

+  Firebase initialization complete!
```

`Configure as a single-page app (rewrite all urls to /index.html)?` の選択肢の違いはこちら。
[firebase init 時に聞かれる「Configure as a single-page app (rewrite all urls to /index.html)?」は選択によって何がどう変わるのか]
(https://qiita.com/megane42/items/96356a88d67fcc1499ee)

## Firebaseへのデプロイ

`npm run build`

`firebase deploy`

デプロイ後以下の画面になる。
数分待てばページが更新されるという記事もあったが更新されない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/81376123-7498-6ab5-49d9-45dd118a6e1f.png)

###原因

こちらの記事より
[【Firebase】Firebase Hosting Setup Completeと表示されてしまう](https://maitakeramen.hatenablog.com/entry/2019/04/15/180416)

**firebase init した時の選択肢で、
 File dist\index.html already exists. Overwrite? <b>No</b>
ここ、絶対Noにすること！**

削除してやり直しした。

```sh
? What do you want to use as your public directory? public
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File public/index.html already exists. Overwrite? No
i  Skipping write of public/index.html

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

+  Firebase initialization complete!
```

今度は成功した。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/422235/a3873440-49a9-3a35-2672-177fe0c406af.png)