Testowanie aplikacji internetowej lokalnie, udostępnianie zmian innym osobom i wdrażanie jej w czasie rzeczywistym

Zanim wdrożysz zmiany w produkcyjnej witrynie, sprawdź je. Firebase Hosting umożliwia wyświetlanie i testowanie zmian lokalnie oraz interakcję z zasobami emulowanego backendu projektu. Jeśli chcesz, aby Twoi współpracownicy mogli wyświetlać i testować zmiany, Hosting może utworzyć tymczasowe adresy URL podglądu, które można udostępniać, dla Twojej witryny. Obsługujemy nawet integrację z GitHubem, aby wdrożyć z żądania pull.

Zanim zaczniesz

Wykonaj czynności wymienione na Hosting stronie Rozpocznij, w tym:

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

Możesz wdrożyć treści i konfigurację Hosting aplikacji, ale nie jest to wymagane do wykonania czynności opisanych na tej stronie.

Krok 1. Testowanie lokalnie

Jeśli wykonujesz szybkie iteracje lub chcesz, aby Twoja aplikacja współdziałała z emulowanymi 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.

Hosting jest częścią Firebase Local Emulator Suite, która umożliwia aplikacji interakcję z emulowanymi treściami i konfiguracją Hosting, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, bazami danych i zasadami).

  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"
    }
  }

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

Jeśli chcesz, aby inni użytkownicy mogli wyświetlać zmiany w Twojej aplikacji internetowej przed jej opublikowaniem, możesz użyć kanałów podglądu.

Po wdrożeniu na kanał podglądu Firebase udostępnia aplikację internetową pod „adresem URL podglądu”, czyli tymczasowym adresem URL, który można udostępniać. Gdy używasz adresu URL podglądu, Twoja aplikacja internetowa wchodzi w interakcję z prawdziwym backendem w przypadku wszystkich zasobów projektu (z wyjątkiem „przypiętych” funkcji w konfiguracji funkcji przekształcania).

Pamiętaj, że chociaż adresy URL podglądu są trudne do odgadnięcia (ponieważ zawierają losowy hash), są publiczne. Oznacza to, że każdy, kto zna adres URL, może uzyskać do niego dostęp.

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

    firebase hosting:channel:deploy CHANNEL_ID

    Zastąp CHANNEL_ID ciągiem znaków 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 ono wyglądać mniej więcej tak: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Aby zaktualizować adres URL podglądu z wprowadzonymi zmianami, ponownie uruchom to samo polecenie. Pamiętaj, aby w komandach podać ten sam parametr 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.

Firebase Hosting obsługuje działanie GitHub, które automatycznie tworzy i aktualizuje adres URL podglądu po potwierdzeniu zmian w żądaniu pull. Dowiedz się, jak skonfigurować i używać tej akcji GitHuba.

Krok 3. Wdróż wersję produkcyjną

Gdy będziesz gotowy do udostępnienia zmian światu, wprowadź treści i konfigurację Hosting do kanału na żywo. Firebase oferuje kilka opcji na tym etapie w zależności od przypadku użycia (patrz opcje poniżej).

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

Ta opcja daje pewność, że na kanał na żywo wdrożysz dokładnie te treści i tę konfigurację, które zostały 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 z tych ciągów zastępczych:

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

      • W przypadku domyślnej witryny Hosting użyj identyfikatora projektu Firebase.
      • Możesz określić witryny w tym samym projekcie Firebase lub nawet w różnych projektach Firebase.

    • SOURCE_CHANNEL_ID: to identyfikator kanału, który obecnie wyświetla wersję, którą chcesz wdrożyć na kanał na żywo.

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

  2. Zobacz zmiany (następny krok).

Opcja 2. Wdrożenie z katalogu projektu lokalnego na kanał na żywo

Ta opcja daje Ci możliwość dostosowania konfiguracji do kanału na żywo lub wdrożenia nawet wtedy, gdy nie korzystasz z kanału podglądu.

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

    firebase deploy --only hosting

  2. Zobacz zmiany (następny krok).

Krok 4. Sprawdź zmiany w działającej witrynie

Obie te opcje umożliwiają wdrożenie treści i konfiguracji Hosting w tych witrynach:

  • Subdomeny utworzone przez Firebase dla domyślnej witryny Hosting i dodatkowych witryn Hosting:
    SITE_ID.web.app (np. PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (np. PROJECT_ID.firebaseapp.com)

  • wszystkie domeny niestandardowe połączone z Twoimi witrynami Hosting,

Aby ograniczyć wdrożenie do konkretnej witryny Hosting, określ cel wdrożenia w komendach wiersza poleceń.

Inne czynności i informacje dotyczące wdrażania

Dodaj komentarz do wdrożenia.

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

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

Dodawanie zadań skryptowych 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 hak po wdrożeniu może informować administratorów o nowym wdrożeniu treści witryny. Więcej informacji znajdziesz w dokumentacji interfejsu wiersza poleceń Firebase.

Przechowywanie w pamięci podręcznej opublikowanych treści

Gdy otrzyma prośbę o treści statyczne, usługa Firebase Hosting automatycznie zapisuje je w pamięci podręcznej w sieci CDN. Jeśli ponownie wdrożysz treści swojej witryny, Firebase automatycznie usunie wszystkie zarchiwizowane treści statycznej w usłudze CDN, aby nowe żądania otrzymywały nowe treści.

Pamiętaj, że możesz skonfigurować buforowanie zawartości dynamicznej.

Wyświetlanie za pomocą protokołu HTTPS

Upewnij się, że wszystkie zasoby zewnętrzne, które nie są hostowane na serwerach Firebase Hosting, są ładowane przez SSL (HTTPS), w tym skrypty zewnętrzne. Większość przeglądarek nie pozwala użytkownikom na wczytywanie „treści mieszanych” (ruchu SSL i nie-SSL).

Usuwanie plików

W Firebase Hosting głównym sposobem usuwania wybranych plików z wdrożonej witryny jest ich usunięcie na komputerze lokalnym, a następnie ponowne wdrożenie.

Dalsze kroki