Prototypowanie i testowanie aplikacji internetowych za pomocą Emulatora Hostingu Firebase

Zanim zaczniesz tworzyć prototypy i testować aplikację internetową za pomocą Firebase Hostingemulatora, upewnij się, że rozumiesz ogólny Firebase Local Emulator Suiteprzepływ pracy oraz że instalujesz i konfigurujesz Local Emulator Suite i zapoznajesz się z jego poleceniami interfejsu CLI.

Znasz też funkcje i proces wdrażania Firebase Hosting. Zacznij od wprowadzenia do Firebase Hosting.

Do czego służy Firebase Hosting emulator?

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

  • Tworzenie prototypów statycznych witryn i aplikacji internetowych bez ponoszenia opłat za przechowywanie i dostęp
  • Prototypowanie, testowanie i debugowanie funkcji HTTPS przed wdrożeniem w witrynie Hosting
  • Testuj witryny i aplikacje internetowe w konteneryzowanych przepływach pracy ciągłej integracji.

Wybieranie projektu Firebase

Firebase Local Emulator Suite emuluje usługi dla jednego projektu 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ę prawdziwych projektów Firebase i projektów demonstracyjnych.

Typ projektu Funkcje Korzystanie z emulatorami
Real

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

Prawdziwe projekty mają aktywne zasoby, takie jak instancje baz danych, zasobniki pamięci, funkcje lub inne zasoby skonfigurowane w tym projekcie Firebase.

Podczas pracy z prawdziwymi projektami Firebase możesz uruchamiać emulatory wszystkich obsługiwanych usług.

W przypadku wszystkich usług, których nie emulujesz, Twoje aplikacje i kod będą wchodzić w interakcje z zasobem na żywo (instancją bazy danych, zasobnikiem pamięci, funkcją itp.).

Prezentacja

Projekt demonstracyjny Firebase nie ma prawdziwej konfiguracji Firebase ani aktywnych zasobów. Dostęp do tych projektów uzyskuje się zwykle 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 wchodzą w interakcje tylko z emulatorami. Jeśli aplikacja spróbuje wejść w interakcję z zasobem, dla którego nie działa emulator, kod nie zadziała.

Zalecamy korzystanie w miarę możliwości z projektów demonstracyjnych. W ten sposób możesz zapewnić im dostęp do tych korzyści:

  • Łatwiejsza konfiguracja, ponieważ emulatory można uruchamiać bez tworzenia projektu Firebase.
  • Większe bezpieczeństwo, ponieważ jeśli Twój kod przypadkowo wywoła zasoby nieemulowane (produkcyjne), nie ma możliwości zmiany danych, wykorzystania zasobów ani naliczenia opłat.
  • Lepsza obsługa offline, ponieważ nie musisz uzyskiwać dostępu do internetu, aby pobrać konfigurację pakietu SDK.

Podstawowy przepływ pracy związany z prototypowaniem

Jeśli szybko wprowadzasz zmiany lub chcesz, aby aplikacja wchodziła w interakcje z zasobami emulowanego projektu backendu, możesz przetestować Hostingtreści i konfiguracjęHosting lokalnie. Podczas testowania lokalnego Firebase udostępnia aplikację internetową pod lokalnie hostowanym adresem URL.

  1. (Opcjonalnie) Domyślnie aplikacja hostowana lokalnie będzie wchodzić w interakcje z prawdziwymi, a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Zamiast tego możesz opcjonalnie połączyć aplikację, aby korzystać z dowolnych zasobów emulowanego 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 interfejs CLI (zwykle http://localhost:5000).

  4. Aby zaktualizować lokalny adres URL o wprowadzone 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 przeprowadzić testy na innych urządzeniach lokalnych, skonfiguruj firebase.json w ten sposób:

"emulators": {
    // ...

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

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

Jeśli Twoje przepływy pracy ciągłej integracji zależą od 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 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 przechowywany w tajemnicy.

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

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

Co dalej?