Testowanie wdrożenia aplikacji lokalnie

Przed wdrożeniem w App Hosting możesz przeprowadzić lokalne testy aplikacji za pomocą emulatora App Hosting, który jest częścią pakietu Firebase Local Emulator Suite.

Zanim zaczniesz korzystać z emulatora App Hosting, zapoznaj się z ogólnym przepływem pracy w Local Emulator Suite Firebase oraz zainstaluj i skonfiguruj Local Emulator Suite i przejrzyj jego polecenia interfejsu wiersza poleceń.

W tym temacie zakładamy, że znasz już App Hosting. W razie potrzeby zapoznaj się z wprowadzeniem do App Hosting i innymi materiałami, które pomogą Ci zrozumieć, jak działa App Hosting.

Co mogę zrobić za pomocą emulatora App Hosting?

Emulator App Hosting umożliwia testowanie i ulepszanie aplikacji internetowych lokalnie. Może to usprawnić proces programowania i poprawić jakość aplikacji internetowych tworzonych za pomocą Firebase i wdrażanych na platformie App Hosting.

Emulator App Hosting:

  1. Umożliwia lokalne uruchamianie aplikacji internetowej ze zmiennymi środowiskowymi i obiektami tajnymi zdefiniowanymi w plikach konfiguracji apphosting.yaml.
  2. Możesz zastąpić zmienne środowiskowe i tajne klucze do użycia w emulatorze za pomocą pliku apphosting.emulator.yaml.
  3. Można go używać razem z innymi emulatorami Firebase. Jeśli używasz emulatora Firestore, Auth lub innego, Local Emulator Suite zapewnia, że te emulatory zostaną uruchomione przed emulatorem App Hosting.

Konfigurowanie emulatora

Aby rozpocząć, zainstaluj i zainicjuj Local Emulator Suite zgodnie z opisem w artykule Instalowanie, konfigurowanie i integrowanie pakietu emulatorów lokalnych. Oprócz innych emulatorów Firebase, które chcesz skonfigurować, wybierz App Hosting Emulator. Interfejs wiersza poleceń poprosi Cię o podanie niektórych wartości emulatora App Hosting, w tym:

  • Katalog główny aplikacji względem projektu. Jest to ważne, jeśli używasz monorepozytoriów z App Hosting.
  • Czy chcesz zastąpić wartości na potrzeby programowania lokalnego.
  • Czy chcesz przyznać członkom zespołu dostęp do obiektów tajnych na potrzeby programowania lokalnego.
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.

Wszystkie wartości podane w tym procesie konfiguracji zostaną użyte do zaktualizowania konfiguracji emulatora App Hosting w firebase.json. Możesz też skonfigurować emulator App Hosting, bezpośrednio aktualizując plik firebase.json. Schemat emulatora App Hosting:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommand": <command> [optional],
      "rootDirectory": <path> [optional]
    }
  }
}
  • Wartość startCommand jest generowana i ustawiana automatycznie podczas inicjowania emulatora. Jeśli nie zostanie podane, emulator wykryje i uruchomi polecenie deweloperskie menedżera pakietów.
  • rootDirectory służy do obsługi konfiguracji projektów monorepozytorium. Jeśli aplikacja internetowa znajduje się w podkatalogu, musisz podać ścieżkę do tego katalogu względem katalogu głównego (lokalizacji pliku firebase.json).

Zarządzanie emulacją

Inicjowanie emulatora powoduje utworzenie pliku apphosting.emulator.yaml w katalogu głównym aplikacji. Ten plik konfiguracji ma taki sam schemat jak plik apphosting.yaml używany w środowisku produkcyjnym, ale jest przeznaczony wyłącznie do programowania lokalnego. Domyślnie emulator odczytuje konfigurację z pliku apphosting.yaml, ale jeśli obecny jest plik apphosting.emulator.yaml, konfiguracje w tym pliku mają pierwszeństwo.

Plik apphosting.emulator.yaml został zaprojektowany tak, aby można go było bezpiecznie zatwierdzać i udostępniać współpracownikom. Aby zapobiec przypadkowemu przesłaniu danych wrażliwych do repozytoriów źródłowych, każda zmienna środowiskowa, która jest obiektem tajnym w apphosting.yaml, musi być również obiektem tajnym w apphosting.emulator.yaml. Jeśli obiekt tajny nie musi się zmieniać między środowiskiem produkcyjnym a lokalnym środowiskiem programistycznym (np. klucz interfejsu Gemini API), nie trzeba go dodawać do pliku apphosting.emulator.yaml. Zamiast tego przyznaj zespołowi dostęp do obiektu tajnego.

Jeśli Twoja aplikacja używa wielu obiektów tajnych (np.kluczy interfejsu API do 3 różnych usług, z różnymi wartościami dla środowiska produkcyjnego, przejściowego i lokalnego), możesz przekroczyć bezpłatny poziom Cloud Secret Managera i zapłacić 0, 06 USD za każdy dodatkowy obiekt tajny miesięcznie. Jeśli chcesz uniknąć tej opłaty, możesz zarządzać konfiguracją lokalną poza kontrolą źródła, korzystając ze starszego pliku apphosting.local.yaml. W przeciwieństwie do apphosting.emulator.yaml ten plik może zawierać wartości w postaci zwykłego tekstu dla zmiennych środowiskowych, które są wartościami tajnymi w apphosting.yaml.

Przyznawanie użytkownikom lub grupom dostępu do obiektów tajnych

Obiekty tajne przechowywane w apphosting.emulator.yaml są odczytywane podczas uruchamiania emulatora. Oznacza to, że Twój zespół programistów musi mieć dostęp do obiektu tajnego. Możesz użyć polecenia apphosting:secrets:grantaccess, aby przyznać dostęp do obiektu tajnego użytkownikowi lub grupie za pomocą adresu e-mail.

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

W stosownych przypadkach rozważ użycie w apphosting.emulator.yaml kluczy przeznaczonych tylko do testowania, które nie mają dostępu do danych produkcyjnych, nie mogą mieć globalnych efektów ubocznych (wysyłanie e-maili, obciążanie kart kredytowych) lub mają niższe limity. Dzięki temu niesprawdzony kod ma mniejszy wpływ na rzeczywiste działanie.

Rozważ użycie Grup dyskusyjnych Google do zarządzania dostępem do obiektów tajnych zamiast przyznawania dostępu poszczególnym użytkownikom. Ułatwi to wprowadzanie nowych członków do zespołu programistów, ponieważ dodanie ich do grupy zapewni im dostęp do wszystkich potrzebnych obiektów tajnych. Być może masz już odpowiednią grupę, w której programiści komunikują się ze sobą. Kontrolowanie dostępu za pomocą Grup dyskusyjnych Google pomaga też zapewnić, że deweloperzy, którzy opuszczą Twój zespół, utracą dostęp do wszystkich obiektów tajnych, gdy zostaną usunięci z grupy e-mailowej. Jeśli obiekt tajny ma dostęp do danych produkcyjnych lub rzeczywistych efektów ubocznych, nadal może być konieczne przeprowadzenie rotacji klucza i nadanie mu nowej wartości za pomocą firebase apphosting:secrets:set.

Uruchamianie emulatora

firebase emulators:start

Spowoduje to uruchomienie wszystkich emulatorów zdefiniowanych w pliku firebase.json, w tym emulatora App Hosting.

Konfigurowanie polecenia start dla aplikacji Angular

Jeśli polecenie emulatora start przekroczy limit czasu, prawdopodobnie serwer programistyczny Angular obsługuje aplikację na innym porcie niż oczekiwany przez emulator App Hosting. Możesz obejść ten problem, dodając dodatkową konfigurację w firebase.json:

  • Ustaw emulators.apphosting.startCommand na ng serve.
  • Aby użyć portu innego niż domyślny, ustaw go za pomocą emulators.apphosting.port (zamiast dodawać flagę --port do ng serve w emulators.apphosting.startCommand).

Na przykład:

"emulators": {
    "apphosting": {
      "port": 5002,
      "rootDirectory": "./test-app",
      "startCommand": "ng serve"
    },
    "ui": {
      "enabled": true
    },
    ...
  }