create-react-appで作成したReactアプリでFirebaseを使えるようにする

create-react-appで作成したReactアプリをgithubにアプロードし、Firebaseでウェブ上に公開する方法を記述する。

最初にGitHubのページで"New Repository"から新しくリポジトリを作成する。埋めるのはRepository nameのみでいい。

次にコマンドラインからReactアプリを作成していく。

Reactアプリの作成

$ npx create-react-app ディレクトリ名

作成されたReactアプリのディレクトリに移動

$ cd ディレクトリ名

GitHub上への作成したReactアプリディレクトリのアップロード。create-react-appで既にGitリポジトリが存在するため"$ git init"は必要ない。

ディレクトリ名 $ git remote add origin https://github.com/your-name/project-name.git
ディレクトリ名 $ git push -u origin master

これでGitHubへのアップロードが完了。

"npm start"でローカルでReactアプリを起動。"localhost"でアプリが起動して、以下のページが表示されていればOK。

次にFirebaseを使えるようにしていく。
Firebaseにアクセスして、"使ってみる"を選択し"プロジェクトを追加"でプロジェクトを作成します。
プロジェクト名を入力します。アナリスティクスはとりあえずオフでOK。
以下のメイン画面が表示されたらプロジェクトの作成完了。

メイン画面のボタンを押してアプリの登録をします。アプリ名は何でもOK。Hostingは後で設定するのでチェックせずで大丈夫。

Cloud Firestoreを有効化して、データベースを使用できるようにします。Cloud Firestoreを開き、データベースを作成を押します。モードはテストモード。ロケーションはasia-southeast1。

作成したReactアプリのディレクトリの中の「src」ディレクトリに「plugins」ディレクトリを作成し、「plugins」の中に「firebase.js」というjsファイルを作成してください。
そしたら、FirebaseのProject overviewの歯車マークから「プロジェクトを設定」を開き下にスクロールして以下のコードをfirebase.jsにコピペしてください。

import firebase from 'firebase';

const config = {
//ここから
    apiKey: "****************************",
    authDomain: "****************************",
    databaseURL: "****************************",
    projectId: "****************************",
    storageBucket: "****************************",
    messagingSenderId: "****************************",
    appId: "****************************",
//ここまでコピーして書き換え
  };
const firebaseApp = firebase.initializeApp(config);
export const firestore = firebaseApp.firestore();

ローカル環境でFirebaseを扱えるようにするため、FirebaseCLIをglobalでインストールします（1回きり）。

$ npm install -g firebase-tools

CLIが導入できたら

$ firebase login

次に初期化を行う

$ firebase init

これを実行すると選択項目が出てくる。
ここでは、方向キーで指定して、スペースキーで選択、enterで決定ができる。
以下を順に選択していきます。

Hostings
↓
Use an existing project (作成したプロジェクトを選択)
↓
What do you want to use as your public directory?(ディレクトリを選択します。buildと入力しておきましょう）
↓
あとはyesでOK

最後にビルドしてデプロイする。

$ npm run build
$ firebase deploy

表示されたURLで以下の画像が表示されたらOK

これでセットアップ完了