reactでfirebaseの初期設定

最近reactで機能を作っているのですが、firebaseがバージョンによって結構実装方法が違って苦労したのでメモしておこうかと思います。

今回はversion9でauth,firestore,firestorageあたりの初期設定を行います。

まず、.envファイルにfirebaseの各情報を記載します。

REACT_APP_FIREBASE_APIKEY=hoge-hoge
REACT_APP_FIREBASE_DOMAIN=hogehoge.firebaseapp.com
REACT_APP_FIREBASE_DATABASE=https://hoge-default-rtdb.asia-southeast1.firebasedatabase.app
REACT_APP_FIREBASE_PROJECT_ID=hogehoge
REACT_APP_FIREBASE_STORAGE_BUCKET=hogehoge.appspot.com
REACT_APP_FIREBASE_SENDER_ID=999999999999
REACT_APP_FIREBASE_APP_ID=1:999999999999:web:hogehoge999999

次にfirebase.tsみたいな感じでfirebaseの設定をします。

import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";
import { getStorage } from "firebase/storage";

const firebaseConfig = {
    apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
    authDomain: process.env.REACT_APP_FIREBASE_DOMAIN,
    databaseURL: process.env.REACT_APP_FIREBASE_DATABASE,
    projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_FIREBASE_SENDER_ID,
    appId: process.env.REACT_APP_FIREBASE_APP_ID,
}

export const app = initializeApp(firebaseConfig);
export const auth = getAuth();
export const db = getFirestore(app);
export const storage = getStorage(app);

これで初期設定は完了です。

使うときはfirebase.tsをimportして使います。