Prototypowanie i testowanie aplikacji internetowych za pomocą Emulatora Hostingu Firebase

Zanim zaczniesz tworzyć prototypy i testować aplikację internetową za pomocą emulatora Firebase Hosting, zapoznaj się z całym procesem Firebase Local Emulator Suite oraz zainstaluj i skonfiguruj Local Emulator Suite i zapoznaj się z poleceniami CLI.

Znasz też funkcje i proces implementacji w Firebase Hosting. Zacznij od wprowadzenia do Firebase Hosting.

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

Emulator Firebase Hosting umożliwia wysoką lokalną emulację usług Hosting i oferuje większość funkcji dostępnych w wersji produkcyjnej Hosting. Emulator Hosting pozwala:

  • tworzyć prototypy witryn statycznych i aplikacji internetowych bez ponoszenia opłat za miejsce na dane i dostęp do nich;
  • Utwórz prototyp, przetestuj i debuguj funkcje HTTPS przed wdrożeniem w witrynie Hostingu
  • Testuj witryny i aplikacje internetowe w konteneryzowanych procesach ciągłej integracji.

Wybieranie projektu Firebase

Firebase Local Emulator Suite emuluje usługi w pojedynczym projekcie Firebase.

Aby wybrać projekt, który ma być używany, przed uruchomieniem emulatorów uruchom w CLI polecenie firebase use w katalogu roboczym. Możesz też przekazać parametr --project do każdego polecenia emulatora.

Local Emulator Suite obsługuje emulację prawdziwych projektów Firebase i projektów prezentacyjnych.

Typ projektu Funkcje Używanie z emulatorami
Real

Prawdziwy projekt Firebase to taki, który został utworzony i skonfigurowany (najprawdopodobniej w konsoli Firebase).

Prawdziwe projekty mają aktywne zasoby, takie jak instancje bazy danych, kontenery magazynu, funkcje lub inne zasoby skonfigurowane w danym projekcie Firebase.

Podczas pracy z prawdziwymi projektami Firebase możesz uruchamiać emulatory dla wszystkich lub niektórych obsługiwanych usług.

W przypadku usług, których nie emulujesz, Twoje aplikacje i kod będą wchodzić w interakcję z aktywnymi zasobami (instancjami baz danych, zasobnikami, funkcjami itp.).

Wersja demonstracyjna

Projekt demonstracyjny Firebase nie ma rzeczywistej konfiguracji Firebase ani aktywnych zasobów. Dostęp do tych projektów uzyskuje się zwykle w ramach ćwiczeń z programowania lub innych samouczków.

Identyfikatory projektów demonstracyjnych mają prefiks demo-.

Jeśli pracujesz w projektach demonstracyjnych Firebase, Twoje aplikacje i kod wchodzą w interakcję tylko z emulatorami. Jeśli aplikacja próbuje wchodzić w interakcję z zasobem, dla którego nie działa emulowany system, kod nie zadziała.

W miarę możliwości zalecamy korzystanie z 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 Firebase.
  • Większe bezpieczeństwo, ponieważ jeśli Twój kod przypadkowo wywoła nieemulowane (produkcyjne) zasoby, nie ma możliwości zmiany danych, ich użycia ani rozliczenia.
  • lepszą obsługę offline, ponieważ do pobrania konfiguracji pakietu SDK nie jest potrzebny dostęp do internetu;

Podstawowy przepływ pracy związany z prototypowaniem

Jeśli wprowadzasz szybkie iteracje lub chcesz, aby Twoja aplikacja współdziałała z zasymulowanymi zasobami projektu backendu, możesz przetestować zawartość i konfigurację Hosting lokalnie. Podczas testowania lokalnie Firebase udostępnia Twoją aplikację internetową pod adresem URL hostowanym lokalnie.

  1. (Opcjonalnie) Domyślnie aplikacja hostowana lokalnie będzie wchodzić w interakcję z prawdziwymi, a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Możesz też połączyć aplikację z dowolnymi zasobami emulowanymi w ramach skonfigurowanego projektu. Więcej informacji: Realtime Database | Cloud Firestore | Cloud Functions

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

    firebase emulators:start

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

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

Testowanie na innych urządzeniach lokalnych

Domyślnie emulatory odpowiadają tylko na żądania wysyłane przez localhost. Oznacza to, że możesz korzystać z treści hostowanych w przeglądarce na komputerze, ale nie na innych urządzeniach w sieci. Jeśli chcesz przeprowadzić test z innych urządzeń lokalnych, skonfiguruj firebase.json w ten sposób:

"emulators": {
    // ...

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

Generowanie tokenów uwierzytelniania na potrzeby procesów ciągłej integracji

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

Aby wygenerować token, uruchom firebase login:ci w środowisku lokalnym. Nie należy tego robić z poziomu systemu CI. Postępuj zgodnie z instrukcjami, aby uwierzytelnić konto. Wystarczy, że wykonasz ten krok tylko raz w przypadku każdego projektu, ponieważ token będzie ważny dla wszystkich wersji. Token należy traktować jak hasło. Musisz więc zachować go w tajemnicy.

Jeśli Twoje środowisko CI umożliwia określenie zmiennych środowiskowych, których można używać w skryptach kompilacji, utwórz zmienną środowiskową o nazwie FIREBASE_TOKEN, a jej wartością niech będzie ciąg znaków tokenu dostępu. Pętla Firebase CLI automatycznie wczyta zmienną środowiskową FIREBASE_TOKEN, a emulatory uruchomią się prawidłowo.

W ostatniej chwili możesz po prostu dodać token do skryptu kompilacji, ale pamiętaj, aby nieautoryzowane strony nie miały do niego dostępu. Aby to zrobić, możesz dodać --token "YOUR_TOKEN_STRING_HERE" do polecenia firebase emulators:exec.

Co dalej?