ReactのプロジェクトからFirebaseにアクセスるための設定方法をご紹介。
Firebaseにアクセスするための環境情報の設定
.env.localファイル
プロジェクトのトップディレクトリ配下に「.env.local」ファイルを作ります。
中身は下記に。
REACT_APP_FIREBASE_API_KEY=""
REACT_APP_FIREBASE_AUTH_DOMAIN=""
REACT_APP_FIREBASE_DATABASE=""
REACT_APP_FIREBASE_PROJECT_ID=""
REACT_APP_FIREBASE_STORAGE_BUCKET=""
REACT_APP_FIREBASE_SENDER_ID=""
REACT_APP_FIREBASE_APP_ID=""
REACT_APP_FIREBASE_MEASUREMENT_ID=""
この設定ファイルに必要なFirebaeの情報を追記します。
Firebaseにアクセスするための.env.localの内容
では、Firebaseにアクセスするための情報はどこにあるのか。
Firebaeのプロジェクトのページから、「プロジェクトの概要」の歯車のマークの「プロジェクトの設定」をクリック。
「ウェブアプリ」の「SDKの設定と構成」の「config」のラジオボタンをクリック。
そうすると、「アプリのキーとIDが含まれているFirebae構成オブジェクト」が出てきます。
これを、「.env.local」に転記します。
「REACT_APP_FIREBASE_DATABASE=””」はFirestoreを構築した時に記載。
「REACT_APP_FIREBASE_MEASUREMENT_ID=””」には、「appId」の「n:xxxxxxxxxxxx:web:～」のxの12桁を記載します。
Firebaseへのアクセスするための情報は流出させてはいけません
.env.localファイルに定義したFirebaseへのアクセスするための情報が流出させてはいけません。
この情報が漏れてしまうと誰でもあなたのFirebaseにアクセスできてしまいます。
ということで、プログラムには直接書かず、.env.localとう隠しファイルとします。
当然、githubなんかにもアップしてはいけないファイル。
Reactのプロジェクトを作成するときに、gitの環境も作成されます。
その時、githubにアップしてはいけないファイルとして、.gitignoreに記載されています。
.envに定義してもいいですが、npx create-react-appで作成した時の.gitignoreには、「.env」が記載されていないので注意が必要。
privateのリポジトリになら、.envに定義してgithubにセーブするのも「あり」かもしれません。
ReactとFirebaseを連携させるための設定
ReactとFirebaseを連携させるためにSDKをインストールする必要があります。
npm install firebase
npm install -g firebase-tools
をプロジェクトのディレクトリで投入して、インストールしましょう(「npm install -g firebase-tools」については、ローカルシステム自体にインストールしてしまうため、１回でOKです)。
その他、認証を使う場合や、Firestoreを使う場合などにも追加でインストールする必要があるものがあります。
それは、それぞれの機能の紹介の時に記載します。
