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

Przed wdrożeniem zmian 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 projektu backendu. Jeśli chcesz, aby członkowie Twojego zespołu mogli wyświetlać i testować zmiany, Hosting może utworzyć udostępniane, tymczasowe adresy URL podglądu Twojej witryny. Obsługujemy nawet integrację z GitHubem, która umożliwia wdrażanie z żądania pull.

Zanim zaczniesz

Wykonaj czynności podane na Hostingstronie Rozpocznij, 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 zawartość aplikacji) z projektem Firebase.

Opcjonalnie możesz wdrożyć Hostingtreści i konfiguracjęHosting aplikacji, ale nie jest to wymagane w przypadku czynności opisanych na tej stronie.

Krok 1. Testowanie lokalne

Jeśli szybko wprowadzasz zmiany lub chcesz, aby aplikacja wchodziła w interakcje z emulowanymi zasobami projektu backendu, możesz przetestować Hostingtreści i konfigurację lokalnie. Podczas testowania lokalnego Firebase udostępnia aplikację internetową pod adresem URL hostowanym lokalnie.

Hosting jest częścią Firebase Local Emulator Suite, która 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 prawdziwymi, a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Zamiast tego możesz opcjonalnie połączyć aplikację, aby korzystać z dowolnych zasobów emulowanego projektu, które zostały skonfigurowane. 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 CLI (zwykle http://localhost:5000).

  4. Aby zaktualizować lokalny adres URL o wprowadzone 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 przeprowadzić testy na innych urządzeniach lokalnych, skonfiguruj firebase.json w ten 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 użytkownicy mogli wyświetlać zmiany w aplikacji internetowej przed jej opublikowaniem, możesz użyć kanałów podglądu.

Po wdrożeniu na kanale podglądu Firebase udostępnia aplikację internetową pod „adresem URL podglądu”, czyli tymczasowym adresem URL, który można udostępniać. 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 „przypiętych” funkcji w konfiguracji przepisania).

Pamiętaj, że chociaż adresy URL podglądu są trudne do odgadnięcia (ponieważ zawierają losowy hash), są publiczne. Dostęp do niego ma każda osoba, która zna adres URL.

  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 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 CLI. Będzie wyglądać mniej więcej tak:PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Aby zaktualizować adres URL podglądu o wprowadzone zmiany, ponownie uruchom to samo polecenie. W poleceniu podaj ten sam parametr CHANNEL_ID.

Dowiedz się więcej o zarządzaniu kanałami z wersją zapoznawczą, w tym o tym, jak ustawić datę 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 Action.

Krok 3. Wdróż na żywo

Gdy zechcesz udostępnić zmiany, wdróż Hostingtreści i konfigurację na kanale na żywo. Firebase oferuje kilka różnych opcji tego kroku w zależności od przypadku użycia (patrz opcje poniżej).

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

Ta opcja daje pewność, że na kanale na żywo wdrażasz 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. Uruchom to polecenie z dowolnego katalogu:

    firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live

    Zastąp każdy symbol zastępczy tymi elementami:

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

      • W przypadku domyślnej witryny Hosting 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: identyfikator kanału, który obecnie wyświetla wersję, którą chcesz wdrożyć na 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. Wdrożenie z lokalnego katalogu projektu na kanał na żywo

Ta opcja daje Ci elastyczność w dostosowywaniu konfiguracji do 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świetl zmiany w działającej witrynie

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

  • Poddomeny udostępnione przez Firebase dla domyślnej Hosting witryny i wszystkich dodatkowych Hosting witryn:
    SITE_ID.web.app (np. PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (np. PROJECT_ID.firebaseapp.com)

  • Wszystkie domeny niestandardowe połączone z Twoimi witrynami Hosting.

Aby ograniczyć wdrażanie do konkretnej Hosting witryny, określ cel wdrażania 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 Hostingpanelu w Firebasekonsoli. Przykład:

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

Dodawanie skryptowych zadań przed wdrożeniem i po wdrożeniu

Opcjonalnie możesz połączyć skrypty powłoki z poleceniem firebase deploy, aby wykonać zadania przed wdrożeniem lub po nim. Na przykład po wdrożeniu może on powiadamiać administratorów o wdrożeniach nowych treści w witrynie. Więcej informacji znajdziesz w Firebasedokumentacji interfejsu CLI.

Przechowywanie w pamięci podręcznej wdrożonych treści

Gdy zostanie wysłane żądanie treści statycznych, Firebase Hosting automatycznie zapisuje je w pamięci podręcznej 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.

Wyświetlanie przez HTTPS

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

Usuwanie plików

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

Dalsze kroki