Przed App Hosting wdrożeniem możesz przeprowadzić lokalne testy aplikacji za pomocą App Hosting emulatora, który jest częścią Pakietu emulatorów lokalnych Firebase Suite.
Zanim zaczniesz korzystać z emulatora App Hosting, upewnij się, że rozumiesz ogólny przepływ pracyLocal Emulator Suite Firebase oraz że zainstalujesz i skonfigurujesz Local Emulator Suite i zapoznasz się z jego poleceniami CLI.
W tym artykule zakładamy, że znasz już App Hosting. W razie potrzeby, zapoznaj się z App Hosting wprowadzeniem i innymi materiałami, aby pomóc Ci zrozumieć, jak App Hosting działa.
Co mogę zrobić za pomocą emulatora App Hosting?
Emulator App Hosting umożliwia testowanie i ulepszanie aplikacji internetowych lokalnie. Może to usprawnić proces tworzenia i poprawić jakość aplikacji internetowych tworzonych za pomocą Firebase i wdrażanych w App Hosting.
Emulator App Hosting:
- Umożliwia uruchamianie aplikacji internetowej lokalnie ze zmiennymi środowiskowymi i obiektami tajnymi zdefiniowanymi w plikach konfiguracji
apphosting.yaml. - Może zastępować zmienne środowiskowe i obiekty tajne do użycia w emulatorze za pomocą pliku
apphosting.emulator.yaml. - Może być używany razem z innymi emulatorami Firebase. Jeśli używasz Firestore, Auth lub innego emulatora, 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
Suite. Oprócz innych
emulatorów Firebase, które chcesz skonfigurować, wybierz App Hosting
Emulator. Interfejs CLI wyświetli prośbę 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 monorepo z App Hosting.
- Czy chcesz zastąpić jakieś wartości na potrzeby lokalnego programowania.
- Czy chcesz przyznać członkom zespołu dostęp do obiektów tajnych na potrzeby lokalnego programowania.
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 są używane do aktualizowania konfiguracji emulatora
App Hosting w pliku firebase.json. Możesz też skonfigurować emulator App Hosting, aktualizując bezpośrednio plik firebase.json. Schemat emulatora App Hosting jest następujący:
{
...
"emulators": {
"apphosting": {
"startCommand": <command> [optional]
"rootDirectory": <path> [optional]
}
}
}
startCommandjest generowany i ustawiany automatycznie podczas inicjowania emulatora. Jeśli nie zostanie podany, emulator wykryje i uruchomi polecenie deweloperskie menedżera pakietów.rootDirectorysłuży do obsługi konfiguracji projektu monorepo. Jeśli aplikacja internetowa znajduje się w podkatalogu, musisz podać ścieżkę do tego katalogu względem katalogu głównego (lokalizacji plikufirebase.json).
Zarządzanie emulacją
Podczas inicjowania emulatora w katalogu głównym aplikacji tworzony jest plik apphosting.emulator.yaml. Ten plik konfiguracji ma taki sam schemat jak plik
apphosting.yaml używany w
środowisku produkcyjnym, ale jest przeznaczony wyłącznie do lokalnego programowania. Domyślnie emulator odczytuje konfigurację z pliku apphosting.yaml, ale jeśli jest obecny plik apphosting.emulator.yaml, konfiguracje w tym pliku mają wyższy priorytet.
Plik apphosting.emulator.yaml jest bezpieczny do zatwierdzania i udostępniania współpracownikom. Aby zapobiec przypadkowemu zatwierdzeniu danych wrażliwych w repozytoriach kodu źródłowego, każda zmienna środowiskowa, która jest obiektem tajnym w pliku apphosting.yaml, musi być też obiektem tajnym w pliku apphosting.emulator.yaml. Jeśli obiekt tajny nie wymaga zmiany między środowiskiem produkcyjnym a lokalnym (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 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, testowego i lokalnego), możesz przekroczyć bezpłatny limit Cloud Secret Manager i płacić 0, 06 USD za każdy dodatkowy obiekt tajny miesięcznie. Jeśli wolisz zarządzać konfiguracją lokalną poza kontrolą kodu źródłowego, aby uniknąć tej opłaty, możesz użyć starszego pliku apphosting.local.yaml. W przeciwieństwie do pliku apphosting.emulator.yaml ten plik może zawierać wartości zmiennych środowiskowych w postaci zwykłego tekstu, które są wartościami tajnymi w pliku apphosting.yaml.
Przyznawanie użytkownikom lub grupom dostępu do obiektów tajnych
Obiekty tajne przechowywane w pliku apphosting.emulator.yaml są odczytywane podczas uruchamiania emulatora. Oznacza to, że zespół deweloperów musi mieć dostęp do obiektu tajnego. Aby przyznać dostęp do obiektu tajnego użytkownikowi lub grupie za pomocą adresu e-mail, możesz użyć polecenia apphosting:secrets:grantaccess.
firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com
W stosownych przypadkach rozważ użycie w pliku apphosting.emulator.yaml kluczy przeznaczonych tylko do testowania, które nie mają dostępu do danych produkcyjnych, nie mogą mieć globalnych skutków ubocznych (wysyłanie e-maili, obciążanie kart kredytowych) ani mają niższe limity. Pomaga to zapewnić, że niezweryfikowany kod będzie miał mniej konsekwencji w świecie rzeczywistym.
Do zarządzania dostępem do obiektów tajnych używaj Grup dyskusyjnych Google, zamiast przyznawać dostęp poszczególnym użytkownikom. Uprości to wdrażanie nowych członków zespołu deweloperów, ponieważ dodanie ich do grupy przyzna im dostęp do wszystkich potrzebnych obiektów tajnych. Możesz już mieć odpowiednią grupę, w której deweloperzy komunikują się ze sobą. Kontrolowanie dostępu za pomocą Grup dyskusyjnych Google pomaga też zapewnić, że deweloperzy, którzy opuszczają zespół, tracą dostęp do wszystkich obiektów tajnych po usunięciu ich z grupy e-mailowej. Jeśli obiekt tajny ma dostęp do danych produkcyjnych lub skutków ubocznych w świecie rzeczywistym, nadal może być odpowiednie, aby obrócić klucz i nadać mu nową wartość za pomocą polecenia 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 w przypadku aplikacji Angular
Jeśli polecenie emulatora start przekroczy limit czasu, prawdopodobnie serwer deweloperski Angulara
obsługuje aplikację na innym porcie niż oczekuje emulator
App Hosting.
Możesz obejść ten problem, dodając dodatkową konfigurację w pliku firebase.json:
- Ustaw
emulators.apphosting.startCommandnang serve. - Aby użyć portu innego niż domyślny, ustaw go za pomocą
emulators.apphosting.port(zamiast dodawać flagę--portdong servewemulators.apphosting.startCommand).
Przykład:
"emulators": {
"apphosting": {
"port": 5002,
"rootDirectory": "./test-app",
"startCommand": "ng serve"
},
"ui": {
"enabled": true
},
...
}