くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > Firebase Emulator Suiteを使ってみた

Firebase Emulator Suiteを使ってみた

Nuxt.js TypeScript Firebase Firebase Emulator Suite

Firebase Local Emulator Suiteを使ってみたときの備忘録。

初期設定

# バージョンの確認。CLIがv8.14.0以降じゃないと使えない。
$ firebase --version

# Firebase自体の初期設定
$ firebase init

# Emulator Suiteの初期設定
$ firebase init emulators

コマンドを実行すると、使うものを聞かれるので、選択して設定を完了する。

Nuxtアプリからエミュレータを使うようにする

エミュレータを使うかどうかは明示的に設定する必要がある。

// firebase.ts
import firebase from "firebase/app";
import "firebase/auth";
import "firebase/firestore";
import "firebase/functions";

if (!firebase.apps.length) {
  // いつもの初期化
  firebase.initializeApp({
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
    measurementId: process.env.MEASUREMENT_ID
  });
  firebase.auth().useDeviceLanguage();


  // Emulatorの有効化
  if (process.env.NODE_ENV != "production") {
    // Authentication用の設定
    firebase.auth().useEmulator("http://localhost:9099/");
    
    // Cloud Functions用の設定
    const functions = firebase.app().functions("asia-northeast1");
    functions.useEmulator("localhost", 5001);

    // Firestore用の設定
    firebase.firestore().settings({ host: "localhost:8081", ssl: false });
  }
}

export default firebase;

各ポートは、firebase.jsonに記載されているものを設定すればOK。

エミュレータを起動する

以下のコマンドを実行すると、設定したエミュレータが起動する。

$ firebase emulators:start

エミュレータを起動した状態で、

# nuxtアプリの起動
$ npm run dev

とすると、エミュレータに接続した状態で、動作確認ができるようになる。
エミュレータを停止するときは、Ctrl+Cで終了する。

エミュレータのデータを次回起動時にも残しておくようにする

なにもしないと、エミュレータを停止するとデータは削除される。

テスト用に初期データを用意しておきたい場合とかように、
エミュレータ内のデータをexport/importできるようになっている。
ただ、永続化できるのはFirestoreやRealtime Database限定。。

以下のオプションを使うと、

  • 停止時にデータを./.emulatorにexportし、(--export-on-exit)
  • 起動時に./.emulatorからimport(--import=./.emulator)

してくれるようになる。

$ firebase emulators:start --import=./.emulator --export-on-exit
本番データをエミュレータ内に取り込む

import機能があるので、それを使うと本番データも取り込めるっぽい。

ネットワーク越しでもアクセスできるようにする

スマホでの確認とか、localhost以外からアクセスできるようにしたい場合は、 firebase.jsonにhostを設定すればよいっぽい。

// firebase.json
"emulators": {
    "auth": {
      "host": "0.0.0.0",
      "port": 9099
    },
    "firestore": {
      "host": "0.0.0.0",
      "port": 8081
    },
    "ui": {
      "enabled": true
    },
    "functions": {
      "host": "0.0.0.0",
      "port": 5001
    },
    "hosting": {
      "host": "0.0.0.0",
      "port": 5000
    }
  }

あとは、~/plugins/firebase.tsやnuxt.config.tsの設定を変えればOK。

// ~/plugins/firebase.ts
  // Emulatorの有効化
  if (process.env.NODE_ENV != "production") {
    // Authentication用の設定
    firebase.auth().useEmulator("http://192.168.0.2:9099/");
    
    // Cloud Functions用の設定
    const functions = firebase.app().functions("asia-northeast1");
    functions.useEmulator("192.168.0.2", 5001);

    // Firestore用の設定
    firebase.firestore().settings({ host: "192.168.0.2:8081", ssl: false });
  }

// nuxt.config.ts

import { NuxtConfig } from "@nuxt/types";
const config: NuxtConfig = {
  server: {
    port: 3000,
    host: "0.0.0.0"
  },
};

export default config;

ハマったところ

使ってみて、いくつかハマった。。

Cloud Functions
  • ビルドしないと反映されない
    • TypeScriptを使ってる場合、読み込んでいるのは、コンパイルされたjsなので、ビルドしないと反映されない。。
  • Functions側は特に設定しなくてもOK。
    エミュレータ上で起動しているときは、勝手に接続先がエミュレータになってる
Authentication
  • ユーザのimport/export機能はない
    • なので、Firestoreのデータだけが残る状態になる
  • ユーザを都度作成する必要がある
    • Twitter連携などは確認できず、アカウントを作成しないといけない
    • Twitter連携のためにAuthでエミュレータを使わないようにすると、
      エミュレータ上でCloud FunctionsのAuthトリガーの確認などができない。。

少しつまずくところがあるけど、初期の確認などだとかなり便利(´ω｀)
以上!!

参考にしたサイト