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 skonfigurujLocal Emulator Suite oraz zapoznaj się z komendami CLI.

Musisz też zapoznać się z funkcjami i procesem implementacji Firebase Hosting. Zacznij od wprowadzenia do Firebase Hosting.

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

Emulator Firebase Hosting zapewnia lokalną emulację usług Hosting o wysokiej jakości, oferując wiele funkcji dostępnych w produkcyjnej wersji Hosting. Emulator Hosting umożliwia:

  • tworzyć prototypy witryn statycznych i aplikacji internetowych bez ponoszenia opłat za miejsce na dane i dostęp do nich;
  • Tworzenie prototypów, testowanie i debugowanie funkcji HTTPS przed wdrożeniem na stronie hostingowej
  • 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 oraz projektów demonstracyjnych.

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 wybranych obsługiwanych usług.

W przypadku usług, których nie emulujesz, aplikacje i kod będą wchodzić w interakcję z żywymi zasobami (np. instancją bazy danych, zasobnikiem magazynu, funkcją itp.).

Prezentacja

Demonstracyjny projekt Firebase nie ma rzeczywistej konfiguracji Firebase i żadnych zasobów w produkcji. Do tych projektów zwykle uzyskuje się dostęp za pomocą ćwiczeń z programowania lub innych samouczków.

Identyfikatory projektów demonstracyjnych mają prefiks demo-.

Podczas pracy z demonstracyjnymi projektami Firebase aplikacje i kod będą wchodzić w interakcje z emulatorami tylko. 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.
  • lepsza obsługa trybu 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 testować 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 rzeczywistymi, 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 adresem URL zwracanym 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 z adresu localhost. Oznacza to, że będziesz mieć dostęp do hostowanych treści z poziomu przeglądarki na komputerze, ale nie z innych urządzeń w sieci. Jeśli chcesz przetestować inne lokalne urządzenia, 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ć w systemie CI. Postępuj zgodnie z instrukcjami, aby uwierzytelnić konto. Wystarczy, że wykonasz ten krok tylko raz na projekt, 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 pętli Firebase automatycznie wczyta zmienną środowiska 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. W przypadku tego zaimplementowanego twardo podejścia możesz dodać --token "YOUR_TOKEN_STRING_HERE" do polecenia firebase emulators:exec.

Co dalej?