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. apphosting.emulator.yaml 파일을 사용하여 에뮬레이터에서 사용할 환경 변수와 보안 비밀을 재정의할 수 있습니다.
  3. 다른 Firebase 에뮬레이터와 함께 사용할 수 있습니다. Firestore, 인증 또는 기타 에뮬레이터를 사용하는 경우 Local Emulator Suite을 사용하면 이러한 에뮬레이터가 App Hosting 에뮬레이터보다 먼저 시작됩니다.

에뮬레이터 구성

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

  • 프로젝트를 기준으로 한 앱의 루트 디렉터리입니다. 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 (./)

? The App Hosting emulator uses a file called apphosting.emulator.yaml to
override values in apphosting.yaml for local testing. This codebase does not
have one, would you like to create it? (Y/n)

? Which environment variables would you like to override? (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ MEMCACHE_ADDR
 ◯ API_KEY

? What new value would you like for plaintext MEMCACHE_ADDR?

? What would you like to name the secret reference for API_KEY? (test-api-key)

? What new value would you like for secret TESTKEY [input is hidden]? [input is hidden]

? Your config has secret values. Please provide a comma-separated list of users
or groups who should have access to secrets for local development:

✔  Successfully set IAM bindings on secret test-api-key.

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

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

에뮬레이션 관리

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

apphosting.emulator.yaml 파일은 안전하게 커밋하고 동료와 공유할 수 있도록 설계되었습니다. 민감한 정보를 실수로 소스 저장소에 커밋하지 않도록 하려면 apphosting.yaml에서 보안 비밀인 모든 환경 변수가 apphosting.emulator.yaml에서도 보안 비밀이어야 합니다. 프로덕션과 로컬 개발 간에 보안 비밀을 변경할 필요가 없는 경우(예: Gemini API 키) apphosting.emulator.yaml에 추가할 필요가 없습니다. 대신 팀에 보안 비밀에 대한 액세스 권한을 부여합니다.

애플리케이션에서 많은 보안 비밀을 사용하는 경우(예: 프로덕션, 스테이징, 로컬 개발에 각각 다른 값이 있는 세 가지 서비스의 API 키) Cloud Secret Manager의 무료 등급을 초과하여 추가 보안 비밀당월 $0.06가 청구됩니다. 이 요금을 피하기 위해 소스 제어 외부에서 로컬 구성을 관리하려면 기존 apphosting.local.yaml 파일을 사용하면 됩니다. apphosting.emulator.yaml과 달리 이 파일은 apphosting.yaml의 보안 비밀 값인 환경 변수에 일반 텍스트 값을 제공할 수 있습니다.

사용자 또는 그룹에 보안 비밀에 대한 액세스 권한 부여

apphosting.emulator.yaml에 저장된 보안 비밀은 에뮬레이터가 시작될 때 읽힙니다. 즉, 개발팀에 보안 비밀에 대한 액세스 권한이 필요합니다. apphosting:secrets:grantaccess 명령어를 사용하여 이메일을 통해 사용자 또는 그룹에 보안 비밀 액세스 권한을 부여할 수 있습니다.

firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com

해당하는 경우 프로덕션 데이터에 액세스할 수 없거나 전역적인 부작용(이메일 전송, 신용카드 청구)을 일으킬 수 없거나 할당량이 더 적은 테스트 전용 키를 apphosting.emulator.yaml에서 사용하는 것이 좋습니다. 이렇게 하면 검토되지 않은 코드로 인한 실제적인 영향이 줄어듭니다.

개별 사용자에게 액세스 권한을 부여하는 대신 Google 그룹스를 사용하여 보안 비밀에 대한 액세스를 관리하는 것이 좋습니다. 이렇게 하면 새 구성원을 개발자팀에 온보딩하는 것이 간편해집니다. 그룹에 추가하면 필요한 모든 비밀에 대한 액세스 권한이 부여되기 때문입니다. 개발자가 서로 소통할 수 있는 적절한 그룹이 이미 있을 수 있습니다. Google 그룹스의 액세스 권한을 제어하면 팀을 떠나는 개발자가 이메일 그룹에서 삭제될 때 모든 보안 비밀에 액세스할 수 없도록 할 수도 있습니다. 보안 비밀이 프로덕션 데이터 또는 실제 부작용에 액세스할 수 있는 경우에도 키를 순환하고 firebase apphosting:secrets:set로 새 값을 지정하는 것이 적절할 수 있습니다.

에뮬레이터 실행

firebase emulators:start

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