Przetestuj swoją aplikację internetową lokalnie, udostępnij zmiany innym, a następnie wdrażaj na żywo

Przed wdrożeniem w działającej witrynie warto wyświetlić i przetestować wprowadzone zmiany. Hosting Firebase umożliwia lokalne przeglądanie i testowanie zmian oraz interakcję z emulowanymi zasobami projektu zaplecza. Jeśli chcesz, aby Twoi współpracownicy przeglądali i testowali Twoje zmiany, Hosting może utworzyć tymczasowe adresy URL podglądu Twojej witryny, które można udostępniać. Obsługujemy nawet integrację z GitHub w celu wdrożenia za pomocą żądania ściągnięcia.

Zanim zaczniesz

Wykonaj kroki wymienione na stronie Rozpoczęcie hostingu , w szczególności następujące zadania:

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

Opcjonalnie możesz wdrożyć zawartość i konfigurację hostingu aplikacji, ale nie jest to warunek wstępny wykonania kroków opisanych na tej stronie.

Krok 1: Przetestuj lokalnie

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

Hosting jest częścią pakietu Firebase Local Emulator Suite , który umożliwia Twojej aplikacji interakcję z treścią i konfiguracją emulowanego hostingu, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, bazami danych i regułami).

  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.). Zamiast tego możesz opcjonalnie połączyć swoją aplikację, aby korzystać ze skonfigurowanych emulowanych zasobów projektu. Dowiedz się więcej: Baza danych czasu rzeczywistego | Chmura Firestore | Funkcje chmury

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

    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 zmianami, odśwież przeglądarkę.

Przetestuj 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 z przeglądarki internetowej na swoim komputerze, ale nie z innych urządzeń w Twojej sieci. Jeśli chcesz testować na innych urządzeniach lokalnych, skonfiguruj plik firebase.json w następujący 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 mogli zobaczyć zmiany w Twojej aplikacji internetowej przed jej publikacją, możesz skorzystać z kanałów podglądu.

Po wdrożeniu w kanale podglądu Firebase udostępnia Twoją aplikację internetową pod „adresem URL podglądu”, który jest udostępnianym, tymczasowym adresem URL. 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 wszelkich „przypiętych” funkcji w konfiguracji przepisywania ).

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

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

    firebase hosting:channel:deploy CHANNEL_ID

    Zastąp CHANNEL_ID ciągiem znaków bez spacji (na przykład feature_mission-2-mars ). Ten identyfikator zostanie użyty do skonstruowania 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 CLI. Będzie to wyglądać mniej więcej tak: PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app

  3. Aby zaktualizować adres URL podglądu zmianami, uruchom ponownie to samo polecenie. Upewnij się, że w poleceniu podano ten sam CHANNEL_ID .

Dowiedz się o zarządzaniu kanałami podglądu , w tym o ustawianiu daty wygaśnięcia kanału.

Hosting Firebase obsługuje akcję GitHub, która automatycznie tworzy i aktualizuje adres URL podglądu, gdy zatwierdzasz zmiany w żądaniu ściągnięcia. Dowiedz się, jak skonfigurować i używać tej akcji GitHub .

Krok 3: Wdróż na żywo

Kiedy będziesz gotowy, aby podzielić się swoimi zmianami ze światem, wdróż zawartość i konfigurację hostingu na swoim kanale na żywo. Firebase oferuje kilka różnych opcji tego kroku w zależności od przypadku użycia (zobacz opcje poniżej).

Opcja 1: Sklonuj kanał podglądu do kanału na żywo

Ta opcja daje pewność, że wdrażasz w swoim kanale na żywo dokładnie tę treść i konfigurację, które przetestowałeś w kanale podglądu. Dowiedz się więcej o klonowaniu wersji .

  1. Z dowolnego katalogu uruchom następujące 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 : są to identyfikatory witryn hostingowych zawierających kanały.

      • W przypadku domyślnej witryny hostingowej użyj identyfikatora projektu Firebase.
      • Możesz określić witryny, które znajdują się w tym samym projekcie Firebase lub nawet w różnych projektach Firebase.

    • SOURCE_CHANNEL_ID : jest to identyfikator kanału, który aktualnie obsługuje wersję, którą chcesz wdrożyć na swoim kanale na żywo.

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

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

Opcja 2: Wdróż z lokalnego katalogu projektu na swoim kanale na żywo

Ta opcja zapewnia elastyczność dostosowywania konfiguracji specyficznych dla kanału na żywo lub wdrażania, nawet jeśli nie korzystałeś z kanału w wersji zapoznawczej.

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

    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 umożliwiają wdrożenie zawartości i konfiguracji hostingu w następujących witrynach:

  • Subdomeny udostępniane przez Firebase dla domyślnej witryny hostingowej i wszelkich dodatkowych witryn hostingowych:
    SITE_ID .web.app (np. PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (np. PROJECT_ID .firebaseapp.com )

  • Wszelkie domeny niestandardowe , które połączyłeś ze swoimi witrynami hostingowymi

Aby ograniczyć wdrażanie do określonej witryny hostingowej, określ cel wdrożenia w poleceniu CLI.

Inne działania 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 na pulpicie nawigacyjnym Hostingu w konsoli Firebase. Na przykład:

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

Dodaj zadania skryptowe przed 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 powiadamiać administratorów o wdrożeniu nowej zawartości witryny. Więcej szczegółów znajdziesz w dokumentacji Firebase CLI .

Buforowanie wdrożonej zawartości

Gdy zostanie wysłane żądanie treści statycznej , Firebase Hosting automatycznie buforuje zawartość w sieci CDN. Jeśli ponownie wdrożysz zawartość swojej witryny, Firebase automatycznie wyczyści całą buforowaną zawartość statyczną w sieci CDN, aby nowe żądania otrzymywały nową treść.

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

Serwowanie przez HTTPS

Upewnij się, że wszystkie zasoby zewnętrzne, które nie są hostowane w Hostingu Firebase, są ładowane przez SSL (HTTPS), łącznie z wszelkimi skryptami zewnętrznymi. Większość przeglądarek nie pozwala użytkownikom na ładowanie „treści mieszanej” (ruch SSL i bez SSL).

Następne kroki