前回は、Firebase でプロジェクトを作成します。

今回は、Firebase Project Config を設定します。

まずは、前回作成した Firebase のプロジェクトを選択します。

画面左上の歯車アイコンをクリックし、『プロジェクトの設定』を選択します。

image2

全般タグの一番下にまで移動し、マイアプリのコードアイコンをクリックします。

image3

アプリのニックネームを入力し、『アプリを登録』をクリックします。

image4

Firebase SDK の追加が表示されました。

image5

次は、開発しているローカルプロジェクトに、firebase をインストールします。

ターミナルで、プロジェクトのディレクトリに移動しnpm install --save firebase を実行します。

インストールが完了した後、環境設定をおこないます。

.env ファイルを作成します。

Firebase SDK の追加に書かれている、firebaseConfig の中身をコピーし、.env に貼り付けます。

image6

image7

apiKey や authDomain などのキーを環境設定用に修正します。

image8

.env がプッシュされないよう、.gitignore に.env を指定しましょう。

image9

firebase フォルダを作成し、firebaseConfig.js を作成します。

Firebase SDK の追加に書かれている、コードの内容をコピーし、firebaseConfig.js に貼り付けます。

また、apiKey や authDomain などの値を、先程.env で作成したキーに変更します。

import { initializeApp } from "firebase/app"

const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
}

const app = initializeApp(firebaseConfig)

appfirebaseに変更し、export しましょう。

const firebase = initializeApp(firebaseConfig)

export default firebase

これで、Firebase Project Config の設定は、一通り完了しました。

次回は、Firestore Databese を作成します。

ブログ一覧