Save the date - Google I/O returns May 18-20. Register to get the most out of the digital experience: Build your schedule, reserve space, participate in Q&As, earn Google Developer profile badges, and more. Register now

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

Przed wdrożeniem w działającej witrynie warto przejrzeć i przetestować wprowadzone 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 przeglądali i testowali Twoje zmiany, Hosting może utworzyć udostępniane, tymczasowe adresy URL podglądu dla Twojej witryny. Obsługujemy nawet integrację z GitHub w celu wdrożenia z żądania ściągnięcia.

Zanim zaczniesz

Wykonaj czynności wymienione na stronie Hosting - wprowadzenie, aw 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 do wykonania 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 wyświetla 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). Należy pamiętać, że pakiet Local Emulator Suite nie obsługuje jeszcze emulowanego magazynu w chmurze.

  1. (Opcjonalnie) Domyślnie lokalnie hostowana aplikacja będzie współdziałać z rzeczywistymi , nieemulowanymi zasobami projektu (funkcje, baza danych, reguły itp.). Zamiast tego możesz opcjonalnie połączyć swoją aplikację, aby używać dowolnych emulowanych zasobów projektu, które zostały skonfigurowane. Dowiedz się więcej: Baza danych czasu rzeczywistego | Cloud Firestore | Funkcje chmury

  2. W katalogu głównym 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 hostowanych treści z przeglądarki internetowej swojego komputera, ale nie z innych urządzeń w sieci. Jeśli chcesz testować z innych urządzeń lokalnych, skonfiguruj swój firebase.json 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 widzieli zmiany w Twojej aplikacji internetowej przed jej udostępnieniem, możesz skorzystać z 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 udostępnianym tymczasowym adresem URL. W przypadku korzystania z adresu URL podglądu aplikacja internetowa współdziała z rzeczywistym zapleczem dla wszystkich zasobów projektu.

Pamiętaj, że chociaż adresy URL podglądu są trudne do odgadnięcia (ponieważ zawierają losowy hash), są publiczne. Tak więc każdy, kto zna 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 (na przykład 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 polecenia. Będzie wyglądać PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app 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 określono ten sam CHANNEL_ID .

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

Hosting Firebase obsługuje akcję GitHub, która automatycznie tworzy i aktualizuje 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

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

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

Ta opcja zapewnia pewność, że wdrażasz na swoim kanale na żywo dokładnie taką zawartość 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 : 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 są w tym samym projekcie Firebase, a nawet w różnych projektach Firebase.
    • SOURCE_CHANNEL_ID : to identyfikator kanału, który obecnie obsługuje wersję, którą chcesz wdrożyć na swoim kanale na żywo.

      • W przypadku kanału na żywo użyj identyfikatora kanału na live .
  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ące polecenie:

    firebase deploy --only hosting
  2. Wyświetl zmiany (następny krok).

Krok 4: Wyświetl zmiany w aktywnej witrynie

Obie powyższe opcje pozwalają wdrożyć zawartość i konfigurację hostingu w następujących witrynach:

  • Poddomeny obsługiwane przez Firebase dla Twojej domyślnej witryny hostingowej i wszelkich dodatkowych witryn hostingowych:
    SITE_ID .web.app (jak PROJECT_ID .web.app )
    SITE_ID .firebaseapp.com (np. PROJECT_ID .firebaseapp.com )

  • Wszelkie domeny niestandardowe połączone z Twoimi witrynami hostingowymi

Aby ograniczyć wdrażanie do określonej lokacji hostującej, określ miejsce docelowe wdrażania w poleceniu interfejsu wiersza polecenia.

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 wraz z innymi informacjami dotyczącymi wdrażania w panelu Hosting w konsoli Firebase. Na przykład:

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

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

Opcjonalnie można połączyć skrypty powłoki z poleceniem firebase deploy Firebase w celu wykonania zadań przed wdrożeniem lub po wdrożeniu. Na przykład punkt zaczepienia po wdrożeniu może powiadomić administratorów o nowych wdrożeniach zawartości witryny. Więcej informacji znajdziesz w dokumentacji interfejsu wiersza polecenia Firebase .

Buforowanie wdrożonej zawartości

Gdy wysyłane jest żą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, aby nowe żądania otrzymały 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 zewnętrzne skrypty. Większość przeglądarek nie pozwala użytkownikom na ładowanie „zawartości mieszanej” (ruch SSL i bez SSL).

Następne kroki