Firebase + Nuxt.jsでプロジェクトをセットアップする手順書

GitHubでリポジトリ作る

GitHub · Build and ship software on a single, collaborative platform

Nuxt.jsのプロジェクトを初期化する

まず作ったリポジトリからgit cloneしてこよう。

https://ja.nuxtjs.org/guide/installation を参考に初期化コマンドを実行する。

Project name と Project description は適当に書こう。

Firebase上に配置するのでUse a custom server frameworkはnoneで良いと思われる。

Use a custom UI framework は好みで選べば良い。私はUI frameworkは使用しないのでnoneを選択する。

Choose rendering mode は Firebase Hosting に単に配置するだけであれば Single Page App で良いと思われる。

Use axios module は分からんけどもこだわりなければ、とりあえず公式が用意した axios を使うのはそんなに悪い選択肢では無さそう。

Use eslint と Use prettier は、とりあえず yes にしておこう。

Author name は自分の名前でいいでしょ。

Choose a package manager は入れた覚えがあるなら yarn にしましょう。

ここでコミットしときましょ。

Firebaseの設定

https://firebase.google.com/ にてプロジェクトを作りましょう。そして、Firebaseを読み込みましょう。Nuxt.jsのプラグインを使います。

まず plugins/firebase.js を作ります。

import Vue from 'vue'
import firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'

firebase.initializeApp({
  apiKey: process.env.FIREBASE_API_KEY,
  authDomain: process.env.FIREBASE_AUTH_DOMAIN,
  databaseURL: process.env.FIREBASE_DATABASE_URL,
  projectId: process.env.FIREBASE_PROJECT_ID,
  storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID
})

const firestore = firebase.firestore()
const settings = { timestampsInSnapshots: true }
firestore.settings(settings)

Vue.prototype.$firebase = firebase

export default (context, inject) => {
  firebase.auth().onAuthStateChanged(function(user) {
    context.app.store.commit('setUser', user)
  })
}

あとライブラリも忘れずに入れておきましょう。

$ yarn add firebase

あとstoreを使ったので都合上 store/index.js を作成します。
※ なお onAuthStateChanged を action に入れてしまう案も検討しています。

import Vuex from 'vuex'

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      auth: null,
      user: null
    }),
    mutations: {
      setUser(state, user) {
        state.user = user
        state.auth = !(user === null)
      }
    }
  })
}

export default createStore

一回だけ呼び出されればいいかつFirebase連携サービスで、Firebaseが必要にならない可能性ってかなり低いのでSPAが呼び出された時点で読み込んで良いとして nuxt.config.js に読み込み設定を追加した。

/*
** Plugins to load before mounting the App
*/
plugins: [
  '@/plugins/firebase.js'
]

環境変数をプロジェクトから分離するために .env.template を作成する。

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_DATABASE_URL=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=

Readme.md に環境変数のセットアップ方法は書いておこう。

## Prepare Environment Values

```
# create .env file
$ cp .env.template .env
```

あと環境変数が読み込まれないと意味がないので @nuxtjs/dotenv というモジュールを導入しましょう。

$ yarn add @nuxtjs/dotenv

 そして nuxt.config.js に追加して読み込みましょう。

modules: [
  // Doc: https://github.com/nuxt-community/axios-module#usage
  '@nuxtjs/axios',
  '@nuxtjs/dotenv'
]

CircleCIでオートデプロイの設定

# Javascript Node CircleCI 2.0 configuration file
#
# Check https://circleci.com/docs/2.0/language-javascript/ for more details
#
version: 2
jobs:
  build:
    branches:
      only:
        - master
    docker:
      # specify the version you desire here
      - image: circleci/node:10.12.0-stretch-browsers-legacy

      # Specify service dependencies here if necessary
      # CircleCI maintains a library of pre-built images
      # documented at https://circleci.com/docs/2.0/circleci-images/
      # - image: circleci/mongo:3.4.4

    working_directory: ~/repo

    steps:
      - checkout

      # Download and cache dependencies
      - restore_cache:
          keys:
          - v1-dependencies-{{ checksum "package.json" }}
          # fallback to using the latest cache if no exact match is found
          - v1-dependencies-
      - restore_cache:
          keys:
          - v1-dependencies-functions-{{ checksum "functions/package.json" }}
          # fallback to using the latest cache if no exact match is found
          - v1-dependencies-functions

      - run: yarn install
      - run: cd functions && yarn install

      - run:
          name: Add env
          command: |
            echo "FIREBASE_API_KEY=$FIREBASE_API_KEY" > .env
            echo "FIREBASE_AUTH_DOMAIN=$FIREBASE_AUTH_DOMAIN" >> .env
            echo "FIREBASE_DATABASE_URL=$FIREBASE_DATABASE_URL" >> .env
            echo "FIREBASE_PROJECT_ID=$FIREBASE_PROJECT_ID" >> .env
            echo "FIREBASE_STORAGE_BUCKET=$FIREBASE_STORAGE_BUCKET" >> .env
            echo "FIREBASE_MESSAGING_SENDER_ID=$FIREBASE_MESSAGING_SENDER_ID" >> .env
      - save_cache:
          paths:
            - node_modules
          key: v1-dependencies-{{ checksum "package.json" }}
      - save_cache:
          paths:
            - functions/node_modules
          key: v1-dependencies-functions-{{ checksum "functions/package.json" }}

      # run tests!
      # - run: yarn test

      - run:
          name: Build
          command: yarn build

      - run:
          name: Deploy Master to Firebase
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN

$ firebase login:ci

謝辞

記事作成に辺り @naoki85_201612 さんに書いていただいたコードを参考にさせて頂きました為にお礼申し上げます。

※ 今後も色々情報を書いていこうと思いますので、この記事がお役に立ちましたらよかったらnoteのサポートを送ってみてください🙇‍♂️