🦄

Firebase v9 with Nuxt.js

2021/11/12に公開

Firebase

概要

Firebase v9を使用して簡単なメモアプリを作成しました。このアプリでは、Hosting, Authentication, Firestoreを使用したため、それらの手順やコードの解説をこの記事に記そうと思います。

はじめに

FirebaseはGoogleが提供しているモバイルおよびWebアプリケーションのバックエンドサービスです。Firebaseを使用することで、バックエンドで動くサービス（データベース,ユーザ認証,ホスティングなど）を全てやってくれる優れものです。

もっと詳しく知りたい方へ
https://firebase.google.com/docs/auth

Firebase v8とv9の違い

Firebase v8とv9のコードを比べてみると以下のようになります。
v8では以下のようにchainingして処理を行っていたのですが、v9ではmodular形式になりました。

Firebase v8

// Add a new document in collection "cities"
db.collection("cities").doc("LA").set({
    name: "Los Angeles",
    state: "CA",
    country: "USA"
})
.then(() => {
    console.log("Document successfully written!");
})
.catch((error) => {
    console.error("Error writing document: ", error);
});

Firebase v9

import { doc, setDoc } from "firebase/firestore";

// Add a new document in collection "cities"
await setDoc(doc(db, "cities", "LA"), {
  name: "Los Angeles",
  state: "CA",
  country: "USA"
});

実装

ここから具体的に実装のコードを見ていきたいと思います。

Setting

Firebaseコンソールから該当のプロジェクトを選択->設定ボタン->プロジェクトの設定->全般と遷移するとFirebaseを使用する際に必要となる設定値が記述されているため、それらを使用します。

plugin/firebase.js

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app"
import { getAnalytics } from "firebase/analytics"
import { getFirestore } from "firebase/firestore"

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: "your aplKey",
  authDomain: "your authDomain",
  projectId: "your projectId",
  storageBucket: "your storageBucket",
  messagingSenderId: "your messagingSenderId",
  appId: "your appId",
  measurementId: "your measurementId"
}

const firebase = initializeApp(firebaseConfig)
const database = getFirestore(firebase)
const analytics = getAnalytics(firebase)

export default database

Hosting

Nuxt.jsではnpm run generationでdistを作成したのちに、firebase deployのコマンドを打つことでHostingが完了します。その際、以下のようにfirebase.jsonで、hosting->publicのところにdistを設定してあげる必要があります。

firebase.json

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Auth

今回、認証では匿名とGoogle accountの両方を実装しました。また、ページリロードをすると認証が外れてしまうため、ログインを維持するために、onAuthを実装しました。また、認証状態の永続性についてはsetPersistenceで設定しています。詳しくは以下の記事が参考になります。

Guest Account

store/index.js

  async loginGuest({ commit }) {
    console.log('guest login action')
    const auth = getAuth()

    await signInAnonymously(auth)
      .then((result) => {
        const user = result.user
        commit('setUserUid', user.uid)
        commit('setUserName', user.displayName)

        console.log('guest login success')
      }).catch((error) => {
        const errorCode = error.code
        const errorMessage = error.message

        console.log('guest login error: ', errorCode, errorMessage)
      })

    await setPersistence(auth, browserSessionPersistence)
      .then(() => {
        console.log('guest keeping state')
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('guest keeping state error: ', errorCode, errorMessage)
      })
  },

Google Account

store/index.js

  async login({ commit }) {
    console.log('login action')
    const provider = new GoogleAuthProvider()
    const auth = getAuth()

    await signInWithPopup(auth, provider)
      .then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result)
        const token = credential.accessToken

        const user = result.user
        commit('setUserUid', user.uid)
        commit('setUserName', user.displayName)
        
        console.log('login success')
      }).catch((error) => {
        const errorCode = error.code
        const errorMessage = error.message

        const credential = GoogleAuthProvider.credentialFromError(error)

        console.log('login error: ', errorCode, errorMessage)
      })

    await setPersistence(auth, browserSessionPersistence)
      .then(() => {
        console.log('keeping state')
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('keeping state error: ', errorCode, errorMessage)
      })
  },

store/index.js

  onAuth({ commit }) {
    const auth = getAuth()
    onAuthStateChanged(auth, (user) => {
      user = user ? user : {}
      commit('setUserUid', user.uid)
      commit('setUserName', user.displayName)
      commit('setLoginStatus', user.uid ? true : false)
      console.log('onAuth')
    })
  }

Firestore

以下を記述することで、uid部分がコレクション、String(this.num)の部分がドキュメント、whichやmemoがフィールドになり、Firestoreにデータを追加することができます。

components/BaseBackground.vue

await setDoc(doc(database, uid, String(this.num)), {
  which: this.which,
  memo: this.memo
})

まとめ

Firebaseを使用することで、本来であれば認証やデータベースを自力で実装する必要がありましたが、それをすることなく、簡単にWebアプリを実装することができました。また、Firebaseを利用する際、公式ドキュメントを参考にすれば実装することができるのでおすすめです。

最後に

最後まで読んでくださってありがとうございました。
下記に実装したWebアプリURLとGithub repositoryを記載しておきます。
参考になりましたら幸いです。

https://kanban-aeff4.web.app/
https://github.com/daiki328/kanban

では、いいFirebase lifeを！

参考

https://firebase.google.com/docs/build

概要

はじめに

Firebase v8とv9の違い

実装

Setting

Hosting

Auth

Firestore

まとめ

最後に

参考

Discussion