【備忘録】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を作成
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にて(以下はテンプレート)
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
Author And Source
この問題について(【備忘録】React + Firebaseセットアップ), 我々は、より多くの情報をここで見つけました https://qiita.com/shinhiro/items/9cdc916c5d9149f22167著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .