【備忘録】React + Firebaseセットアップ

What

Reactのアプリ内でFirebaseを使うときにハマらずに環境構築するためのメモ
(2019年4月28日　初稿)

OS: macOS Catalina 10.15.4

Why

公式ドキュメントや他の記事を見ながらもハマったことが何度もあるのでここにまとめておく

Who

趣味でReact + Redux + Firebaseあたりでwebアプリを作っている人です。

構築方法

Firebase側

Firebase console
-> プロジェクトを追加
-> アプリを追加
-> webアプリを選択
-> (Cloud Firestoreを使う場合) [Database]
-> [データベースの作成]
-> [本番環境で開始]
-> ロケーションは"asia-northeast1"を選択

React側

npx create-react-app project-name
-> cd project-name
-> (Material-UIを使う場合) yarn add @material-ui/core
-> firebase init
-> 使うものを選択(functions, firestore, hostingなど)
-> SPAにするをYes
-> hosting用のディレクトリをbuildに指定
-> 「Firebaseの既存のプロジェクトを使用」でさっき作ったFirebaseのプロジェクトを指定する
-> 完了

->

-> yarn add firebase axios (axiosはなくてもいい)
-> srcディレクトリ内に firebase_config.jsを作成

firebase_config.js

import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/functions';
import 'firebase/analytics'

const firebaseConfig = {
    apiKey: "****************************",
    authDomain: "****************************",
    databaseURL: "****************************",
    projectId: "****************************",
    storageBucket: "****************************",
    messagingSenderId: "****************************",
    appId: "****************************",
    measurementId: "****************************"
  };

firebase.initializeApp(firebaseConfig);
export default firebase;
export const db = firebase.firestore();

firebaseConfigの部分は
firebase console
-> プロジェクト
-> [設定]
-> [プロジェクトの設定]
-> 下のほうにある「Firebase SDK snippet」
-> [構成]に表示を切り替える
-> firebaseConfigの中身をコピー

Functionsを使う場合

トップディレクトリからfunctionsディレクトリに移動 cd functions
-> yarn add cors (corsのアラートがでるのを防ぐ)
-> index.jsにて(以下はテンプレート)

index.js

const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
const cors = require('cors')({origin: true});

exports.addRecord = functions.region('asia-northeast1').https.onRequest((req, res) => {

    cors(req, res, () => {
        admin.firestore().collection('posts').add({
            name: req.body.name,
            createdAt: new Date().toISOString(),
            likes: 0,
        })
        .then(() => {
            return res.status(201).json({message: "success"})
        })
        .catch((err) => {
            return console.error(err);
        });
        return null;
    });
});

デプロイ時

Functionsだけ
-> firebase deploy --only functions

hostingしたい
->yarn build
->firebase deploy --only hosting, firestore