Przed wdrożeniem w działającej witrynie warto wyświetlić i przetestować zmiany. Hosting Firebase umożliwia lokalne przeglądanie i testowanie zmian oraz interakcję z emulowanymi zasobami projektu zaplecza. Jeśli chcesz, aby Twoi koledzy z zespołu przeglądali i testowali Twoje zmiany, Hosting może utworzyć tymczasowe adresy URL podglądu Twojej witryny, które można udostępniać. Obsługujemy nawet integrację GitHub do wdrażania z żądania ściągnięcia.
Zanim zaczniesz
Wykonaj czynności wymienione na stronie Pierwsze kroki z hostingiem , a konkretnie wykonaj następujące zadania:
- Zainstaluj lub zaktualizuj Firebase CLI do najnowszej wersji.
- Połącz lokalny katalog projektu (zawierający zawartość Twojej aplikacji) z projektem Firebase.
Opcjonalnie możesz wdrożyć zawartość i konfigurację hostingu swojej aplikacji, ale nie jest to warunkiem wstępnym wykonania kroków na tej stronie.
Krok 1: Przetestuj lokalnie
Jeśli wykonujesz szybkie iteracje lub chcesz, aby Twoja aplikacja współdziałała z emulowanymi zasobami projektu zaplecza, możesz przetestować zawartość i konfigurację hostingu lokalnie. Podczas testowania lokalnie Firebase obsługuje Twoją aplikację internetową pod lokalnie hostowanym adresem URL.
Hosting jest częścią pakietu Firebase Local Emulator Suite , który umożliwia Twojej aplikacji interakcję z emulowaną zawartością i konfiguracją Hostingu, a także opcjonalnie emulowanymi zasobami projektu (funkcjami, bazami danych i regułami).
(Opcjonalnie) Domyślnie lokalnie hostowana aplikacja będzie wchodzić w interakcje z rzeczywistymi , a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Zamiast tego możesz opcjonalnie połączyć swoją aplikację, aby używać dowolnych emulowanych zasobów projektu, które skonfigurowałeś. Dowiedz się więcej: Baza danych czasu rzeczywistego | Cloud Firestore | Funkcje chmury
W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:
firebase emulators:start
Otwórz swoją aplikację internetową pod lokalnym adresem URL zwróconym przez interfejs wiersza polecenia (zwykle
http://localhost:5000
).Aby zaktualizować lokalny adres URL o zmiany, odśwież przeglądarkę.
Przetestuj z innych urządzeń lokalnych
Domyślnie emulatory odpowiadają tylko na żądania localhost
. Oznacza to, że będziesz mieć dostęp do hostowanych treści z przeglądarki internetowej na swoim komputerze, ale nie z innych urządzeń w Twojej sieci. Jeśli chcesz przetestować z innych urządzeń lokalnych, skonfiguruj plik firebase.json
w następujący sposób:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Podczas korzystania z firebase serve
Twoja aplikacja wchodzi w interakcję z emulowanym zapleczem dla treści i konfiguracji Hostingu (i opcjonalnie funkcji), ale z prawdziwym zapleczem dla wszystkich innych zasobów projektu.
W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:
firebase serve --only hosting
Otwórz swoją aplikację internetową pod lokalnym adresem URL zwróconym przez interfejs wiersza polecenia (zwykle
http://localhost:5000
).Aby zaktualizować lokalny adres URL o zmiany, odśwież przeglądarkę.
Użyj firebase serve
do testowania z innych urządzeń lokalnych
Domyślnie firebase serve
odpowiada tylko na żądania localhost
. Oznacza to, że będziesz mieć dostęp do hostowanych treści z przeglądarki internetowej na swoim komputerze, ale nie z innych urządzeń w Twojej sieci. Jeśli chcesz przetestować z innych urządzeń lokalnych, użyj flagi --host
, na przykład:
firebase serve --host 0.0.0.0 // accepts requests to any host
Krok 2: Wyświetl podgląd i udostępnij
Jeśli chcesz, aby inni widzieli zmiany w Twojej aplikacji sieci Web przed udostępnieniem jej na żywo, możesz użyć kanałów podglądu.
Po wdrożeniu w kanale podglądu Firebase udostępnia Twoją aplikację internetową pod „podglądowym adresem URL”, który jest tymczasowym adresem URL, który można udostępniać. Podczas korzystania z adresu URL podglądu Twoja aplikacja internetowa wchodzi w interakcję z prawdziwym zapleczem dla wszystkich zasobów projektu (z wyjątkiem wszelkich „przypiętych” funkcji w konfiguracji przepisywania ).
Pamiętaj, że chociaż adresy URL podglądu są trudne do odgadnięcia (ponieważ zawierają losowy skrót), są one publiczne. Tak więc każdy, kto zna adres URL, może uzyskać do niego dostęp.
W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:
firebase hosting:channel:deploy CHANNEL_ID
Zastąp CHANNEL_ID ciągiem znaków bez spacji (na przykład
feature_mission-2-mars
). Ten identyfikator zostanie użyty do skonstruowania adresu URL podglądu powiązanego z kanałem podglądu.Otwórz swoją aplikację internetową pod adresem URL podglądu zwróconym przez interfejs wiersza polecenia. Będzie wyglądać mniej więcej tak:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Aby zaktualizować adres URL podglądu o zmiany, uruchom ponownie to samo polecenie. Upewnij się, że w poleceniu określono ten sam
CHANNEL_ID
.
Dowiedz się więcej o zarządzaniu kanałami podglądu , w tym o ustawianiu wygaśnięcia kanału.
Hosting Firebase obsługuje akcję GitHub, która automatycznie tworzy i aktualizuje adres URL podglądu, gdy zatwierdzasz zmiany w żądaniu ściągnięcia. Dowiedz się, jak skonfigurować i używać tej akcji GitHub .
Krok 3: Wdróż na żywo
Gdy będziesz gotowy, aby podzielić się swoimi zmianami ze światem, wdróż zawartość i konfigurację Hostingu na swoim kanale na żywo. Firebase oferuje kilka różnych opcji tego kroku w zależności od przypadku użycia (zobacz opcje poniżej).
Opcja 1: sklonuj kanał podglądu do kanału na żywo
Ta opcja daje pewność, że wdrażasz w swoim kanale na żywo dokładnie taką zawartość i konfigurację, które zostały przetestowane w kanale wersji zapoznawczej. Dowiedz się więcej o klonowaniu wersji .
Z dowolnego katalogu uruchom następujące polecenie:
firebase hosting:clone SOURCE_SITE_ID:SOURCE_CHANNEL_ID TARGET_SITE_ID:live
Zastąp każdy symbol zastępczy następującym:
SOURCE_SITE_ID i TARGET_SITE_ID : są to identyfikatory witryn hostingowych zawierających kanały.
- W przypadku domyślnej witryny hostingowej użyj identyfikatora projektu Firebase.
- Możesz określić witryny, które znajdują się w tym samym projekcie Firebase, a nawet w różnych projektach Firebase.
SOURCE_CHANNEL_ID : To jest identyfikator kanału, który obecnie obsługuje wersję, którą chcesz wdrożyć na swoim kanale na żywo.
- W przypadku kanału na żywo użyj
live
jako identyfikatora kanału.
- W przypadku kanału na żywo użyj
Wyświetl zmiany (następny krok).
Opcja 2: Wdróż z lokalnego katalogu projektu do swojego kanału na żywo
Ta opcja zapewnia elastyczność dostosowywania konfiguracji specyficznych dla kanału na żywo lub wdrażania, nawet jeśli nie korzystałeś z kanału w wersji zapoznawczej.
W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:
firebase deploy --only hosting
Wyświetl zmiany (następny krok).
Krok 4: Wyświetl zmiany w swojej aktywnej witrynie
Obie powyższe opcje umożliwiają wdrożenie treści i konfiguracji hostingu w następujących witrynach:
Subdomeny udostępniane przez Firebase dla Twojej domyślnej witryny Hostingu i wszelkich dodatkowych witryn Hostingu:
SITE_ID .web.app
(jakPROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(jakPROJECT_ID .firebaseapp.com
)Wszelkie niestandardowe domeny , które połączyłeś ze swoimi witrynami hostingowymi
Aby ograniczyć wdrożenie do określonej witryny Hostingu, określ miejsce docelowe wdrożenia w poleceniu CLI.
Inne działania 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 na pulpicie nawigacyjnym Hosting w konsoli Firebase. Na przykład:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Dodaj skryptowe zadania przed i po wdrożeniu
Opcjonalnie możesz połączyć skrypty powłoki z poleceniem firebase deploy
, aby wykonać zadania przed wdrożeniem lub po wdrożeniu. Na przykład hak po wdrożeniu może powiadamiać administratorów o nowych wdrożeniach zawartości witryny. Więcej informacji znajdziesz w dokumentacji Firebase CLI .
Buforowanie wdrożonej zawartości
Gdy wysyłane jest żądanie dotyczące zawartości statycznej , Firebase Hosting automatycznie zapisuje ją w pamięci podręcznej w sieci CDN. Jeśli ponownie wdrożysz zawartość swojej witryny, Firebase automatycznie wyczyści całą zawartość statyczną przechowywaną w pamięci podręcznej w sieci CDN, aby nowe żądania otrzymywały nową treść.
Pamiętaj, że możesz skonfigurować buforowanie zawartości dynamicznej .
Obsługa przez HTTPS
Upewnij się, że wszystkie zasoby zewnętrzne, które nie są hostowane na Hostingu Firebase, są ładowane przez SSL (HTTPS), w tym wszelkie skrypty zewnętrzne. Większość przeglądarek nie pozwala użytkownikom na ładowanie „mieszanych treści” (ruch SSL i inny niż SSL).
Następne kroki
Zintegruj się z GitHub i iteruj wyświetlaną zawartość, konfigurując GitHub Action .
Dowiedz się o dalszych możliwościach hostingu:
Zapoznaj się z pełną dokumentacją Firebase CLI .
Przygotuj się do uruchomienia aplikacji:
- Skonfiguruj alerty budżetowe dla swojego projektu w Google Cloud Console.
- Monitoruj pulpit nawigacyjny Wykorzystanie i rozliczenia w konsoli Firebase, aby uzyskać ogólny obraz wykorzystania projektu w wielu usługach Firebase. Możesz także odwiedzić pulpit nawigacyjny użytkowania hostingu, aby uzyskać bardziej szczegółowe informacje o użytkowaniu.
- Przejrzyj listę kontrolną uruchamiania Firebase .