【React】Firebaseでデプロイしてみる

Firebaseを使えばある程度は無料でWEBアプリを公開できる。
とりあえずデプロイできたのでログを残しておく。

１、デプロイしたいアプリのディレクトリに移動する

$ pwd
$ /Users/username/projects/ReactTest/helloworld

２、npmでfirebaseのパッケージをインストールする

$ npm install firebase --save

３、firebaseでデプロイする為に必要なjsファイルを作成する

$ mkdir firebase
$ touch firebase/config.js
$ touch firebase/index.js

４、各ファイルに以下のコードを記述する

↓ index.js

import firebase from 'firebase';
import { firebaseConfig } from './firebase/config.js';

export const firebaseApp = firebase.initializeApp(firebaseConfig);
export const firebaseDb = firebaseApp.database();

↓ config.js

export const firebaseConfig = {
  apiKey: "****************",
  authDomain: "****************",
  databaseURL: "****************",
  storageBucket: "****************",
  messagingSenderId: "****************"
};

✳︎✳︎✳︎の箇所にはfirebaseコンソールで作成されたAPIキー等を記述する（後述）

５、webブラウザでfirebase(https://console.firebase.google.com/)にログインし、適当なプロジェクトを作成する
※firebaseのログイン方法およびプロジェクト作成については簡単なので省略

６、プロジェクト画面を開きWEBアプリ用アイコンをクリックする

７、APIキー等の情報が表示されるので、赤枠の部分を先ほど作成したfirebase/config.jsにコピペする

８、デプロイに必要なツールをインストールする為、ターミナルで以下のコマンドを実行

$ npm install -g firebase-tools

９、インストールが成功したらfirebaseにログインする

$ firebase login

firebaseが情報を収集することに許可を求められるのでyesを入力するとブラウザでリンクが開かれる

? Allow Firebase to collect anonymous CLI usage and error reporting information?
 Yes

リンク先でGoogleアカウントを選択してログインする
以下の画面が表示されたら成功。ウィンドウは閉じて良い。
ウーホー！

１０、firebaseを初期化する

$ firebase init

かっこいいけど読めない文字が表示される。FIREBASE？

１１、セットアップ方法について聞かれるので今回は一番上のDatabaseのみ選択してエンターキーを押下する

操作方法はキーボードにて
矢印キーでカーソル移動
スペースキーで選択
エンターキーで決定

１２、使用するプロジェクトを聞かれるのでfirebase管理画面で作成したプロジェクトを選択する

１３、データベースのルール設定をどのファイルで行うか聞かれるのでそのままエンターキーを押下する

１４、アプリ内にfirebase.jsonとdatabase.rules.jsonが作成されていることを確認し、それぞれ以下のように編集する。

↓ firebase.json

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "build"
  }
}

↓ database.rules.json

{
  "rules": {
    ".read": "true",
    ".write": "true"
  }
}

１５、編集が完了したらターミナルでビルド実行

$ npm run build

１６、ビルドが問題なく完了したらデプロイする

$ firebase deploy

デプロイが完了するとHosting URLが表示されるので、ブラウザで開く

アプリの画面が表示されたら成功

↓参考サイト様
React & Firebaseで簡単なChatアプリを作ってみた - Qiita
Reactで作成したアプリをfirebaseでデプロイする方法 | ウェブ系ウシジマくんのテックブログ