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

Zanim zaczniesz

Wykonaj kroki podane na Pierwsze kroki z hostingiem, a konkretnie następujące zadania:

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

Opcjonalnie możesz wdrożyć treść i konfigurację Hostingu 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 aplikacja obsługiwała emulowaną funkcję do zasobów projektu backendu, możesz przetestować treść i konfigurację Hostingu lokalnie. Podczas testów lokalnych Firebase udostępnia aplikację internetową hostowaną lokalnie Adres URL.

Hosting jest częścią Pakietu emulatorów lokalnych Firebase, który umożliwia aplikacji interakcję z emulowanymi treściami w Hostingu, 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: Baza danych czasu rzeczywistego | 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 wprowadzić zmiany do lokalnego adresu URL, odśwież przeglądarkę.

Testowanie z innych urządzeń lokalnych

Domyślnie emulatory odpowiadają tylko na żądania wysyłane przez 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 inne osoby widziały zmiany w Twojej aplikacji internetowej przed jej opublikowaniem, możesz korzystać z 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 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 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.

Hosting Firebase 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ć to działanie na GitHubie i korzystać z niego.

Krok 3. Wdróż aktywną usługę

Gdy uznasz, że chcesz udostępnić zmiany całemu światu, wdróż swój hosting 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 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 witryn w Hostingu, które zawierają te kanały.

      • W przypadku domyślnej witryny w Hostingu 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. Wyświetl zmiany (następny krok).

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

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 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 pozwalają wdrożyć treść i konfigurację Hostingu w następujące witryny:

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

  • Wszystkie domeny niestandardowe, które zostały z Tobą połączone. Twoje witryny w Hostingu

Aby ograniczyć wdrażanie do konkretnej witryny w Hostingu, określ miejsce docelowe 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 Hostingu 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: 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. Zapoznaj się z dokumentacji interfejsu wiersza poleceń Firebase.

Buforowanie wdrożonych treści

Gdy wysyłane jest żądanie dotyczące treści statycznych, Hosting Firebase automatycznie zapisuje treści w pamięci podręcznej 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 Hosting Firebase jest ładowany 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).

Usuwam pliki

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

Dalsze kroki