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

Zanim wdrożysz zmiany w witrynie, sprawdź, czy działają one prawidłowo. Firebase Hosting umożliwia wyświetlanie i testowanie zmian lokalnie oraz interakcję z emulowanymi zasobami projektu backendu. Jeśli chcesz, aby Twoi współpracownicy mogli wyświetlać i testować zmiany, Hosting może utworzyć tymczasowe adresy URL podglądu, które można udostępniać, dla Twojej witryny. Obsługujemy nawet integrację z GitHubem na potrzeby wdrażania 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 Twoja aplikacja współdziałała z zasymulowanymi zasobami projektu backendu, możesz testować zawartość i konfigurację Hosting lokalnie. Podczas testów lokalnych Firebase udostępnia Twoją 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 zasadami).

  1. (Opcjonalnie) Domyślnie aplikacja hostowana lokalnie będzie wchodzić w interakcję z rzeczywistymi, a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami 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 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, odśwież przeglądarkę.

Testowanie z innych urządzeń lokalnych

Domyślnie emulatory odpowiadają tylko na żądania wysyłane przez localhost. Oznacza to, że będziesz mieć dostęp do hostowanych treści z poziomu przeglądarki na komputerze, ale nie z innych urządzeń w sieci. Jeśli chcesz przetestować inne lokalne urządzenia, 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 w kanale podglądu Firebase udostępnia aplikację internetową pod „adresem URL podglądu”, który jest 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 funkcji przekształcania).

Pamiętaj, że chociaż adresy URL podglądu są trudne do odgadnięcia (zawierają przypadkowy hasz), są one publiczne. Oznacza to, że każdy, kto zna 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 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 poleceń. Będzie ono wyglądać mniej więcej tak: PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app

  3. Aby zaktualizować adres URL podglądu z wprowadzonymi zmianami, ponownie uruchom to samo polecenie. Pamiętaj, aby w tym poleceniu podać ten sam parametr CHANNEL_ID.

Dowiedz się więcej o zarządzaniu kanałami podglądu, 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 po zatwierdzeniu zmian w żądaniu pull. Dowiedz się, jak skonfigurować i używać tej akcji GitHuba.

Krok 3. Wdróż wersję produkcyjną

Gdy będziesz gotowy do udostępnienia zmian światu, wprowadź treści i konfigurację Hosting do kanału na żywo. Firebase oferuje kilka opcji na tym etapie 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 na kanale transmisji na żywo dokładnie te dokładnie zawartość i konfigurację, które były testowane 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 z tych ciągów zastępczych:

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

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

    • SOURCE_CHANNEL_ID: identyfikator kanału, który obecnie udostępnia wersję, którą chcesz wdrożyć na swoim kanale na żywo.

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

  2. Zobacz zmiany (następny krok).

Opcja 2. Wdrożenie z katalogu projektu lokalnego na kanał na żywo

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 katalogu projektu lokalnego uruchom to polecenie:

    firebase deploy --only hosting

  2. Zobacz 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 wszelkich 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 Twoimi witrynami Hosting.

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

Inne czynności 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 w panelu 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 wykonywać zadania przed wdrożeniem lub po wdrożeniu. Na przykład hak po wdrożeniu może informować administratorów o nowym wdrożeniu treści witryny. 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 umieszcza je w pamięci podręcznej w CDN. Jeśli ponownie wdrożysz treści swojej witryny, Firebase automatycznie oczyszcza całą pamięć podręczną z treściami statycznymi w usłudze CDN, aby nowe żądania otrzymywały nowe treści.

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

Wyświetlanie przez HTTPS

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

Usuwanie plików

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

Dalsze kroki