Firebase 에뮬레이터 설정

Firebase는 멋지고 모든 것입니다. 하지만 라이브 서버에서 테스트하면서 개발하기로 선택하면 무료 허용량을 빠르게 소진하게 됩니다.
하나의 너무 많은 요청을 만드는 것에서 하나의 우발적인 무한 루프이기 때문입니다.
그래서 더 많은 기능을 갖춘 firestore, 인증, 기능, 스토리지 및 호스팅을 시뮬레이트하는 로컬 테스트 도구인 firebase 에뮬레이터를 개발했습니다.

자세한 설치 과정을 위해
installation procedure

빠른 설정 가이드 실행을 위해

npm install -g firebase-tools

Firebase CLI를 설치하려면
다음을 실행하여 로그인

firebase login

그런 다음 Firebase 버전을 확인하십시오.

firebase --version

프로젝트 루트 디렉토리에서
실행하여 구성 시작

firebase init

우리의 경우 firestore, 함수 및 에뮬레이터, 스페이스 바를 선택하고 확인을 위해 입력해야 합니다.



이 시점에서 기존 Firebase 프로젝트를 연결하거나 없는 경우 새로 만들어야 합니다.



이제 Firebase를 설정하고 기본값을 수락합니다.



기능에 대한 자바 스크립트를 선택하고 기본값도 수락하고 Firestore, 기능 및 인증 에뮬레이터를 선택하십시오.



그런 다음 서비스에 대한 localhost 포트를 선택하면 기본값도 좋습니다. 또한 에뮬레이터 UI를 활성화하려면 선택하십시오.



그런 다음 에뮬레이터 다운로드를 허용하십시오.
마지막으로 에뮬레이터를 강화하십시오.

firebase emulators:start

Firestore를 사용하면 에뮬레이터를 시작할 때 Firestore의 프로덕션 데이터를 가져올 수도 있습니다.
이를 위해서는 다음이 필요합니다.

gcloud CLIdownload

프로젝트는 적어도 blaze 계획

에 있어야 합니다.

질주

gcloud projects list

그런 다음 선택한 프로젝트 ID의 프로젝트를 선택하십시오.

gcloud config set project production-c33c5

그런 다음 다음을 실행하여 데이터를 내보냅니다.

gcloud firestore export gs://"your project id here".appspot.com/save        

그런 다음 이 파일을 로컬 장치의 현재 디렉터리에 복사합니다.

 gsutil -m cp -r gs://production-c33c5.appspot.com/save  .

데이터 실행으로 에뮬레이터를 시작하려면

firebase emulators:start --import ./save

세션을 닫기 전에 변경 사항을 저장할 수 있습니다.

첫 실행

firebase emulators:export ./save

앱을 에뮬레이터에 연결하려면
수입

import { connectAuthEmulator } from "firebase/auth";
import {connectFirestoreEmulator} from "firebase/firestore"
import { connectFunctionsEmulator } from "firebase/functions";

하단의 firebaseConfig.ts에 추가합니다.

connectFirestoreEmulator(db, 'localhost', 8080);
connectAuthEmulator(auth, "http://localhost:9099");
connectFunctionsEmulator(functions, "localhost", 5001);

another nice tip is how to run it on your lan network ,
which is helpfull if you're testing on multiple devices on the > same network.

ipconfig

ipv4 값을 가져옵니다.



firebase.json 파일에서 구성을 변경하고 호스트 값을 ipv4에서 가져온 ipv4 주소로 추가합니다.

  "emulators": {
    "firestore": {
      "port": 8080,
      "host":"192.168.43.238"

    },
    "hosting": {
      "port": 5000
    },
    "ui": {
      "enabled": true
    },
    "auth": {
      "port": 9099
    }
  }

또한 firebaseConfig 에서 connectFirebaseEmulator를 다음과 같이 변경합니다.

connectFirestoreEmulator(db, '192.168.0.109', 8080);

또는 인증을 위해

connectAuthEmulator(auth, "http://192.168.43.238:9099");

마지막으로 주의해야 할 것은 포트 충돌입니다. 이미 사용 중이거나 실행 중인 경우 포트를 변경할 수 있습니다.

npx kill-port "port-number"

행복한 코딩