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

Przed wdrożeniem w działającej witrynie warto przejrzeć i przetestować zmiany. Firebase Hosting umożliwia wyświetlanie i testowanie zmian lokalnie oraz interakcję z zasobami emulowanego backendu projektu. Jeśli chcesz, aby współpracownicy mogli wyświetlić przetestuj zmiany, Hosting może tworzyć udostępniane, tymczasowe adresy URL podglądu dla w Twojej witrynie. Obsługujemy nawet integrację z GitHubem, aby wdrożyć z żądania pull.

Zanim zaczniesz

Wykonaj czynności wymienione na Hosting stronie Rozpocznij, w tym:

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

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. Przetestuj lokalnie

Jeśli wykonujesz szybkie iteracje lub chcesz, aby aplikacja obsługiwała emulowaną funkcję zasobów projektu backendu, możesz przetestować zawartość i konfigurację Hosting lokalnie. Podczas testowania lokalnie Firebase udostępnia 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 Hosting, a także config oraz opcjonalnie emulowane zasoby projektu (funkcje, baz danych i reguł).

  1. (Opcjonalnie) Domyślnie aplikacja hostowana lokalnie będzie wchodzić w interakcję z prawdziwymi, nie emulowane zasobów projektu (funkcji, bazy danych, reguł itp.); Możesz też połączyć aplikację z dowolnymi zasobami emulowanymi w ramach skonfigurowanego projektu. Więcej informacji: Realtime Database | Cloud Firestore | Cloud Functions

  2. W katalogu głównym 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, odśwież przeglądarkę.

Testowanie na innych urządzeniach lokalnych

Domyślnie emulatory odpowiadają tylko na żądania z adresu localhost. Ten Oznacza to, że dostęp do hostowanych treści będzie możliwy przez internet na komputerze. z przeglądarki, ale nie z innych urządzeń w sieci. Jeśli chcesz prowadzić testy innych urządzeń 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 Twojej aplikacji internetowej przed jej opublikowaniem, możesz użyć kanałów podglądu.

Po wdrożeniu aplikacji w kanale podglądu Firebase wyświetla ją w „adres URL podglądu”, który jest tymczasowym adresem URL, który można udostępniać. Gdy używasz adresu URL podglądu, aplikacja internetowa współdziała z prawdziwym backendem dla wszystkich zasobów projektu (z z wyjątkiem wartości „przypiętych” funkcje w Twoich przeredagowaniach config).

Adresy URL podglądu są trudne do odgadnięcia (ponieważ zawierają losowe ), są publiczne. Dzięki temu każdy, kto zna ten adres URL, może uzyskać do niego dostęp.

  1. W katalogu 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 stworzenia 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 wyglądać np.: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Aby zaktualizować adres URL podglądu przez zmiany, ponownie uruchom to samo polecenie. Marka pamiętaj, aby w poleceniu podać ten sam atrybut CHANNEL_ID.

Dowiedz się więcej o zarządzaniu kanałami podglądu, łącznie z ustawieniem daty wygaśnięcia kanału.

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

Krok 3. Wdróż wersję produkcyjną

Gdy Hosting będą gotowe, by pokazać je światu, wdróż te zmiany do swojego kanału na żywo. Firebase udostępnia kilka różnych 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 wdrażasz kanał na żywo dokładne treści i konfigurację, które były testowane w kanale podglądu. Więcej informacji informacje klonowania 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 takim kodem:

    • SOURCE_SITE_ID i TARGET_SITE_ID: to są identyfikatory z Hosting witryn zawierających te kanały.

      • W przypadku domyślnej witryny Hosting użyj identyfikatora projektu Firebase.
      • Możesz wskazać witryny, które są w tym samym projekcie Firebase lub nawet w z różnych projektów Firebase.

    • SOURCE_CHANNEL_ID: identyfikator kanału, który korzysta obecnie z wersji, którą chcesz wdrożyć na swoim kanale na żywo.

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

  2. Sprawdź zmiany (następny krok).

Opcja 2. Wdróż z katalogu projektu lokalnego na aktywnym kanale

Ta opcja daje Ci możliwość dostosowania konfiguracji do kanału na żywo lub wdrożenia nawet wtedy, gdy nie korzystasz z kanału podglądu.

  1. W katalogu głównym 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 te opcje umożliwiają wdrożenie treści i konfiguracji Hosting w tych witrynach:

  • Obsługiwane przez Firebase subdomeny Twojej domyślnej witryny Hosting i dowolnej dodatkowe witryny (Hosting):
    SITE_ID.web.app (np. PROJECT_ID.web.app)
    SITE_ID.firebaseapp.com (np. PROJECT_ID.firebaseapp.com)

  • domeny niestandardowe połączone z Twoimi witrynami Hosting

Aby ograniczyć wdrażanie do określonej witryny Hosting, określanie miejsca docelowego wdrożenia w poleceniu interfejsu wiersza poleceń.

Inne działania związane z wdrażaniem i informacje

Dodaj komentarz do wdrożenia

Do wdrożenia możesz opcjonalnie dodać komentarz. Ten komentarz będzie wyświetlany z inne informacje o wdrożeniu Panel Hosting w konsoli Firebase. Przykład:

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

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

Opcjonalnie możesz połączyć skrypty powłoki z poleceniem firebase deploy, aby: wykonywania zadań przed wdrożeniem lub po wdrożeniu. Na przykład punkt zaczepienia po wdrożeniu może powiadamianie administratorów o wdrożeniach nowych treści w witrynie. Więcej informacji znajdziesz w dokumentacji interfejsu wiersza poleceń Firebase.

Przechowywanie w pamięci podręcznej opublikowanych treści

Gdy otrzyma prośbę o treści statyczne, Firebase Hosting automatycznie zapisuje je w sieci CDN. Jeśli ponownie wdrożysz treść witryny, Firebase automatycznie usuwa wszystkie treści statyczne zapisane w pamięci podręcznej z całej sieci CDN, dzięki czemu nowe żądań otrzymania nowych treści.

Pamiętaj, że możesz skonfigurować umieszczanie treści dynamicznych w pamięci podręcznej.

Wyświetlanie przez HTTPS

Wszystkie zasoby zewnętrzne, które nie są hostowane w Strony Firebase Hosting są wczytywane przez protokół SSL (HTTPS),w tym przez skrypty zewnętrzne. Większość przeglądarek nie zezwala użytkownikom na ładowanie „treści mieszanej” (SSL i bez SSL ruchu).

Usuwanie plików

Głównym sposobem usuwania wybranych plików w usłudze Firebase Hosting jest z wdrożonej witryny jest lokalne usunięcie plików i ponowne wdrożenie.

Dalsze kroki