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 zasobami emulowanego backendu projektu. Jeśli chcesz, aby współpracownicy mogli wyświetlić przetestować zmiany, Hosting może tworzyć udostępniane, tymczasowe adresy URL podglądu dla w Twojej witrynie. Wspieramy nawet Integracja z GitHubem umożliwiająca wdrażanie z metody pull użytkownika.

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.

Opcjonalnie możesz wdrożyć zawartość i konfigurację Hosting swojej aplikacji, ale są one nie jest konieczne, by wykonać czynności opisane 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 aplikację internetową hostowaną lokalnie Adres URL.

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.); Zamiast tego możesz opcjonalnie połączyć aplikację z dowolnym emulowanym projektem skonfigurowanych przez Ciebie zasobach. 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. 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 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 inne osoby widziały zmiany w Twojej aplikacji internetowej przed jej opublikowaniem, możesz korzystać z kanałów podglądu.

Po wdrożeniu na kanał 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, 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).

Pamiętaj, że chociaż adresy URL podglądu są trudne do odgadnięcia (ponieważ zawierają losowy hash), 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 bez spacji (na przykład feature_mission-2-mars). Ten identyfikator będzie używany do tworzenia adres URL podglądu powiązany 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 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 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óż aktywną usługę

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. Sklonowanie treści z kanału podglądu na kanał na żywo

Ta opcja daje pewność, że na kanał na żywo wdrożysz dokładnie te treści i tę 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 z tych ciągów zastępczych:

    • 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 określić witryny w tym samym projekcie Firebase lub nawet w różnych projektach 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. Wdrożenie z katalogu projektu lokalnego na kanał na żywo

Ta opcja pozwala dostosować konfiguracje specyficzne dla w kanale wersji „aktywnych” i do wdrożenia, nawet jeśli kanał nie był używany.

  1. W katalogu 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 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)

  • wszystkie 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 czynności i informacje dotyczące wdrożenia

Dodaj komentarz do wdrożenia.

Opcjonalnie możesz dodać komentarz do wdrożenia. 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ń inicjowanych 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.

Buforowanie wdrożonych treści

Po otrzymaniu żądania dotyczącego treści statycznych Firebase Hosting automatycznie zapisuje treści w pamięci podręcznej w sieci CDN. Jeśli ponownie wdrożysz treści swojej witryny, Firebase automatycznie usunie całą zarchiwizowaną zawartość statyczną z CDN, aby nowe żądania otrzymywały nowe treści.

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

Wyświetlanie za pomocą protokołu 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 wczytywanie „treści mieszanych” (ruchu SSL i nie-SSL).

Usuwanie plików

W Firebase Hosting głównym sposobem usuwania wybranych plików z wdrożonej witryny jest ich usunięcie na komputerze lokalnym, a następnie ponowne wdrożenie.

Dalsze kroki