Next.jsでFirebase Local Emulatorを使う

公開日時
更新日時

Firebase Local Emulator Suiteを使うとローカルでFirestoreやAuthが使えるようになる。

公式ドキュメントのサンプルだと location.hostname の値を元に useEmulator の切り替えを行っていたが、よりシンプルにして NEXT_PUBLIC_USE_FIREBASE_EMULATOR 環境変数がtrueの場合はEmulatorを利用するようにした。

  • lib/firebaseHelpers.ts
import 'firebase/firestore'

import firebase from 'firebase/app'

const isEmulator = () => {
  const useEmulator = process.env.NEXT_PUBLIC_USE_FIREBASE_EMULATOR
  return !!(useEmulator && useEmulator === 'true')
}

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_PUBLIC_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
}

export function getApp() {
  if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)

    if (isEmulator()) {
      firebase.firestore().useEmulator('localhost', 8080)
    }
  } else {
    firebase.app()
  }

  return firebase
}

export function getFirestore() {
  return getApp().firestore()
}

export function getFunctions() {
  const region = isEmulator() ? undefined : 'asia-northeast1'
  return getApp().functions(region)
}
  • export NEXT_PUBLIC_USE_FIREBASE_EMULATOR=true を設定し、別ターミナルでEmulatorを起動しておけばFirestore Emulatorに接続される
yarn run firebase emulators:start

Related #firebase

YouTubeの「Firebase Release Notes」プレイリスト

最新のアップデートの概要を把握するのにちょうど良い

Nuxt.jsのservice workerで環境変数を切り替えられるようにする

設定情報をハードコードしたくなかったので、ビルド時にnodeコマンドでファイル生成を行い環境変数を切り替えられるように対応した。

CloudFunctionsを使ってFirestoreのサブコレクションを削除する

CloudFunctions内でFirebase CLIのdeleteコマンドを呼び出すことで一括削除ができる

Firebase Hostingのリリース履歴を一括削除する

いつの間にか一括削除機能が追加されていた