Catch up on highlights from Firebase at Google I/O 2023. Learn more

Przetestuj swoją aplikację internetową lokalnie, udostępniaj zmiany innym, 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 lokalne przeglądanie i testowanie zmian 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ć tymczasowe adresy URL podglądu Twojej witryny, które można udostępniać. Obsługujemy nawet integrację GitHub do wdrażania z żądania ściągnięcia.

Zanim zaczniesz

Wykonaj czynności wymienione na stronie Pierwsze kroki z hostingiem , a konkretnie wykonaj następujące zadania:

  1. Zainstaluj lub zaktualizuj Firebase CLI 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 swojej aplikacji, ale nie jest to warunkiem wstępnym 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ść i konfigurację hostingu lokalnie. Podczas testowania lokalnie Firebase obsługuje 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 emulowaną zawartością i konfiguracją Hostingu, a także opcjonalnie emulowanymi zasobami projektu (funkcjami, bazami danych i regułami).

  1. (Opcjonalnie) Domyślnie lokalnie hostowana aplikacja będzie wchodzić w interakcje z rzeczywistymi , a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Zamiast tego możesz opcjonalnie połączyć swoją aplikację, aby używać dowolnych emulowanych zasobów projektu, które skonfigurowałeś. 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 interfejs wiersza polecenia (zwykle http://localhost:5000 ).

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

Przetestuj z innych urządzeń lokalnych

Domyślnie emulatory odpowiadają tylko na żądania 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 przetestować z innych urządzeń 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 widzieli zmiany w Twojej aplikacji sieci Web przed udostępnieniem jej na żywo, możesz użyć kanałów podglądu.

Po wdrożeniu w kanale podglądu Firebase udostępnia Twoją aplikację internetową pod „podglądowym adresem URL”, który jest tymczasowym adresem URL, który można udostępniać. Podczas korzystania z adresu URL podglądu Twoja aplikacja internetowa wchodzi w interakcję z prawdziwym zapleczem dla 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. 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 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 swoją aplikację internetową pod adresem URL podglądu zwróconym przez interfejs wiersza polecenia. Będzie 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 określono ten sam CHANNEL_ID .

Dowiedz się więcej 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 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

Gdy 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 taką zawartość i konfigurację, które zostały przetestowane w kanale wersji zapoznawczej. 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, a nawet w różnych projektach Firebase.

    • SOURCE_CHANNEL_ID : To jest 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 live jako identyfikatora kanału.

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

Opcja 2: Wdróż z lokalnego katalogu projektu do swojego kanału 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 swojej aktywnej witrynie

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

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

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

Aby ograniczyć wdrożenie do określonej witryny Hostingu, określ miejsce docelowe 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 Hosting w konsoli Firebase. Na przykład:

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

Dodaj skryptowe zadania przed i po wdrożeniu

Opcjonalnie możesz połączyć skrypty powłoki z poleceniem firebase deploy , aby wykonać zadania przed wdrożeniem lub po wdrożeniu. Na przykład hak po wdrożeniu 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 wysyłane jest żądanie dotyczące zawartości statycznej , Firebase Hosting automatycznie zapisuje ją w pamięci podręcznej w sieci CDN. Jeśli ponownie wdrożysz zawartość swojej witryny, Firebase automatycznie wyczyści całą zawartość statyczną przechowywaną w pamięci podręcznej w sieci CDN, aby nowe żądania otrzymywały nową treść.

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

Obsługa przez HTTPS

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

Następne kroki