React+Firebase 環境構築

Firebaseの設定

まず，Firebase consoleからプロジェクトを作成します．
ここで，Firebaseプロジェクトを作成するためにはGoogleのアカウントが必要になります．

そのため，Googleアカウントをもっていない方はGoogleアカウントを作成する必要があります．

Firebase consoleにアクセスすると，以下のような画面がでるので「プロジェクトを作成」をクリックします．

その後，プロジェクトの名前をつけるように指示されるので，名前を付けます．

今回は，react-firebase-crud-appとします．

次の画面は，そのまま続行を選択します．

そして，次はGoogleアナリティクスの設定を行います．

アナリティクスの地域は日本を選択し，すべてのチェックボックスにチェックし，プロジェクトを作成をクリックするとプロジェクトの作成が行われます．

プロジェクトの作成が完了すると以下のような画面に移るので，続行をクリックします．

続行をクリックした後に，そのプロジェクトのFirebase Consoleに遷移します．
ここから，現在のFirebaseプロジェクトの各種設定などを行うことができます．今回作成するCRUDアプリケーションでは，Firebaseが持つ以下の機能を利用します．

• Hosting
• Realtime Database

まず，Realtime Databaseの設定を行います．

Clound Firestoreをクリックすると以下の画面に遷移するので，Realtime Databaseの「データベースを作成」をクリックします．

その後，以下のにRealtime Databaseのセキュリティルールを選択する画面では，テストモードを選択し，「有効にする」をクリックします．

これで，Firebase console側の設定は完了になります．

Reactアプリの作成

まず，create-react-appを利用してReactの環境構築を行います．

$ create-react-app react-firebase-crud-app

作成したReactアプリに移動し，

$ yarn build

でReactアプリをビルドします．

Firebase-CLIのインストール

npmを利用して，firebaseのCLIであるfirebase-toolsをインストールします．

$ npm install -g firebase-tools

そして，以下のコマンドでFirebaseにログインします．

$ firebase login

ブラウザが立ち上がってGoogelのログイン画面が表示されるのでログインします．

Firebase Hostingにデプロイ

まず，Firebaseプロジェクトの初期化を行います．ここで，作成したReactアプリのルートにいることを確認してください．

$ pwd
/path/to/react-firebase-crud-app

Reactアプリのルートから以下のコマンドを実行して，初期化を行います．

$ firebase init

コマンドを実行すると以下のような選択画面が表示されるので，次のHosting, Databaseを選択しリターンキーを押します．

次に，以下のコマンドを実行してReactアプリをデプロイします．

$ firebase deploy

デプロイ後に表示される，Hosting URLにアクセスすると，Reactアプリを確認することができます．確認すると，以下のような画面が表示されます．