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

Firebase Functionsのスケジュール実行はローカルでは動かない

まだサポートされておらず機能リクエストがissueに挙がっている状況

_this.auth.addAuthTokenListener is not a function

8.6.5にダウングレードした

Firestoreで特定のfieldがnullのドキュメントを取得する

where('field', '==', null)で条件指定できる

Firestoreの複合インデックスを削除する

CLI経由で削除する必要があった