Nuxt.js × Vuetify × FirebaseでWEBアプリ作成③

はじめに

この記事は、Nuxt.js, Vuetify, Firebaseを使用し、勤怠管理・出勤集約を行うWEBアプリを作成した過程を記録したものです。

今回は、Firebaseの導入を行います。

Firebaseとは

FirebaseはBaaS(Backend as a Service)と呼ばれるサービスの一つです。

Firebaseを使うと、サーバーレスで開発をすすめることができるので、フロント開発に専念できるという利点があります。

私も今回の開発では時間がなかったので、バックエンドはBaasに任せることに決めました。

Firebaseの機能

Cloud Firestore

Firebaseで使用できるデータベースの一つです。

keyに対応したvalueを取得したり変更作成ができるオブジェクト型のデータベースです。

本プロジェクトでも使用しています。

Firebase Authentication

これを使用するとさまざまなログイン認証機能を導入できます。

パスワード認証をはじめとして、GoogleアカウントやTwitterなどのサードパーティーの認証機能を使用することができます。

本プロジェクトでも使用しています。

Firebase Hosting

WEBページなどを公開することができる機能です。

本プロジェクトでも使用しています。

その他

本プロジェクトでは使用しないので詳しい説明は省きます。

• Firebase Realtime Database
• Cloud Storage for Firebase
• Firebase Cloud Messaging
• Cloud Functions for Firebase

など

Firebaseの導入

公式ドキュメントにも詳しく記載されているの確認しながら行ってください。

Firebaseプロジェクトの作成

1. Firebaseコンソールで[プロジェクトを追加]をクリックします

2. プロジェクトの名前を入力します (プロジェクトIDも任意のものに変更できます)

3. Google アナリティクスを有効にするか決めます。本プロジェクトでは無効にしています

4. [プロジェクトの作成]をクリックします

Firebaseプロジェクトにアプリを登録する

1. 作成したプロジェクトの概要ページの中央にある[アプリを追加]アイコン(</>)をクリックします

2. アプリのニックネームを登録します。Firebaseコンソール上でしか使用しません。

3. 合わせてFirebase Hostingも設定しておきます。選択肢はデフォルトのままで大丈夫です。プロジェクトIDが表示されていると思います。

4. [アプリを登録]をクリックします。

5. 以降はあとでも確認できる項目なので、次へで進めてもらって大丈夫です。

SDKのインストールと初期化

前回作成したNuxt.jsプロジェクトを使用します。

VSCodeのターミナルで下記コマンドを実行します。

yarn add firebase@"9.*"

上記は明示的にFirebaseバージョン9の最新版をインストールします。

(注意)SDKについて

正直言って、ここからが悩ましいところです。

と言うのも、Firebaseは2021年9月にバージョン9がリリースされ以前まで使用していたバージョン8とは大幅に書き方や仕様が変わっています。

2022年4月現在、NuxtでFirebaseのバージョン9を使用したアプリ開発の説明をしてくれているサイトも増えてきていますが、バージョン8と混在しています。(要注意)

今のところ、バージョン8も使えるので他のサイトを参考にしたいという方は、SDKのインストール時にバージョンの確認・指定をするのを忘れないでください。

(補足)@Nuxtjs/firebaseについて

Nuxt.jsにはFirebaseを設定するためのライブラリ「@Nuxtjs/firebase」というのがあります。

私も実際の開発を行ったときは@Nuxtjs/firebaseを使用して、便利に開発を行うことができ愛用していました。

しかし、いまだ@Nuxtjs/firebaseはFirebaseバージョン9に完全対応していないため、今回のサンプルプロジェクト開発では使用しません。

Nuxt.jsでFirebaseの初期化ファイルを作成する

pluginファイルを作成する

Nuxt.jsプロジェクトのルートディレクトリに「plugins」ディレクトリを追加します。

その後、「firebase.js」という名前のファイルを追加してください。

作成後は下記のコードを記述します

plugins/firebase.js

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'
 
const firebaseConfig = {
  apiKey: 'Firebaseコンソールからコピー',
  authDomain: 'Firebaseコンソールからコピー',
  projectId: 'Firebaseコンソールからコピー',
  storageBucket: 'Firebaseコンソールからコピー',
  messagingSenderId: 'Firebaseコンソールからコピー',
  appId: 'Firebaseコンソールからコピー',
};
 
const firebaseApp = initializeApp(firebaseConfig) // ここで初期化してます
const firebaseAuth = getAuth() // Firebase Authenticationに必要なインスタンスです
const firestore = getFirestore(firebaseApp) // Cloud Firestoreに必要なインスタンスです

export default (context, inject) => {
  // injectすることで他のファイルでも初期化したインスタンスを使用できるようにします
  inject('firebase', firebaseApp)
  inject('auth', firebaseAuth)
  inject('db', firestore)
}

ここで指定しているapiKeyなどの値は、Firebaseコンソール上の「プロジェクトの設定 > 全般 > SDK の設定と構成」に記載されているものを使用します。

注意
apiKeyなどの構成情報は公開しているプロジェクトの要です。
直書きして盗み見られたり、間違ってGithubなどで公開してしまうとすぐに悪用されます。

どのようにapiKeyなどの環境変数を取り扱うべきか下記サイトなどを参考にしてみてください。

nuxt.config.jsの設定を書き換える

nuxt.config.jsファイルの「plugins配列」に先ほど作成したpluginのファイル名を追加します。

nuxt.config.js

export default {
  // 省略
  plugins : [ '@/plugins/firebase.js' ]
  // 省略
}

以上で終了です

次回の記事について

次回以降の記事では、今回導入したFirebaseがちゃんと動くのか、どういうコードを記述したらいいのか実際のプログラムと合わせて確認していきたいと思います。

(備考)RuntimeConfigで環境変数を取り扱う方法

先ほど、FirebaseのapiKeyなどは直書きしない方がいいよって話をしましたが、じゃあどうすればいいのかを記しておこうと思います。

以前までのNuxt.jsでは、dotenvというものを使って、環境変数管理を行っていたようですが、v2.13以降はRuntimeConfigというものに移行したようです。

RuntimeConfigの使い方

.envファイルの作成

まずは、ルートディレクトリに.envという名前のファイルを作成します。

そこに下記のようにapiKeyなどの情報を記載します。

.env

apiKey='Firebaseコンソールからコピー'
authDomain='Firebaseコンソールからコピー'
projectId='Firebaseコンソールからコピー'
storageBucket='Firebaseコンソールからコピー'
messagingSenderId='Firebaseコンソールからコピー'
appId='Firebaseコンソールからコピー'

nuxt.config.jsの設定を書き換える

nuxt.config.jsのpublicRuntimeConfigとprivateRuntimeConfigを定義します。

nuxt.config.js

export default {
  // 省略
  publicRuntimeConfig: {
    apiKey: process.env.apiKey,
    authDomain: process.env.authDomain,
    projectId: process.env.projectId,
    storageBucket: process.env.storageBucket,
    messagingSenderId: process.env.messagingSenderId,
    appId: process.env.appId,
  },
  privateRuntimeConfig: {},
  // 省略
}

publicRuntimeConfigはフロントエンドに公開してもいいもの、privateRuntimeConfigはバックエンドのみで使用したいものとして使い分けてください。

ただし、SPAモードの場合はprivateRuntimeConfigは使えないので気を付けてください。

pluginで使えるようにする

plugins/firebase.jsファイルを下記のように修正すれば終わりです。

plugins/firebase.js

import { initializeApp } from 'firebase/app'
import { getAuth } from 'firebase/auth'
import { getFirestore } from 'firebase/firestore'

export default (context, inject) => {
  const firebaseConfig = {
    apiKey: context.$config.apiKey,
    authDomain: context.$config.authDomain,
    projectId: context.$config.projectId,
    storageBucket: context.$config.storageBucket,
    messagingSenderId: context.$config.messagingSenderId,
    appId: context.$config.appId,
  }

  const firebaseApp = initializeApp(firebaseConfig) // ここで初期化してます
  const firebaseAuth = getAuth() // Firebase Authenticationに必要なインスタンスです
  const firestore = getFirestore(firebaseApp) // Cloud Firestoreに必要なインスタンスです

  // injectすることで他のファイルでも初期化したインスタンスを使用できるようにします
  inject('firebase', firebaseApp)
  inject('auth', firebaseAuth)
  inject('db', firestore)
}

参考にしたページ