Testowanie aplikacji internetowej lokalnie, udostępnianie zmian innym osobom i wdrażanie jej wersji online

Przed wdrożeniem zmian w działającej witrynie warto przejrzeć i przetestować zmiany. Hosting Firebase umożliwia wyświetlanie i testowanie zmian lokalnie oraz interakcję z emulowanymi zasobami projektu backendu. Jeśli chcesz, by członkowie zespołu sprawdzili zmiany, Hosting może utworzyć możliwe do udostępnienia, tymczasowe adresy URL podglądu dla Twojej witryny. Obsługujemy nawet integrację z GitHubem w celu wdrożenia z wykorzystaniem żądania pull.

Zanim zaczniesz

Wykonaj czynności wymienione na stronie Pierwsze kroki z hostowaniem, a w szczególności te zadania:

  1. Zainstaluj lub zaktualizuj interfejs wiersza poleceń Firebase do najnowszej wersji.
  2. Połącz lokalny katalog projektu (zawierający treść aplikacji) z projektem Firebase.

Opcjonalnie możesz wdrożyć zawartość i konfigurację Hostingu aplikacji, ale nie jest to wymagane w przypadku czynności opisanych na tej stronie.

Krok 1. Przetestuj lokalnie

Jeśli robisz szybkie iteracje lub chcesz, aby aplikacja korzystała z emulowanych zasobów projektu backendu, możesz przetestować zawartość Hostingu i skonfigurować ją lokalnie. Podczas testowania lokalnego Firebase udostępnia Twoją aplikację internetową pod lokalnie hostowanym adresem URL.

Hosting jest częścią Pakietu emulatorów lokalnych Firebase, który umożliwia aplikacji interakcję z treściami i konfiguracją emulowanego Hostingu, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, bazami danych i regułami).

  1. (Opcjonalnie) Domyślnie Twoja 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 używać wszystkich skonfigurowanych przez Ciebie emulowanych zasobów projektu. Więcej informacji: Baza danych czasu rzeczywistego | Cloud Firestore | Cloud Functions

  2. W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:

    firebase emulators:start

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

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

Przeprowadź test z innych urządzeń lokalnych

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

"emulators": {
    // ...

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

Krok 2. Wyświetl podgląd i udostępnij

Jeśli chcesz, aby inni użytkownicy zobaczyli zmiany w Twojej aplikacji internetowej, zanim ją opublikujesz, możesz użyć kanałów podglądu.

Po wdrożeniu aplikacji w kanale podglądu Firebase będzie udostępniać Twoją aplikację internetową pod „adresem URL podglądu” – czyli dostępnym do udostępniania, tymczasowym adresem URL. Gdy używasz adresu URL podglądu, aplikacja internetowa wchodzi w interakcję z rzeczywistym backendem dla wszystkich zasobów projektu (z wyjątkiem „przypiętych” funkcji w konfiguracji przepisów).

Adresy URL podglądu są trudne do odgadnięcia (zawierają losowy hasz), ale są publiczne. Dzięki temu każdy, kto zna ten adres URL, może uzyskać do niego dostęp.

  1. W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:

    firebase hosting:channel:deploy CHANNEL_ID

    Zastąp CHANNEL_ID ciągiem bez spacji (np. feature_mission-2-mars). Ten identyfikator zostanie użyty do utworzenia adresu URL podglądu powiązanego z kanałem podglądu.

  2. Otwórz aplikację internetową pod adresem URL podglądu zwróconym przez interfejs wiersza poleceń. Będzie to wyglądać mniej więcej tak: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Aby zaktualizować adres URL podglądu w związku ze zmianami, uruchom to samo polecenie jeszcze raz. Pamiętaj, aby w poleceniu podać tę samą wartość CHANNEL_ID.

Dowiedz się więcej o zarządzaniu kanałami podglądu, w tym o tym, jak ustawić datę wygaśnięcia kanału.

Hosting Firebase obsługuje działanie GitHub, które automatycznie tworzy i aktualizuje adres URL podglądu po zatwierdzeniu zmian w żądaniu pull. Dowiedz się, jak skonfigurować to działanie na GitHubie i z niego korzystać.

Krok 3. Wdróż wersję

Gdy uznasz, że chcesz podzielić się zmianami ze światem, wdróż zawartość i konfigurację Hostingu na swoim kanale na żywo. W Firebase dostępne są różne opcje tego etapu w zależności od zastosowania (opcje poniżej).

Opcja 1. Skopiuj z kanału podglądu do kanału na żywo

Ta opcja daje pewność, że wdrażasz na kanale aktywnym dokładnie zawartość i konfigurację przetestowane na kanale podglądu. Dowiedz się więcej o klonowaniu wersji.

  1. W dowolnym katalogu uruchom to polecenie:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Zastąp każdy symbol zastępczy następującym:

    • SOURCE_SITE_ID i TARGET_SITE_ID: to identyfikatory witryn Hosting, które zawierają kanały.

      • Jako domyślnej witryny w Hostingu użyj identyfikatora projektu Firebase.
      • Możesz wskazać witryny, które należą do tego samego projektu Firebase, a nawet do różnych projektów Firebase.

    • SOURCE_CHANNEL_ID: identyfikator kanału obsługującego wersję, którą chcesz wdrożyć na swoim kanale.

      • W przypadku kanału na żywo użyj live jako identyfikatora.

  2. Wyświetl zmiany (następny krok).

Opcja 2. Wdróż z lokalnego katalogu projektu na kanale aktywnym

Dzięki tej opcji możesz dostosowywać konfiguracje pod kątem kanału transmisji na żywo lub wdrażać je, nawet jeśli nie korzystasz jeszcze z kanału wersji przedpremierowej.

  1. W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:

    firebase deploy --only hosting

  2. Wyświetl zmiany (następny krok).

Krok 4. Wyświetl zmiany w działającej witrynie

Obie powyższe opcje służą do wdrażania zawartości i konfiguracji Hostingu w tych witrynach:

  • Subdomeny udostępnione w Firebase dla domyślnej witryny Hostingu i wszelkich dodatkowych witryn Hostingu:
    SITE_ID.web.app (np. PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (np. PROJECT_ID.firebaseapp.com)

  • domeny niestandardowe połączone przez Ciebie z witrynami w Hostingu.

Aby ograniczyć wdrażanie do określonej witryny Hostingu, określ miejsce docelowe wdrożenia w poleceniu interfejsu wiersza poleceń.

Inne działania i informacje związane z wdrażaniem

Dodaj komentarz do wdrożenia

Opcjonalnie możesz dodać komentarz do wdrożenia. Ten komentarz będzie wyświetlany z innymi informacjami o wdrożeniu w panelu hostowania w konsoli Firebase. Przykład:

firebase deploy --only hosting -m "Deploying the best new feature ever."

Dodaj skryptowane zadania przed wdrożeniem i po wdrożeniu

Opcjonalnie możesz połączyć skrypty powłoki z poleceniem firebase deploy, aby wykonywać zadania przed wdrożeniem lub po wdrożeniu. Na przykład punkt zaczepienia po wdrożeniu może powiadamiać administratorów o wdrożeniach nowych treści w witrynie. Więcej informacji znajdziesz w dokumentacji interfejsu wiersza poleceń Firebase.

Buforowanie wdrożonych treści

Po otrzymaniu żądania treści statycznej Hosting Firebase automatycznie zapisuje je w pamięci podręcznej w sieci CDN. Jeśli ponownie wdrożysz treść witryny, Firebase automatycznie wyczyści wszystkie treści statyczne przechowywane w pamięci podręcznej w sieci CDN, tak aby nowe żądania mogły zostać odebrane.

Pamiętaj, że możesz skonfigurować zapisywanie zawartości dynamicznej w pamięci podręcznej.

Obsługa przez HTTPS

Upewnij się, że wszystkie zasoby zewnętrzne, które nie są hostowane w Hostingu Firebase, są ładowane przez SSL (HTTPS), w tym wszelkie skrypty zewnętrzne. Większość przeglądarek nie zezwala użytkownikom na ładowanie „treści mieszanej” (ruchu SSL i bez SSL).

Usuwam pliki

W Hostingu Firebase podstawowym sposobem usuwania wybranych plików z wdrożonej witryny jest usunięcie ich lokalnie, a następnie ponowne wdrożenie.

Dalsze kroki