firebaseとvueの紐付け作業

firebaseとvueの紐付け作業どうやるんだっけ？って時の、忘備録。

firebase.jsonの設定

{
 "hosting": {
   "public": "public",
   "ignore": [
     "firebase.json",
     "**/.*",
     "**/node_modules/**"
   ],
   "rewrites": [
     {
       "source": "**",
       "destination": "/index.html"
     }
   ]
 }
}

.env

FB_API_KEY="　"
FB_AUTH_DOMAIN="　"
FB_DATABASE_URL="　"
FB_PROJECTID="projectId"
FB_STORAGE_BUCKET="　"
FB_MESSAGING_SENDER_ID="　"

.firebaserc

{
 "projects": {
   "default": "projectId"
 }
}

pluginにfirebase.js

import firebase from 'firebase'

// .env に設定した値を取得してる
const config = {
 apiKey: process.env.FB_API_KEY,
 authDomain: process.env.FB_AUTH_DOMAIN,
 databaseURL: process.env.FB_DATABASE_URL,
 projectId: process.env.FB_PROJECTID,
 storageBucket: process.env.FB_STORAGE_BUCKET,
 messagingSenderId: process.env.FB_MESSAGING_SENDER_ID
}

if (!firebase.apps.length) {
 firebase.initializeApp(config)
}

export const Timestamp = firebase.firestore.Timestamp
export const FieldValue = firebase.firestore.FieldValue
export const db = firebase.firestore()
//  export const auth = firebase.auth()
export const storage = firebase.storage()
// export const functions = firebase.app().functions('asia-northeast1')
export const database = firebase.database()
// export const googleAuthProvider = new firebase.auth.GoogleAuthProvider()
export default firebase.app()

ディレクトリの設定が終わったら

import { db } from '~/plugins/firebase.js'

これを書いて、databaseからデータを活用していく。

結局これ見た方が早いかも。

Add Firebase to your JavaScript project

わからない単語

デプロイ

デプロイに該当する作業としては、たとえば、ウェブアプリケーションの開発において、作製したプログラムをサーバーにアップロードし、当該のサーバー環境で利用可能にする、という手続きが挙げられます。ただし、必ずしも公開（リリース）作業を指すとは限らず、開発環境からテスト用の環境へアップロードしてテストに使える状態にすることもデプロイといいます。ソフトウェアをインストールする作業もデプロイに該当します。

デプロイとはとは何？Weblio辞書

ホスティング

インターネットなどで、通信事業者のサーバーの一部領域をユーザーに貸し出し、ユーザー独自のウェブ-サーバーとして運用するサービス。

ホスティングとは - Weblio辞書

つまり、Firebase Hosting は、Firebaseが提供しているサーバーってことかな。

気づいたこと

Firebaseのセットアップは先にやった方がいい。

なぜかと言うと、この作業を途中からやった結果、画面が真っ白になってしまい、あるはずのファイルがないってエラーがでてしまったからです。

先にやっておけば、こんなミスもないし、データのやりとりも確認できるはずなので、これからは先に始めていきたいと思います。