第3回 2020年版 React+Firebaseでアプリを作成する

# 1. 概要
ReactでFirebaseを利用するための方法について。

# 2. 前提条件
## 作業日時
- 2020/2/28

## ソフトウェアのバージョン

| ソフトウェア | バージョン |
|:-:|:-:|
| react              | 16.13.0  |
| react-dom          |16.13.0   |
| typescript         | 3.7.5  |
| firebase-tools     | 7.14.0  |


# 3. Firebaseのプロジェクト作成
まずは、 [FirebaseのWebサイト](https://console.firebase.google.com/u/0/) でプロジェクトを作ります。


1. Firebaseにサインアップします。Googleアカウントがあればすぐ登録できます。
2. プロジェクトを新規作成します。

<img width="1677" alt="Firebase画面.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293373/0c6a6a0f-fa1e-bdae-adf3-a9042f0ffe03.png">


# 4. Firebase CLIのセットアップ

次に、ローカル環境にFirebase CLIをインストールします。

```console
$ yarn global add firebase-tools
```

Firebase CLIでFirebaseへログインすることで、認証されます。
ブラウザが起動して、ログイン画面が表示されるのでログインします。

```console
firebase login
```

# 5. Reactアプリの作成

Firebaseのサンプル用のReactのアプリを作成します。

```console
$ npx create-react-app firebase-sample --template typescript
$ cd firebase-sample/
```

# 6. Firebase Hostingへのデプロイ

## 6.1. Firebaseの初期設定を行います。

Firebaseの初期化を行います。

```console
$ firebase init

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

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

  /Users/hoge/Documents/00_mygit/hoshimado/firebase-sample

? 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

```

色々質問をされるので、次のように選択します。

```console
? 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)
```

→Hostingを上下で選択肢し、`スペース`で選択する。その後、`Enter`で決定。


```console
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: 
❯ sample-9f36d (sample) 
```

→`Use an existing project`を選択肢、その後、先程作成したプロジェクトを選択する。


```console
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? (public) 
```
→`Enter`(puclicを利用する)を押下する。


```console
? Configure as a single-page app (rewrite all urls to /index.html)? (y/N) 
```
→SPA用の設定にするため、`y`を入力し、`Enter`を押下する。

```
? File public/index.html already exists. Overwrite? (y/N) 
```
→`N`を入力し、`Enter`を押下する。

最後に以下のようなメッセージが出れば、成功です。

```console
i  Skipping write of public/index.html

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

✔  Firebase initialization complete!
```

最後に、firebaseのホスティングの設定を修正する。
ローカルの`build`ディレクトリをリモートの`public`にアップロードするように修正する。

```javascript:firebase.json
{
  "hosting": {
    "public": "build", /* publicからbuildに修正する。*/
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}
```

## 6.2. デプロイする

次に、Firebase Hostingにデプロイするためのアプリをビルドします。

```console
$ yarn run build
```

その後、以下のコマンドでFirebase Hostingにデプロイします。

```console
$ firebase deploy
```

# 7. 動作確認

デプロイ後に表示される`Hosting URL`をブラウザで開くとReactの画面が確認できます。

```console
=== Deploying to '*****'...
略
✔  Deploy complete!
Project Console: https://console.firebase.google.com/project/*****/overview
Hosting URL: https://*****.firebaseapp.com
```

<img width="1679" alt="firebasehostingへのデプロイ.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/293373/40a4cb8f-0ae5-d90f-2c58-43bc8b73fc85.png">


# 8. 最後に
今回はReactをFirebase Hostingにデプロイする方法について説明しました。
Firebaseを活用することで、バックエンドのことで気にすべきことが軽減され、アプリの作成に集中することができます。

今回は単純なWebサイトの公開方法でしたが、以下の記事ではCloud storageを利用した画像のアップロードについて説明しています。こちらもご覧ください。

- [第6回 2020年版 React+Firebaseで画像のアップロード（その１）](https://qiita.com/tetsurotayama/items/30a0609a0cca5ba5ff0a)

次回は、[既存のウェブサイトに React を追加する方法](https://qiita.com/tetsurotayama/items/a2e4edd5bc46bc592c32)について説明します。

# 9. 関連記事
Reactに関する記事です。

- [第1回 2020年版 Node.js+Reactのインストール](https://qiita.com/tetsurotayama/items/6dd91dc37941fab462a4)
- [第2回 2020年版 ReactのMaterial UI V4の使い方について](https://qiita.com/tetsurotayama/items/12d6c7b3463246306e87)
- [第3回 2020年版 React+Firebaseでアプリを作成する](https://qiita.com/tetsurotayama/items/179daca2cacb0caad0c5)
- [第4回 2020年版 既存のウェブサイトに React を追加する](https://qiita.com/tetsurotayama/items/a2e4edd5bc46bc592c32)
- [第5回 2020年版 ReactのRechartsで新型コロナウイルス感染症対策サイトのデータを可視化する](https://qiita.com/tetsurotayama/items/f5eda6dc2bbcd1f71b4e)
- [第6回 2020年版 React+Firebaseで画像のアップロード（その１）](https://qiita.com/tetsurotayama/items/30a0609a0cca5ba5ff0a)
- [第7回 2020年版 React+Firebaseで画像のアップロード（その２）](https://qiita.com/tetsurotayama/items/5129f0cfb21f9ec9b9a0)
- [第8回 2020年版 React+Firebaseで画像のアップロード（その３）](https://qiita.com/tetsurotayama/items/6fb3d3b6e01cac77c85f)
- [第9回 2020年版 ReactにStoryshotsを導入する](https://qiita.com/tetsurotayama/items/dd637e90f4ea008fd878)