Firebase 호스팅 에뮬레이터로 웹 앱 프로토타입 제작 및 테스트

Firebase 호스팅 에뮬레이터로 웹 앱의 프로토타입을 제작하고 테스트를 시작하기 전에 전반적인 Firebase 로컬 에뮬레이터 도구 모음 워크플로를 이해하고 있으며 로컬 에뮬레이터 도구 모음을 설치 및 구성하고 CLI 명령어를 검토했는지 확인합니다.

Firebase 호스팅의 기능과 구현 워크플로도 숙지해야 합니다. Firebase 호스팅 소개부터 시작하세요.

Firebase 호스팅 에뮬레이터로 무엇을 할 수 있나요?

Firebase 호스팅 에뮬레이터는 호스팅 서비스의 고급 로컬 에뮬레이션을 제공하여 프로덕션 호스팅의 기능 대부분을 제공합니다. 호스팅 에뮬레이터를 통해 다음 작업을 할 수 있습니다.

  • 스토리지 또는 액세스 비용 발생 없이 정적 사이트 및 웹 앱의 프로토타입 제작
  • 호스팅 사이트에 배포하기 전에 HTTPS 함수 프로토타입 제작, 테스트, 디버그
  • 컨테이너화된 지속적 통합 워크플로에서 사이트와 웹 앱 테스트

Firebase 프로젝트 선택

Firebase 로컬 에뮬레이터 도구 모음은 단일 Firebase 프로젝트의 제품을 에뮬레이션합니다.

에뮬레이터를 시작하기 전에 사용할 프로젝트를 선택하려면 CLI로 작업 디렉터리에서 firebase use를 실행합니다. 또는 --project 플래그를 각 에뮬레이터 명령어에 전달합니다.

로컬 에뮬레이터 도구 모음은 실제 Firebase 프로젝트 및 데모 프로젝트의 에뮬레이션을 지원합니다.

프로젝트 유형 특징 에뮬레이터와 함께 사용
실제

실제 Firebase 프로젝트는 주로 Firebase Console을 통해 만들고 구성한 프로젝트입니다.

실제 프로젝트에는 데이터베이스 인스턴스, 스토리지 버킷, 함수 또는 해당 Firebase 프로젝트에 설정한 기타 리소스와 같은 라이브 리소스가 있습니다.

실제 Firebase 프로젝트로 작업할 때는 지원되는 제품 일부 또는 전부를 에뮬레이션할 수 있습니다.

에뮬레이션하지 않는 제품의 경우 앱과 코드가 데이터베이스 인스턴스, 스토리지 버킷, 함수 등 라이브 리소스와 상호작용합니다.

데모

데모 Firebase 프로젝트에는 실제 Firebase 구성이 없으며 라이브 리소스도 없습니다. 이러한 프로젝트는 일반적으로 Codelab 또는 기타 튜토리얼을 통해 액세스합니다.

데모 프로젝트의 프로젝트 ID에는 demo- 프리픽스가 있습니다.

데모 Firebase 프로젝트로 작업할 때는 앱과 코드가 에뮬레이터와만 상호작용합니다. 앱이 에뮬레이터에서 실행 중이지 않은 리소스와 상호작용하려고 하면 코드가 실패합니다.

가능한 한 데모 프로젝트를 사용하는 것이 좋습니다. 장점은 다음과 같습니다.

  • 손쉬운 설정: Firebase 프로젝트를 만들지 않고도 에뮬레이터를 실행할 수 있습니다.
  • 강력한 안전성: 코드에서 실수로 에뮬레이션되지 않은(프로덕션) 리소스를 호출하더라도 데이터 변경, 사용, 청구 등이 발생할 가능성이 없습니다.
  • 오프라인 지원 향상: SDK 구성을 다운로드하기 위해 인터넷에 액세스할 필요가 없습니다.

핵심 프로토타입 제작 워크플로

빠르게 반복 작업을 수행하거나 앱이 에뮬레이션된 백엔드 프로젝트 리소스와 상호작용하도록 하려면 호스팅 콘텐츠 및 구성을 로컬로 테스트할 수 있습니다. 로컬로 테스트할 때 Firebase는 웹 앱을 로컬로 호스팅된 URL로 제공합니다.

  1. (선택사항) 기본적으로 로컬로 호스팅된 앱은 에뮬레이션된 것이 아니라 실제 프로젝트 리소스(함수, 데이터베이스, 규칙 등)와 상호작용합니다. 그 대신 선택적으로 사용자가 구성한 에뮬레이션된 프로젝트 리소스를 사용하도록 앱을 연결할 수 있습니다. 자세히 알아보기: 실시간 데이터베이스 | Cloud Firestore | Cloud Functions

  2. 로컬 프로젝트 디렉터리의 루트에서 다음 명령어를 실행합니다.

    firebase emulators:start

  3. CLI에서 반환된 로컬 URL로 웹 앱을 엽니다(일반적으로 http://localhost:5000).

  4. 변경사항으로 로컬 URL을 업데이트하기 위해 브라우저를 새로고침합니다.

다른 로컬 기기에서 테스트

기본적으로 에뮬레이터는 localhost의 요청에만 응답합니다. 즉, 컴퓨터의 웹브라우저에서는 호스팅된 콘텐츠에 액세스할 수 있지만 네트워크의 다른 기기에서는 액세스할 수 없습니다. 다른 로컬 기기에서 테스트하려면 firebase.json을 다음과 같이 구성합니다.

"emulators": {
    // ...

    "hosting": {
      "port": 5000
      "host": "0.0.0.0"
    }
  }

지속적 통합 워크플로를 위한 인증 토큰 생성

지속적 통합 워크플로가 Firebase 호스팅을 사용하는 경우 firebase emulators:exec를 실행하려면 토큰을 사용하여 로그인해야 합니다. 다른 에뮬레이터에는 로그인이 필요하지 않습니다.

토큰을 생성하려면 로컬 환경에서 firebase login:ci를 실행합니다. 이 작업은 CI 시스템에서 수행하면 안 됩니다. 안내에 따라 인증하세요. 토큰은 빌드 간에 유효하므로 프로젝트당 한 번만 수행하면 됩니다. 토큰은 비밀번호처럼 비밀로 유지해야 합니다.

CI 환경에서 빌드 스크립트에 사용할 수 있는 환경 변수를 지정할 수 있으면 값이 액세스 토큰 문자열인 FIREBASE_TOKEN이라는 환경 변수를 만들면 됩니다. Firebase CLI가 자동으로 FIREBASE_TOKEN 환경 변수를 선택하고 에뮬레이터가 올바르게 시작됩니다.

마지막 수단으로 빌드 스크립트에 토큰을 포함할 수 있지만 신뢰할 수 없는 사용자가 액세스할 수 없도록 해야 합니다. 이 하드 코딩된 방식의 경우 firebase emulators:exec 명령어에 --token "YOUR_TOKEN_STRING_HERE"를 추가할 수 있습니다.

다음 단계