【Firebase】Local Emulator Suiteを起動する

Firebase

1. 概要

エミュレータを起動し、アクセスしてみます。

Firebase Local Emulator Suite は、Cloud Firestore、Realtime Database、Cloud Storage for Firebase、Authentication、Firebase Hosting、Cloud Functions (ベータ)、Pub/Sub (ベータ)、および Firebase Extensions(ベータ版)。実行とプロトタイピングを迅速に行うのに役立つ豊富なユーザー インターフェイスを提供します。

たとえば、アプリを Cloud Firestore エミュレータに接続して、テストでドキュメントを安全に読み書きすることができます。

Local Emulator Suiteをインストール、構成、統合する  |  Firebase Local Emulator Suite (google.com)

2. プロジェクトを作成

こちらを参考

3. Firestoreのセットアップ

こちらを参考

4. プロジェクトのロケーションを変更

こちらを参考

5. Functionsのセットアップ

こちらを参考

サンプルソース(functions/src/index.ts)

6. エミュレータ スイートのセットアップ

6-1. 初期化

firebase init emulators
     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:

  /home/sondon/dev/wsl/gcp/firebase/sample003

Before we get started, keep in mind:

  * You are initializing within an existing Firebase project directory


=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  Using project isub-sample-003 (sample003)

=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press <space> to select, <a> 
to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ Authentication Emulator
 ◉ Functions Emulator
 ◉ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◉ Storage Emulator
(Move up and down to reveal more choices)

? Which port do you want to use for the functions emulator? 5001
? Which port do you want to use for the firestore emulator? 8080
? Which port do you want to use for the storage emulator? 9199
? Would you like to enable the Emulator UI? Yes
? Which port do you want to use for the Emulator UI (leave empty to use any available port)? 
? Would you like to download the emulators now? Yes

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

6-2. functions/package.json

{
  "name": "functions",
  "scripts": {
    "lint": "eslint --ext .js,.ts .",
    "build": "tsc",
    "build:watch": "tsc --watch",
    "serve": "npm run build && firebase emulators:start --only functions",
    "shell": "npm run build && firebase functions:shell",
    "start": "npm run shell",
    "deploy": "firebase deploy --only functions",
    "logs": "firebase functions:log"
  },
  "engines": {
    "node": "18"
  },
  "main": "lib/index.js",
  "dependencies": {
    "firebase-admin": "^11.5.0",
    "firebase-functions": "^4.2.0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.48.2",
    "@typescript-eslint/parser": "^5.48.2",
    "eslint": "^8.32.0",
    "eslint-config-google": "^0.14.0",
    "eslint-plugin-import": "^2.27.5",
    "firebase-functions-test": "^3.0.0",
    "typescript": "^4.9.4"
  },
  "private": true
}

6-3. エミュレータを起動

cd functions
npm run serve
> serve
> npm run build && firebase emulators:start --only functions


> build
> tsc

i  emulators: Starting emulators: functions
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: auth, firestore, database, hosting, pubsub, storage
✔  functions: Using node@18 from host.
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "/home/sondon/dev/wsl/gcp/firebase/sample003/functions" for Cloud Functions...
✔  functions: Loaded functions definitions from source: helloWorld.
✔  functions[asia-northeast1-helloWorld]: http function initialized (http://127.0.0.1:5001/isub-sample-003/asia-northeast1/helloWorld).

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://127.0.0.1:4000/               │
└─────────────────────────────────────────────────────────────┘

┌───────────┬────────────────┬─────────────────────────────────┐
│ Emulator  │ Host:Port      │ View in Emulator UI             │
├───────────┼────────────────┼─────────────────────────────────┤
│ Functions │ 127.0.0.1:5001 │ http://127.0.0.1:4000/functions │
└───────────┴────────────────┴─────────────────────────────────┘
  Emulator Hub running at 127.0.0.1:4400
  Other reserved ports: 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

7. 確認

7-1. curlで確認

curl http://127.0.0.1:5001/isub-sample-003/asia-northeast1/helloWorld
Hello from Firebase!

7-2. ブラウザで確認

7-3. Firebase Emulator Suite管理画面

  • http://127.0.0.1:4000/

8. 備考

Firebase Local Emulator Suiteをうまく使い、より心理的な安全性を高め、私達エンジニアが更に気持ちよく働きやすくなれたらと思いますね。

9. 参考

関連記事

  1. Firebase

    【Firebase】Firestore Security Rulesを…

  2. Firebase

    【Firebase】CloudFirestoreトリガーを使ってみる

  3. Firebase

    【Firebase】Cloud Firestoreデータ抽出

  4. Firebase

    【Firebase】Cloud Functionsを使ってみる

  5. Firebase

    【Firebase】Cloud Firestoreを使ってみる

  6. flutter

    【Flutter】Cloud Firestoreと連携

最近の記事

  1. AWS
  2. AWS
  3. AWS
  4. AWS
  5. AWS
  6. AWS
  7. AWS

制作実績一覧

  1. Checkeys