Firebaseとappを連携する

FIrebaseでAPI keyを作った後、firebase cliでappにAPI keyを設定してdeployする

firebase側の設定

黒枠から追加したいappの種類にあっているボタンを選択して押す

https://gyazo.com/b608048efa8e317978199496b37deb30

appの名前を決める

firebase hostingの設定もできる

https://gyazo.com/7fb20ab4cc906e488dcee7158b9fb71e

API keyはプロジェクトの設定→全般→マイアプリから確認できる

app側の設定

firebaseを入れておく

$ yarn add firebase

deploy用toolをまだ入れていなければ入れておく

$ yarn global add firebase-tools

取得したAPI keyをどこかに入れておく

/icons/vue.js.icon//icons/react.iconなら.envに入れておくと楽

API keyを読み込む/icons/firebase.icon初期化fileを書く

e.g. /icons/react.iconの場合

code:.env

REACT_APP_API_KEY="API_KEY"

REACT_APP_AUTH_DOMAIN="PROJECT_ID.firebaseapp.com"

REACT_APP_DATABASE_URL="https://PROJECT_ID.firebaseio.com"

REACT_APP_PROJECT_ID="PROJECT_ID"

REACT_APP_STORAGE_BUCKET="PROJECT_ID.appspot.com"

REACT_APP_MESSAGING_SENDER_ID="SENDER_ID"

REACT_APP_APP_ID="APP_ID"

# an optional field

# Google Analyticsを有効にしたときのみ存在する？

# REACT_APP_MEASUREMENT_ID="G-MEASUREMENT_ID"

from Firebase 構成オブジェクトの詳細

↓ここ、documentにはimport * as Firebase from 'firebase/app';とあるが、default exportされているのでこちらのコードが正しい

code:firebase.ts

import Firebase from 'firebase/app'; // 必須

// 必要に応じて読み込み

import 'firebase/firestore';

使用できるlibrariesの一覧はここにある

code:firebase.ts

export const firebaseConfig = {

apiKey: process.env.REACT_APP_API_KEY,

authDomain: process.env.REACT_APP_AUTH_DOMAIN,

databaseURL: process.env.REACT_APP_DATABASE_URL,

projectId: process.env.REACT_APP_PROJECT_ID,

storageBucket: process.env.REACT_APP_STORAGE_BUCKET,

messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,

appId: process.env.REACT_APP_APP_ID,

//measurementId: process.env.REACT_APP_MEASUREMENT_ID,

};

// 各種APIのexport

export const firebase = Firebase.initializeApp(firebaseConfig);

export const firestore = firebase.firestore(); // 必要に応じて

export default Firebase;

from Firebaseでお手軽！データ管理画面をつくる | フューチャー技術ブログ

一部改変

from Firebase を JavaScript プロジェクトに追加する

当たり前だけど公式が一番正確だった

一つのappで複数のFirebase projectを使用する場合はここを参照

#2020-11-20