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

Zanim wdrożysz zmiany w działającej witrynie, warto je wyświetlić i przetestować. Firebase Hosting umożliwia wyświetlanie i testowanie zmian lokalnie oraz interakcję z emulowanymi zasobami backendu projektu. Jeśli chcesz, aby Twoi współpracownicy mogli wyświetlać i testować zmiany, Hosting może utworzyć udostępniane, tymczasowe adresy URL podglądu dla Twojej witryny. Obsługujemy nawet integrację z GitHubem, która umożliwia wdrażanie z żądania pull.

Zanim zaczniesz

Wykonaj czynności wymienione na stronie Hosting Pierwsze kroki, a w szczególności te zadania:

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

Opcjonalnie 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 lokalne

Jeśli szybko iterujesz lub chcesz, aby Twoja aplikacja wchodziła w interakcje z emulowanymi zasobami backendu projektu, możesz lokalnie przetestować treści i konfigurację Hostinglokalnie. Podczas testowania lokalnego Firebase obsługuje Twoją aplikację internetową pod adresem URL hostowanym lokalnie.

Hosting jest częścią Firebase Local Emulator Suite, co umożliwia aplikacji interakcję z emulowanymi treściami i konfiguracją Hosting, 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 interakcje z rzeczywistymi, a nie emulowanymi, zasobami projektu (funkcjami, bazą danych, regułami itp.). Możesz też opcjonalnie połączyć aplikację, aby korzystała z dowolnych skonfigurowanych emulowanych zasobów projektu. Więcej informacji: Realtime Database | Cloud Firestore | Cloud Functions

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

    firebase emulators:start

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

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

Testowanie na innych urządzeniach 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 komputerze, ale nie z innych urządzeń w sieci. Jeśli chcesz testować na innych urządzeniach lokalnych, skonfiguruj firebase.json w ten sposób:

"emulators": {
    // ...

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

Krok 2. Wyświetlanie podglądu i udostępnianie

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

Po wdrożeniu na kanał podglądu Firebase obsługuje 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 interakcje z rzeczywistym backendem na potrzeby wszystkich zasobów projektu (z wyjątkiem funkcji "przypiętych" w konfiguracji przekierowań).

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

  1. W 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 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 interfejs wiersza poleceń. Będzie on 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 podajesz ten sam CHANNEL_ID.

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

Firebase Hosting obsługuje działanie GitHub, które automatycznie tworzy i aktualizuje adres URL podglądu, gdy zatwierdzasz zmiany w żądaniu pull. Dowiedz się, jak skonfigurować i używać tego działania GitHub.

Krok 3. Wdrażanie w działającej witrynie

Gdy wszystko będzie gotowe do udostępnienia zmian innym, wdróż Hosting treści i konfigurację na swój kanał na żywo. W zależności od przypadku użycia Firebase oferuje kilka różnych opcji na tym etapie (zobacz opcje poniżej).

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

Ta opcja daje pewność, że wdrażasz na kanał na żywo dokładnie te same treści i 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 obiekt zastępczy tymi wartościami:

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

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

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

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

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

Opcja 2. Wdrażanie z lokalnego katalogu projektu na kanał na żywo

Ta opcja zapewnia elastyczność w dostosowywaniu konfiguracji specyficznych dla kanału na żywo lub wdrażaniu nawet wtedy, gdy nie używasz kanału podglądu.

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

    firebase deploy --only hosting

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

Krok 4. Wyświetlanie zmian w działającej witrynie

Obie powyższe opcje wdrażają treści i konfigurację Hosting w tych witrynach:

  • Poddomeny udostępnione przez Firebase w przypadku domyślnej witryny Hosting i wszystkich 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 witrynami Hosting

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

Inne działania i informacje dotyczące wdrażania

Dodawanie komentarza 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 Hosting panelu w Firebase konsoli. Przykład:

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

Dodawanie zadań skryptowych przed wdrożeniem i po nim

Opcjonalnie możesz połączyć skrypty powłoki z poleceniem firebase deploy, aby wykonywać zadania przed wdrożeniem lub po nim. Na przykład element wywołujący po wdrożeniu może powiadamiać administratorów o wdrożeniach nowych treści witryny. Więcej informacji znajdziesz w dokumentacji interfejsu wiersza poleceń Firebase.

Buforowanie wdrożonych treści

Gdy wysyłane jest żądanie treści statycznych, Firebase Hosting automatycznie buforuje je w sieci CDN. Jeśli ponownie wdrożysz treści witryny, Firebase automatycznie wyczyści wszystkie buforowane treści statyczne w sieci CDN, aby nowe żądania otrzymywały nowe treści.

Pamiętaj, że możesz skonfigurować buforowanie treści dynamicznych.

Obsługa przez HTTPS

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

Usuwanie plików

W Firebase Hosting podstawowym sposobem usuwania wybranych plików z wdrożonej witryny jest usunięcie plików lokalnie, a następnie ponowne wdrożenie.

Dalsze kroki