Check out what’s new from Firebase at Google I/O 2022. Learn more

Testuj lokalnie, udostępniaj zmiany, a następnie wdrażaj na żywo

Przed wdrożeniem w działającej witrynie warto wyświetlić i przetestować zmiany. Hosting Firebase umożliwia przeglądanie i testowanie zmian lokalnie oraz interakcję z emulowanymi zasobami projektu zaplecza. Jeśli chcesz, aby Twoi koledzy z zespołu przejrzeli i przetestowali Twoje zmiany, Hosting może utworzyć udostępniane, tymczasowe adresy URL podglądu Twojej witryny. Obsługujemy nawet integrację GitHub w celu wdrożenia z żądania ściągnięcia.

Zanim zaczniesz

Wykonaj czynności wymienione na stronie Wprowadzenie do hostingu , w szczególności następujące zadania:

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

Opcjonalnie możesz wdrożyć zawartość i konfigurację hostingu aplikacji, ale nie jest to wymagane w przypadku kroków 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ść Hostingu i skonfigurować 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 aplikacji interakcję z emulowaną zawartością i konfiguracją Hostingu, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, bazami danych i regułami).

  1. (Opcjonalnie) Domyślnie aplikacja hostowana lokalnie będzie współdziałać z rzeczywistymi , nie emulowanymi , zasobami projektu (funkcjami, bazą danych, regułami itp.). Zamiast tego możesz opcjonalnie połączyć swoją aplikację, aby korzystać z dowolnych skonfigurowanych zasobów emulowanego projektu. Dowiedz się więcej: Baza danych czasu rzeczywistego | Cloud Firestore | Funkcje chmury

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

    firebase emulators:start

  3. Otwórz swoją aplikację internetową pod lokalnym adresem URL zwróconym przez CLI (zwykle http://localhost:5000 ).

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

Testuj z innych urządzeń lokalnych

Domyślnie emulatory odpowiadają tylko na żądania z localhost . Oznacza to, że będziesz mieć dostęp do hostowanej zawartości z przeglądarki internetowej komputera, ale nie z innych urządzeń w sieci. Jeśli chcesz testować z innych urządzeń lokalnych, skonfiguruj firebase.json w następujący sposób:

"emulators": {
    // ...

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

Krok 2: Podgląd i udostępnianie

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

Po wdrożeniu w kanale podglądu Firebase wyświetla Twoją aplikację internetową pod „adresem URL podglądu”, który jest tymczasowym adresem URL, który można udostępnić. Podczas korzystania z adresu URL podglądu Twoja aplikacja internetowa wchodzi w interakcję z rzeczywistym zapleczem wszystkich zasobów projektu.

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

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

    firebase hosting:channel:deploy CHANNEL_ID

    Zastąp CHANNEL_ID ciągiem bez spacji (na przykład feature_mission-2-mars ). Ten identyfikator będzie używany do tworzenia adresu URL podglądu powiązanego z kanałem podglądu.

  2. Otwórz aplikację internetową pod adresem URL podglądu zwróconym przez 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 o zmiany, uruchom ponownie to samo polecenie. Upewnij się, że w poleceniu podano ten sam CHANNEL_ID .

Dowiedz się, jak zarządzać kanałami podglądu , w tym jak ustawić wygaśnięcie kanału.

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

Krok 3: Wdróż na żywo

Gdy zechcesz podzielić się swoimi zmianami ze światem, wdróż swoje treści z Hostingu i skonfiguruj je na swoim kanale na żywo. Firebase oferuje kilka różnych opcji dla tego kroku w zależności od przypadku użycia (zobacz opcje poniżej).

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

Ta opcja daje pewność, że wdrażasz w swoim kanale na żywo dokładnie taką zawartość i konfigurację, które przetestowałeś w kanale podglądu. Dowiedz się więcej o wersjach klonujących .

  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 w Hostingu użyj identyfikatora projektu Firebase.
      • Możesz określić witryny, które znajdują się w tym samym projekcie Firebase, a 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ć w swoim kanale na żywo.

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

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

Opcja 2: Wdróż z lokalnego katalogu projektu na kanał na żywo

Ta opcja zapewnia elastyczność w zakresie dostosowywania konfiguracji specyficznych dla kanału na żywo lub wdrażania, nawet jeśli nie używasz kanału podglądu.

  1. Z katalogu głównego 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 swojej aktywnej witrynie

Obie powyższe opcje umożliwiają wdrożenie zawartości hostingu i konfigurację w następujących witrynach:

  • Subdomeny obsługiwane przez Firebase dla Twojej domyślnej witryny w Hostingu i wszelkich dodatkowych witryn w Hostingu:
    SITE_ID .web.app (jak 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ć wdrożenie do określonej witryny hostingu, określ cel wdrożenia w poleceniu interfejsu wiersza polecenia.

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 predeploy i postdeploy

Możesz opcjonalnie połączyć skrypty powłoki z poleceniem firebase deploy , aby wykonać zadania predeploy lub postdeploy. Na przykład hak postdeploy może powiadamiać administratorów o nowych wdrożeniach zawartości witryny. Więcej informacji znajdziesz w dokumentacji Firebase CLI .

Buforowanie wdrożonej zawartości

Gdy zostanie wysłane żądanie dotyczące zawartości statycznej , Hosting Firebase automatycznie buforuje zawartość w sieci CDN. Jeśli ponownie wdrożysz zawartość witryny, Firebase automatycznie wyczyści całą zawartość statyczną z pamięci podręcznej w sieci CDN, dzięki czemu nowe żądania otrzymają nową zawartość.

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

Udostępnianie 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 pozwala użytkownikom na ładowanie „zawartości mieszanej” (ruch SSL i ruch inny niż SSL).

Następne kroki