Firebaseを使い始めるために必要な手順

VueでFirebaseを使う時に初期化する方法でつまづいたのでメモです。

実装環境

macOS Big Sur 11.2.3
TypeScript 4.4.3
Vue 2.6.14
Firebase 10.0.1

初期化の方法

npm install firebaseをする。

npm install firebase

src/config/firebase-config.tsファイルを作成し、以下のようにコードをかく。

src/config/firebase-config.ts

import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";
import firebase from "firebase/compat/app";

export const firebaseConfig = {
  apiKey: "process.env.VUE_APP_API_KEY",
  authDomain: "process.env.VUE_APP_AUTH_DOMAIN",
  projectId: "process.env.VUE_APP_PROJECT_ID",
  storageBucket: "process.env.VUE_APP_STORAGE_BUCKET",
  messagingSenderId: "process.env.VUE_APP_MESSAGING_SENDING_ID",
  appId: "process.env.VUE_APP_APP_ID"
};

//Firebase.initializeApp()を何度も呼び出すことを防ぐために以下のコードで対応
export const firebaseApp = !firebase.apps.length
  ? firebase.initializeApp(firebaseConfig)
  : firebase.app();

export const storage = getStorage(firebaseApp);
export const db = getFirestore();

Firebase構成オブジェクト情報を隠しファイルに記載する。

Firebase構成オブジェクト情報は隠しておきたい情報なので、.envファイルに以下のように書いておき、上のファイルから読み取れるようにしておく。また、VueCLI3.x 4.xで環境変数を扱う場合は .env ファイルに VUE_APP_ の接頭語をつけるということなのでVUE_APPも忘れずにつけておく。

.env

VUE_APP_API_KEY = "自分のapiKey"
VUE_APP_AUTH_DOMAIN = "自分のauthDomain"
VUE_APP_PROJECT_ID= "自分のprojectId"
VUE_APP_STORAGE_BUCKET = "自分のstorageBucket"
VUE_APP_MESSAGING_SENDING_ID = "自分のmessagingSenderId"
APP_ID = "自分のappId"

gitにも上げないようにするため、.gitigonreファイルにも以下のように記載する。

.gitignore

./.env.

必要なものをimportする。

Firebase JavaScript SDK (v9.0.0)が2021年8月25日にリリースされたということで、前のバージョンであるv8系のコードとの互換性の問題がある。v8系のコードをv9でも使える様にするためには、基本的にimport時のpathにcompatを加えるだけで使えるとのこと。
Firebaseのサービス共通で必要なのは以下のコード。

exaple.vue

import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import { firebaseConfig } from "@/config/firebase-config";

storageを使用する時には、

const storage = getStorage(firebaseApp);

Firestoreを利用する時には、

const db = getFirestore();

などの定義が必要。

それぞれの変数の使い方については公式ドキュメントを参照。

また、firebase/storageやfirebase/firestoreなどのモジュールから適宜必要なメソッドをインポートする。

終わりに

公式ドキュメントの方法だとうまくいかず、手探りで解決策を見つけました。
今のところ動いていますが、より良い方法がありましたらぜひ教えていただきたいです！