【FireBase】初期設定編

firebase の初期設定

1. 以下パッケージをインストール

・firebase //firebase と連携するのに必要

2. Firebase のサイトへ行ってログインしてコンソールへ移動

3. プロジェクトを追加よりプロジェクトを追加。

プロジェクト名を決めて作成。プロジェクト名が URL になるっぽい

4. ウェブアプリの登録 > <= このボタンを押下

アプリの名前を決める。プロジェクト名と同じで良い？
また、Hosting をチェックを入れない。⇒ 別途 Hosting の項で実施予定？
登録後はコンソールに戻る。
（※ここで表示される情報は Firebase に接続する際に利用するものなので機密。これが漏れると誰でも DB アクセスなどができるようになる。）
（※SDK はすでに手順 1 でインストール済みなのでスキップ）

5. Firebase の情報を確認

左サイドバーの歯車よりプロジェクトの設定を開く。
「SDK の設定と構成」の「構成」ラジオボタンを押下することで接続に必要な情報(認証情報)を確認できる。

6. .env ファイルの作成と gitignore ファイルの更新

src と同階層に.env 作成。.gitignore に「.env」を記述

7. .env に認証情報を登録

REACT_APP は.env ファイルを React で読み込むために必要なので接頭辞として付ける。他は任意でわかりやすい名前なら OK。
あとは認証情報を右辺に書いていく

REACT_APP_FIREBASE_APIKEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_DATABASE_URL="" // ここは次の項目で作成
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=""
REACT_APP_FIREBASE_MESSAGING_APP_ID=""

8.　DataBaseURL について

手順 5 で確認した認証情報には Databese へ接続するための URL が含まれていないので自作する必要がある。
データベースの URL は以下の形式になる。プロジェクト ID を認証情報より読み取り置き換える。

https://プロジェクトID.firebaseio.com

9.　src 直下に firebase 設定ファイルを作成して完了

firebase.ts を作成し以下の設定を記述

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";

firebase.initializeApp({
  apiKey: process.env.REACT_APP_FIREBASE_APIKEY,
  authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.REACT_APP_FIREBASE_DATABASE_URL,
  projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
  storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_FIREBASE_MESSAGING_APP_ID,
});

// 任意（呼び出しを楽に行うための記述）
export const auth = firebase.auth();
export const db = firebase.firestore();