[nuxt.js その３] firebaseのセットアップ

firebaseのセットアップ

当初作り始めるときはもともとVue.jsで作成済みのものをnuxtに乗せ換えることを考えてましたが、どうせならなんか作ってみようと思います。
といっても、何を作るかまだはっきり決まっていないのでひとまずバックエンド（firebase）のセットアップからやっていきます。

参考：https://chaika.hatenablog.com/entry/2019/01/21/113000

firebase CLIのインストール

$ npm install -g firebase-tools

firebaseアカウントの連携

$ firebase login

プロジェクト内でのfirebaseの初期化

$ firebase init

firebase接続情報の追加

Nuxt.jsではdotenv-moduleを使って環境個別の設定を.envファイルに切り出すことでプロジェクトの環境依存情報を切り離すことができるようです。
.env内で定義された変数はNuxtプロジェクト内にてprocess.env.XXXXのような形で参照できます。
公式ページ

＠nuxtjs/dotenvのインストール

$ yarn add @nuxtjs/dotenv

dotenvモジュールの使用を設定

module.exports = {
  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/dotenv',
  ],
}

.envファイルにfirebase接続情報の追加

.env

FB_API_KEY=<FIREBASE_API_KEY>
FB_AUTH_DOMAIN=<FIREBASE_ AUTH_DOMAIN>
FB_DATABASE_URL=<FIREBASE_DATABASE_URL>
FB_PROJECTID=<FIREBASE_PROJECT_ID>
FB_STORAGE_BUCKET=<FIREBASE_ STORAGE_BUCKET>
FB_MESSAGING_SENDER_ID=<MESSAGING_SENDER_ID>

firebase接続処理の追加

~/plugins/に追加していきます。

~/plugins/firebase.js

import firebase from "firebase";

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 default firebase