Nuxt.js 2.13 + Firebase

今回 nuxt バージョン 2.13 のプロジェクトに Firestore と Firebase Hosting の設定をご紹介していきたいと思います！

プロジェクトの初期設定で Typescript を選択できるようになったので、より楽になりました！

Nuxt.js 2.13+Typescript のプロジェクト初期設定

新しい Nuxt プロジェクトを作成しましょう！

ターミナルで yarn create nuxt-app <projectName>

選択する時にスペース押すと複数を選択することができるので、下記のように設定しました。

eslint を.ts ファイルをみるように設定したいので、package.json の lint コマンドに.ts ファイルも定義しておきました。

“lint:js”: “eslint — ext .ts,.js,.vue — ignore-path .gitignore .”,

コンソールにログを出すため eslint.rs にルール定義が必要です

"rules": {
  "no-console": "off",
  "no-restricted-syntax": [
    "error",
    {
      "selector": "CallExpression[callee.object.name='console'
        [callee.property.name!=/^(log|warn|error|info|trace)$/]",
      "message": "Unexpected property on console object was called"
    }
  ]
}

このままだとTypescriptがインストールされていますが、プロパティーデコレーターをインストールすることによるコードが読みやくなります。

vue-property-decoratorは vue-class-component に依存しているので両方をインストールする必要があります。

yarn add vue-propery-decorator vue-class-component

NuxtJsのプロジェクト設定はここまでです！

念の為、Nuxtのプロジェクトがコンパイルできるのを確認してみましょう！yarn devを実行するとローカルのブラウザーでNuxtのウェルカムページが見えるはずです。

次はFirebase の Hosting と Firestore を設定していきます！

今回既存のFirebaseプロジェクトを使いますが、新規プロジェクトの場合.envの値をFirebase initの後入れても大丈夫です。

まず必要なパッケージをインストールしましょう

Firebase プロジェクトのコンフィグ情報を管理するため.env ファイルを使っていくので、Dotenv のパッケージをインストールしておきました

yarn add -D @nuxtjs/dotenv

そして nuxt.config.js で Dotenv を BuildModules に設定しました

buildModules: [
  '@nuxtjs/eslint-module',
  '@nuxtjs/vuetify',
  '@nuxt/typescript-build',
  '@nuxtjs/dotenv', ←追記
],

.env ファイルにFirebaseプロジェクトの情報を書いておきましょう

Firebaseコンソールのプロジェクト設定にFirebaseSDKSnippet の Config 値を入れておきました。.envファイルで管理することにより今後環境を切り替え時にやりやすくなります。

FIREBASE_API_KEY= "<firebaseConfig.apiKey>"
FIREBASE_AUTH_DOMAIN="<firebaseConfig.authDomain>"
FIREBASE_DATABASE_URL="<firebaseConfig.databaseURL>"
FIREBASE_PROJECT_ID="<firebaseConfig.projectId>"
FIREBASE_STORAGE_BUCKET="<firebaseConfig.storageBucket>"
FIREBASE_MESSAGING_SENDER_ID="<firebaseConfig.messagingSenderId>"
FIREBASE_APP_ID="<firebaseConfig.appId>"

次Firebase と FirebaseCLI をインストールしましょう

yarn add firebase
yarn add -D firebase-tools

初回 FirebaseCLI を使うため、認証が必要なのでターミナルで firebase login を実行しプロジェクトの対象アカウントにログインをしておきました。

ターミナルでNuxtプロジェクトのダイレクトリーの下でfirebase init を実行しましょう

既存のプロジェクトの設定また新規プロジェクトの作成ができます。今回既存のプロジェクトの設定をやっていきました。

init の設定で様々な設定がありますのでそれぞれを説明します。

1. FirebaseのHostingとFirestoreを設定したいので、両方を選択しました

2. Project Setup

Use an existing project →既存のプロジェクトを選択する場合
デフォルトのプロジェクトを設定しました

3. Firestore Setup

rulesとindexesのファイルを定義できますが、今回デフォルト設定にしました

4. Hosting Setup

コンパイルされたファイルのフォルダーを設定しました。NuxtJsの場合distにコンパイルされたファイルが入っているので、distに設定しました
SPAの場合だと次はYesにしました

5. Emulators Setup

＊エミューレーターを使うため、Javaをインストール必要がありますが、
開発環境でDockerのコンテナを使えばインストールは必要はありません。

今回FirestoreとHostingのエミュレーターをローカルでテストするため設定したので、FirestoreとHostingを選択しました
UIエミューレーターのみ、ポート設定を4000にしました
他のエミューレーターのポートはデフォルトのままで大丈夫です

インストールができましたら Firebase 設定の Plugin を作成しましょう

import * as firebase from 'firebase/app'
import 'firebase/auth'
import 'firebase/firestore'
import { FirebaseOptions } from '@firebase/app-types'
const firebaseConfig: FirebaseOptions = {
  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,
  appId: process.env.FIREBASE_APP_ID,
  measurementId: process.env.MEASUREMENT_ID,
}

今後複数の環境を使うため、.envファイルに環境を定義する変数を入れました。APP_ENVIRONMENT = 'development'

定義したFirebaseAppをInitializeしたら、環境によって使っているFirestoreが設定されます。ローカルの場合だと、ローカルエミュレーターで動いているFirestoreのホストを設定しましまた。

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}
const db = firebase.firestore()
  switch (process.env.APP_ENVIRONMENT) {
    case 'staging':
    case 'production':
    break
  default:
    db.settings({
      host: 'localhost:8080',
      ssl: false,
    })
    break
  }
const auth = firebase.auth()
export { auth, db }

作成したプラグインを nuxt.config.jsに設定しました

plugins: [‘./plugins/firebase.ts’],

上記の設定が終わったらデプロイする前にローカルで確認してみましょう。コードをコンパイルし、serveコマンドでローカルにデプロイします。

yarn generate
firebase serve --only hosting

firebase serve はHostingとFunctionsだけに対応するので、ローカルでルールを試したい時はエミュレーターでテストする必要があります。

ローカルで問題がないようであれば、FirestoreとHostingにデプロイをしてみましょう！ターミナルで下記のコマンドを実行するとHostingとFirestoreのルールがデプロイされます。firebase deploy -P <プロジェクトアリアス> --only hosting,firestore:rules

デプロイが終わったら Hosting の URL で Nuxt のデフォルトページが表示されています。

次回はDockerを利用したNuxtとFirebaseの開発環境を紹介したいと思いますので、参考になればと思います！