React app を FirebaseにDeployする方法

### firebaseにログインされているか確認
`firebase login`

```bash

MacBook-Pro:netflix-clone **********$ firebase login
firebase login
Already logged in as **********
MacBook-Pro:netflix-clone **********$ 
```

**********は個人情報なのでシーリングしています。

##### Firebase toolsをまだインストールしていなかったら
`Sudo npm i -g firebase-tools`

### Firebase projectを作成する
`firebase init`

```bash
MacBook-Pro:netflix-clone **********$ firebase init 

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

You\'re about to initialize a Firebase project in this directory:

  /Users/**********/development/learning/**********/netflix-clone

? Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your ch
oices. (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
```
4つ目をEnterで選択
```
❯◉ Hosting: Configure and deploy Firebase Hosting sites
```


```bash
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 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 
```

```bash
? Select a default Firebase project for this directory: (Use arrow keys)
❯ faceboook-messenger-clone (faceboook-messenger-clone) 
  flash-chat-8a171 (Flash Chat) 
  instagram-clone-react-fdf69 (instagram-clone-react) 
  netflix-clone-with-react (netflix-clone-with-react) 
```

```bash
i  Using project netflix-clone-with-react (netflix-clone-with-react)

=== 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.

```

ここが大切です。

```bash
? What do you want to use as your public directory? (public) 
```

と聞かれたら、
`build`
といれてEnter

```bash
Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 
```
は、
`y`
と入れて、Enter

```bash
Wrote build/index.html

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

✔  Firebase initialization complete!

   ╭───────────────────────────────────────────╮
   │                                           │
   │      Update available 8.7.0 → 8.8.1       │
   │   Run npm i -g firebase-tools to update   │
   │                                           │
   ╰───────────────────────────────────────────╯
```

でProjectは完成しました。


### Deploymentの準備
ここまできたら、terminalで
`npm run build`
を入力することで、Production のためのReact Bundleが作成されます。


```bash

MacBook-Pro:netflix-clone **********$ npm run build 
```

成功すれば、build フォルダーが自動作成されます。

![Screen Shot 2020-08-21 at 9.49.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/430087/02a7d634-bfd8-f69a-c3bb-4de73b7a2c03.png)

また、
以下のようにterminalに表示されます。

```bash
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  55.22 KB  build/static/js/2.24b893fb.chunk.js
  1.94 KB   build/static/js/main.7545280a.chunk.js
  837 B     build/static/css/main.15079869.chunk.css
  781 B     build/static/js/runtime-main.b8a87127.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  npm install -g serve
  serve -s build

Find out more about deployment here:

  bit.ly/CRA-deploy
```

### プロジェクトを Deploy
最後に、
`firebase deploy`
と入力すれば、完成です。

```bash
MacBook-Pro:netflix-clone **********$ firebase deploy

=== Deploying to 'netflix-clone-with-react'...

i  deploying hosting
i  hosting[netflix-clone-with-react]: beginning deploy...
i  hosting[netflix-clone-with-react]: found 18 files in build
✔  hosting[netflix-clone-with-react]: file upload complete
i  hosting[netflix-clone-with-react]: finalizing version...
✔  hosting[netflix-clone-with-react]: version finalized
i  hosting[netflix-clone-with-react]: releasing new version...
✔  hosting[netflix-clone-with-react]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/netflix-clone-with-react/overview
Hosting URL: https://netflix-clone-with-react.web.app
MacBook-Pro:netflix-clone **********$ 
```

Deployされたアプリはこちら
https://netflix-clone-with-react.web.app

以上です^^