React学習日記② ~Firebaseへのデプロイ~

# はじめに
今回は、create-react-appで作成したReactアプリをFirebaseへデプロイ際の手順を簡単にまとめます。

※こちらの記事はReact初学者の備忘録・アウトプットを目的とした記事です。理解が浅い部分もありますが、ご容赦ください。何かしら参考になれば幸いです。

# そもそもFirebaseとは
* FirebaseとはGoogleが提供するアプリのプラットフォームのことです。様々なプロジェクトのデータベースがこのクラウド環境に設置されているわけです。
* Firebaseはクラウド環境にデータベースなどを設置して、インターネット経由でアクセスして利用できるようにしています。サーバー側にプログラムを用意する必要がないため、Reactのようなクライアント側だけしかもたないWebアプリでも使用されます。


# 開発手順
## 01. Firebaseにプロジェクトを作成する。
- まずFirebaseコンソールにアクセスします。
そこでプロジェクトの作成をクリックします。
![7D712CF4-2816-4CE1-8C28-9F0C1080F699.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663896/6d7b7adc-8262-cc2d-2354-a7668b24f4df.png)

-　プロジェクトに名前をつけて、プロジェクトを作成します。
![5A06A194-7406-4189-BC57-D5C9D403819C_1_105_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663896/cf84c9a8-f49f-ba26-95be-4b223226478f.jpeg)

## 02. リソースのロケーションを設定する。
- 左再度のメニューバーから、歯車マークから「プロジェクトを設定」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663896/2c921935-e8ba-7a2e-91f2-c4214cac0138.png)

- 遷移先のページで、「デフォルトのGCPのリソースロケーション」を選択します。（デフォルトでは未設定となっています。）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663896/f8ffaf56-57b3-e4fe-e130-18c49f0d83ec.png)

- クラウドリソースのロケーションに「asia-northeast1」に設定します。

## 03. 使用するプラットフォームを選択
- 今回はwebアプリを作成するので、「</>」のマークを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663896/4822b231-1acd-6327-efd2-a6edf9ae9515.png)

-  アプリのニックネームを決めて、入力します。

- 今回はFirebase Hostingの設定にもチェックを入れます。
![B0CDBB80-2A91-42B7-8307-2407F2BE1D60_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663896/a4b97c2b-9325-ffc3-8b11-9d069b92a1c7.jpeg)

## 04. データベースを作成
- それぞれのアプリにあったデータベース("cloud fire store"か"real time database")を選択するのですが、公式ドキュメントを参考にしてください。
- 今回はfire storeを利用するので、サイドバーから、cloud fire storeを選択します。
- すると、以下のページに遷移するので、「データベースの作成」をクリックしてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/663896/e32d08b7-a5d2-57c8-22d8-919fe249f1ad.png)

- 本番モードかテストモードかを聞かれますが、firestore.rulesというファイルで設定を上書きするので、どちらでもいいです。

## 05. 各コマンドの実行
- firebase toolsをグローバルインストールします。ターミナルで以下のコマンドを実行します。(一度でも実行したことがあれば、実行する必要はありません)

```
% npm install -g firebase-tools
```

- firebaseをインストール

```
% npm install —save firebase
```

- firebaseにログイン

```
% firebase login
```

googleアカウントを選択して許可します。
 
  

## 06.firebase initを設定

```
% firebase init
```
Witch Firebase CLI features do you want to set up for this folder?と聞かれますが、今回は
◯Firestore
◯Functions
◯Hosting
にチェックを入れます。
(上下の方向キーで移動して、スペースキーでチェックを入れます。選択したEnterキーで次へ進みます。)

　

- 続いてPlease select an option:と聞かれます

今回はプロジェクトを作ってあるので、
use an existing project(既存のプロジェクトを使う)を選択して、プロジェクトを選択します。

- What file should be used for Firestore Rules?(firestoreのルールを決めるファイルはこれでいいですか？)と聞かれるので、デフォルトでEnterを押します。

- What file should be used for Firestore indexes?（firestoreのindexを決めるファイルはこれでいいですか？）と聞かれるので、こちらもyesで通します。

- What langage would you like to use to write Cloud Functions?(cloud functionsをどの言語で書きますか？)と聞かれるので、JavaScriptかtypeScriptかを選択してEnterを押します。(今回はTypeScriptを選択しました。)

- Do you want to use TSLint to catch probable bugs and enforce style?と設定を聞かれるので、yesで通します。

- Do you want install dependencies with npm now?(npmで依存関係のあるものをインストールしますか？)と聞かれるので、yesで通します。

- What do you want to use as your public directory?(どのパブリックディレクトリをつかいますか？)と聞かれます。
create-react-appでは、後ほど生成するbuildファイルを本番環境用に用意するので、「build」を指定してEnterを押します。

- Configure as a Single-page app?（SPAとして設定したいですか？）と聞かれますが、SPAを作る人はyesをにしてEnterを押します。

## 07. firestore.rulesの設定
- エディタに戻り、firestore.rulesファイルを開き、最低限のセキュリティ設定を行います。

``` firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read;
      allow write: if request.auth.uid != null;
    }
  }
}
```
こちらは、誰でもデータベースを読み込むことはできるが、書き込みは認証されたユーザーでないとできないという設定を加えることができました。

## buildフォルダを生成
- 本番用のbuildフォルダを生成するために、以下のコマンドを実行します

```ターミナル
% npm run build
```

- コンパイルエラーを防ぐためにfunctoins/src/index.jsのimportを一旦コメントアウトします。

``` functions/src/index.ts
// import * as functions from 'firebase-functions';
```

## 08. Firebaseへデプロイ
- ターミナルへ戻り、以下のコマンドを実行します。

```ターミナル
% firebase deploy
```
成功すると、下の方にHosting URLというものが現れますが、こちらが本番環境のURLになります。


# firebase deploy時のエラー解決
deploy時に400番のエラーを返されることがあります。
こちらは、firebaseの料金プランが違うためです。firebaseの料金プランを無料プランから、Blaze(従量課金制)に変更しなくてはなりません。基本的に個人で開発する程度のデータ量なら、無料で使えるはずですが、公式ドキュメントを参考にしてプランを変更してみてください。

# おわりに
大分冗長な説明になってしまいましたが、最後までお付き合いくださりありがとうございました。
修正点等ありましたら、教えてくださると助かります。