Firebase App Hosting 에뮬레이터로 로컬에서 웹 앱 테스트

Firebase 로컬 에뮬레이터 도구 모음의 일부인 App Hosting 에뮬레이터를 사용하여 App Hosting 배포 전에 앱의 로컬 테스트를 실행할 수 있습니다.

App Hosting 에뮬레이터를 사용하기 전에 전반적인 Firebase 로컬 Local Emulator Suite 워크플로를 이해하고 로컬 Local Emulator Suite을 설치 및 구성하며 CLI 명령어를 검토해야 합니다.

이 주제는 App Hosting에 대한 이해도를 전제로 합니다. 필요한 경우 App Hosting 소개 및 기타 자료를 검토하여 App Hosting 작동 방식을 이해하세요.

App Hosting 에뮬레이터로 무엇을 할 수 있나요?

App Hosting 에뮬레이터를 사용하면 로컬에서 웹 애플리케이션을 테스트하고 수정하여 프로덕션 환경을 거의 그대로 복제할 수 있습니다. 이렇게 하면 개발 프로세스를 간소화하고 Firebase를 사용하여 빌드되고 App Hosting에 배포된 웹 앱의 품질을 향상할 수 있습니다.

App Hosting 에뮬레이터:

  1. apphosting.yaml 구성 파일에 정의된 환경 변수를 사용하여 웹 앱을 로컬에서 실행할 수 있습니다.
  2. 여러 App Hosting 환경에 저장된 보안 비밀을 내보내므로 여러 환경에서 애플리케이션을 시뮬레이션할 수 있습니다.
  3. 다른 Firebase 에뮬레이터와 함께 사용할 수 있습니다. Firestore, 인증 또는 기타 에뮬레이터를 사용하는 경우 Local Emulator Suite을 사용하면 이러한 에뮬레이터가 App Hosting 에뮬레이터보다 먼저 시작됩니다.

에뮬레이터 구성

시작하려면 로컬 에뮬레이터 도구 모음 설치, 구성, 통합에 설명된 대로 Local Emulator Suite을 설치하고 초기화합니다. 설정하려는 다른 Firebase 에뮬레이터 외에도 App Hosting Emulator를 선택해야 합니다. CLI에 다음과 같은 일부 App Hosting 에뮬레이터 값을 입력하라는 메시지가 표시됩니다.

firebase init emulators
=== 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)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (.)

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)

i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

이 설정 흐름에서 제공하는 모든 값은 firebase.json에서 App Hosting 에뮬레이터 구성을 업데이트하는 데 사용됩니다. firebase.json을 직접 업데이트하여 App Hosting 에뮬레이터를 구성할 수도 있습니다. App Hosting 에뮬레이터의 스키마는 다음과 같습니다.

{
  ...
  "emulators": {
    "apphosting": {
      "startCommandOverride": <command> [optional]
      "rootDirectory": <path> [optional]
      }
    }
  }
  • startCommandOverride는 에뮬레이터가 초기화될 때 자동으로 생성되고 설정됩니다. 제공되지 않으면 에뮬레이터가 패키지 관리자의 dev 명령어를 감지하고 실행합니다.
  • rootDirectory는 모노레포 프로젝트 설정을 지원하는 데 사용됩니다. 웹 앱이 하위 디렉터리에 있는 경우 루트(firebase.json의 위치)를 기준으로 해당 디렉터리의 경로를 제공해야 합니다.

에뮬레이션 관리

에뮬레이터 초기화는 앱의 루트 디렉터리에 apphosting.local.yaml 파일을 만듭니다. 이 구성 파일은 프로덕션에 사용되는 apphosting.yaml 파일과 동일한 스키마를 갖지만 로컬 개발 전용입니다. 기본적으로 에뮬레이터는 apphosting.yaml 파일에서 구성을 읽지만 apphosting.local.yaml 파일이 있는 경우 해당 파일의 구성이 우선순위가 지정되고 우선 적용됩니다.

보안 비밀을 내보내 로컬에서 여러 환경 시뮬레이션

여러 환경에서 작업하고 로컬에서 여러 앱 환경을 시뮬레이션하려면 해당 환경의 보안 비밀이 필요할 수 있습니다. CLI 명령어 apphosting:config:export를 사용하여 특정 환경의 보안 비밀을 내보낼 수 있습니다. 또는 에뮬레이터 구성에 표시된 대로 원하는 경우 에뮬레이터 초기화 중에 보안 비밀을 가져올 수 있습니다.

이 명령어를 사용하려면 프로젝트에서 사용 가능한 App Hosting 환경 중에서 선택해야 합니다. 환경별 App Hosting 구성(예: 'apphosting.staging.yaml')과 기본 App Hosting 구성('apphosting.yaml')이 병합되며 환경별 구성이 우선 적용됩니다. 두 구성에 동일한 이름의 보안 비밀이 있는 경우 환경별 구성의 보안 비밀이 사용됩니다.

예를 들어 스테이징 환경에서 에뮬레이터로 보안 비밀을 내보내려면 다음을 실행합니다.

firebase apphosting:config:export --project <your firebase project Id>

? What configs would you like to export? (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 ❯◯ Secrets

? Which environment would you like to export secrets from Secret Manager for?:
  ◯ base (apphosting.yaml)
 ❯◯ staging (apphosting.yaml + apphosting.staging.yaml)
  ◯ preview (apphosting.yaml + apphosting.preview.yaml)
i Wrote Secrets as environment variables to apphosting.local.yaml.
i apphosting.local.yaml has been automatically added to your .gitignore.

내보낸 보안 비밀이 환경 변수로 apphosting.local.yaml 파일에 업데이트(파일이 없는 경우 생성됨)됩니다. 이제 파일에 민감한 정보가 일반 텍스트로 포함되어 있으므로 실수로 소스 코드 저장소에 커밋되지 않도록 .gitignore 파일에 자동으로 추가됩니다.

에뮬레이터 실행

firebase emulators:start

이렇게 하면 App Hosting 에뮬레이터를 비롯하여 firebase.json 파일에 정의된 모든 에뮬레이터가 시작됩니다.