Prototypowanie i testowanie aplikacji internetowych za pomocą Emulatora Hostingu Firebase

Zanim zaczniesz tworzyć prototypy i testować aplikację internetową za pomocą Firebase Hosting emulatora, upewnij się, że rozumiesz ogólny Firebase Local Emulator Suite przepływ pracy, oraz że zainstalujesz i skonfigurujesz Local Emulator Suite i zapoznasz się z jego poleceniami CLI.

Musisz też zapoznać się z funkcjami i przepływem pracy implementacji dla Firebase Hosting. Zacznij od wprowadzenia do Firebase Hosting.

Do czego służy emulator Firebase Hosting?

Emulator Firebase Hosting zapewnia lokalną emulację usług Hosting o wysokiej wierności, udostępniając większość funkcji dostępnych w produkcyjnej wersji Hosting. Emulator Hosting Hostingu umożliwia:

  • tworzenie prototypów statycznych witryn i aplikacji internetowych bez ponoszenia opłat za przechowywanie i dostęp;
  • tworzenie prototypów, testowanie i debugowanie funkcji HTTPS przed wdrożeniem w witrynie hostingowej;
  • testowanie witryn i aplikacji internetowych w kontenerowych przepływach pracy ciągłej integracji.

Wybieranie projektu w Firebase

Firebase Local Emulator Suite emuluje produkty dla pojedynczego projektu w Firebase.

Aby wybrać projekt, którego chcesz używać, przed uruchomieniem emulatorów wpisz w CLI polecenie firebase use w katalogu roboczym. Możesz też przekazać flagę --project do każdego polecenia emulatora.

Local Emulator Suite obsługuje emulację rzeczywistych projektów Firebase i demonstracyjnych projektów.

Typ projektu Funkcje Używanie z emulatorami
Rzeczywisty

Rzeczywisty projekt w Firebase to projekt utworzony i skonfigurowany (najprawdopodobniej przez konsolę Firebase).

Rzeczywiste projekty mają aktywne zasoby, takie jak instancje bazy danych, zasobniki pamięci buckets, funkcje lub inne zasoby skonfigurowane w tym projekcie Firebase project.

Podczas pracy z rzeczywistymi projektami Firebase możesz uruchamiać emulatory dla dowolnej lub wszystkich obsługiwanych usług.

W przypadku usług, które nie są emulowane, Twoje aplikacje i kod będą wchodzić w interakcje z aktywnym zasobem (instancją bazy danych, zasobnikiem pamięci, funkcją itp.).

Demonstracyjny

Demonstracyjny projekt w Firebase nie ma rzeczywistej konfiguracji Firebase ani aktywnych zasobów. Dostęp do tych projektów jest zwykle uzyskiwany za pomocą codelabów lub innych samouczków.

Identyfikatory projektów demonstracyjnych mają prefiks demo-.

Podczas pracy z demonstracyjnymi projektami Firebase Twoje aplikacje i kod wchodzą w interakcje z emulatorami tylko. Jeśli aplikacja spróbuje wejść w interakcję z zasobem dla którego nie jest uruchomiony emulator, kod się nie wykona.

Jeśli to możliwe, zalecamy używanie projektów demonstracyjnych. W ten sposób możesz zapewnić im dostęp do tych korzyści:

  • Łatwiejsza konfiguracja, ponieważ możesz uruchamiać emulatory bez tworzenia projektu w Firebase.
  • Większe bezpieczeństwo, ponieważ jeśli Twój kod przypadkowo wywoła nieemulowane (produkcyjne) zasoby, nie będzie możliwości zmiany danych, użycia i rozliczenia.
  • Lepsza obsługa offline, ponieważ nie musisz uzyskiwać dostępu do internetu, aby pobrać konfigurację pakietu SDK.

Podstawowy przepływ pracy prototypowania

Jeśli szybko iterujesz lub chcesz, aby Twoja aplikacja wchodziła w interakcje z emulowanymi zasobami projektu backendu, możesz lokalnie przetestować treści Hostingi konfigurację. Podczas testowania lokalnego Firebase udostępnia Twoją aplikację internetową pod adresem URL hostowanym lokalnie.

  1. (Opcjonalnie) Domyślnie aplikacja hostowana lokalnie będzie wchodzić w interakcje z rzeczywistymi, a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Możesz też opcjonalnie połączyć aplikację, aby korzystała z dowolnych emulowanych zasobów projektu, które zostały skonfigurowane. Więcej informacji: Realtime Database | Cloud Firestore | Cloud Functions

  2. W głównym katalogu projektu lokalnego uruchom to polecenie:

    firebase emulators:start

  3. Otwórz aplikację internetową pod lokalnym adresem URL zwróconym przez CLI (zwykle http://localhost:5000).

  4. Aby zaktualizować lokalny adres URL o zmiany, odśwież przeglądarkę.

Testowanie na innych urządzeniach lokalnych

Domyślnie emulatory odpowiadają tylko na żądania z localhost. Oznacza to, że będziesz mieć dostęp do hostowanych treści z przeglądarki internetowej na komputerze, ale nie z innych urządzeń w sieci. Jeśli chcesz testować na innych urządzeniach lokalnych, skonfiguruj plik firebase.json w ten sposób:

"emulators": {
    // ...

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

Generowanie tokenów uwierzytelniania na potrzeby przepływów pracy ciągłej integracji

Jeśli przepływy pracy ciągłej integracji korzystają z Hostingu Firebase, musisz zalogować się za pomocą tokena, aby uruchomić polecenie firebase emulators:exec. Pozostałe emulatory nie wymagają logowania.

Aby wygenerować token, uruchom polecenie firebase login:ci w środowisku lokalnym. Nie należy tego robić w systemie CI. Postępuj zgodnie z instrukcjami, aby się uwierzytelnić. Ten krok wystarczy wykonać tylko raz na projekt, ponieważ token będzie ważny we wszystkich kompilacjach. Token należy traktować jak hasło. Upewnij się, że jest on tajny.

Jeśli środowisko CI umożliwia określanie zmiennych środowiskowych, których można używać w skryptach kompilacji, utwórz zmienną środowiskową o nazwie FIREBASE_TOKEN, której wartością będzie ciąg tokena dostępu. Firebase CLI automatycznie wykryje zmienną środowiskową FIREBASE_TOKEN , a emulatory uruchomią się prawidłowo.

W ostateczności możesz po prostu uwzględnić token w skrypcie kompilacji, ale upewnij się, że nie mają do niego dostępu osoby, którym nie ufasz. W przypadku tego podejścia z zakodowanymi na stałe wartościami możesz dodać --token "YOUR_TOKEN_STRING_HERE" do firebase emulators:exec polecenia.

Co dalej?