Vue.jsを用いたFirebase APIの使い方

Vue Web JavaScript

はじめに

お久しぶりです。Vueの心機一転記事を書いていきます。
ポートフォーリオで自分の更新を機能を加えたいなと思い、
自己ログイン機能と編集機能を実装します。
FirebaseだとCloud Store、Authentication、DataBaseが用意されているので、
簡単に実装できそうです。

環境構築

環境構築は以前の記事を参考にしてください。

melheaven.hatenadiary.jp

firebaseのインストール

nodemonでコードでの編集を自動で反映してくれるパッケージを追加。
firebaseを使うには、'firebase'パッケージをインストール。

npm install firebase nodemon vue-router

envファイルを作成

firebaseのAPIへアクセスするには、
あらかじめAPIキーなどの設定をする必要があります。
これらの設定情報は隠したいので、Githubにコミットする場合、envファイルを作成する必要があります。

"〜〜〜〜〜"の部分が個人で異なる箇所です。
このとき気をつけるのは、VUE_APP_が頭にないと、環境変数として認識されません。
Vue-cli 3.X以降の話？？
以下が.env.developmentファイル。

VUE_APP_API_KEY = "〜〜〜〜〜"
VUE_APP_AUTH_DOMAIN = "https://〜〜〜〜〜.firebaseio.com"
VUE_APP_DATABASE_URL = "https://〜〜〜〜〜.firebaseio.com"
VUE_APP_PROJECT_ID = "〜〜〜〜〜"
VUE_APP_STORAGE_BUCKET = "〜〜〜〜〜.appspot.com"
VUE_APP_MESSAGE_SENDING= " 〜〜〜〜〜"

package.jsonに以下の記述をします。
.env.〇〇ファイルを読み込見たい場合、"vue-cli-service serve --mode 〇〇"と実行すればいいそうです。

 "scripts": {
    "dev-serve": "vue-cli-service serve --mode development",
    "dev-build": "vue-cli-service build --mode development",
    "lint": "vue-cli-service lint"
  },

以下のコマンドを実行します。

npm run dev-serve

.gitignoreをgit initした箇所の直下に置いて、
.env.developmentを指定します。
ついでにnode_modulesもファイル量が多いので、ignoreします。
以下は.gitignore

./.env.development
./myapp/node_modules

Vue側のソースコード

main.jsで以下のコードを貼ります。

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import firebase from 'firebase'

Vue.config.productionTip = false

const config = {
  apiKey: process.env.VUE_APP_API_KEY,
  authDomain: process.env.VUE_APP_AUTH_DOMAIN,
  databaseURL: process.env.VUE_APP_DATABASE_URL,
  projectId: process.env.VUE_APP_PROJECT_ID,
  storageBucket: process.env.VUE_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.VUE_APP_MESSAGE_SENDING
}

console.log(config);
firebase.initializeApp(config);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

console.logで設定情報をデベロッパーツールで確認できますね！

次回

次回はログイン認証をまとめます。