Przed wdrożeniem w działającej witrynie warto wyświetlić i przetestować wprowadzone zmiany. Hosting Firebase umożliwia lokalne przeglądanie i testowanie zmian oraz interakcję z emulowanymi zasobami projektu zaplecza. Jeśli chcesz, aby Twoi współpracownicy 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ę z GitHub w celu wdrożenia za pomocą żądania ściągnięcia.
Zanim zaczniesz
Wykonaj kroki wymienione na stronie Rozpoczęcie hostingu , w szczególności następujące zadania:
- Zainstaluj lub zaktualizuj interfejs CLI Firebase do najnowszej wersji.
- Połącz lokalny katalog projektu (zawierający zawartość aplikacji) z projektem Firebase.
Opcjonalnie możesz wdrożyć zawartość i konfigurację hostingu aplikacji, ale nie jest to warunek wstępny wykonania kroków opisanych 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 lokalnego Firebase udostępnia 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 treścią i konfiguracją emulowanego hostingu, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, bazami danych i regułami).
(Opcjonalnie) Domyślnie aplikacja hostowana lokalnie będzie wchodzić w interakcję z rzeczywistymi , a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Zamiast tego możesz opcjonalnie połączyć swoją aplikację, aby korzystać ze skonfigurowanych emulowanych zasobów projektu. Dowiedz się więcej: Baza danych czasu rzeczywistego | Chmura Firestore | Funkcje chmury
W katalogu głównym lokalnego katalogu projektu uruchom następującą komendę:
firebase emulators:start
Otwórz aplikację internetową pod lokalnym adresem URL zwróconym przez interfejs CLI (zwykle
http://localhost:5000
).Aby zaktualizować lokalny adres URL zmianami, odśwież przeglądarkę.
Przetestuj z innych urządzeń lokalnych
Domyślnie emulatory odpowiadają tylko na żądania z 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 testować na innych urządzeniach 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 współdziała z emulowanym backendem dla zawartości i konfiguracji Hostingu (oraz opcjonalnie funkcji), ale z prawdziwym backendem dla wszystkich innych zasobów projektu.
W katalogu głównym lokalnego katalogu projektu uruchom następującą komendę:
firebase serve --only hosting
Otwórz aplikację internetową pod lokalnym adresem URL zwróconym przez interfejs CLI (zwykle
http://localhost:5000
).Aby zaktualizować lokalny adres URL zmianami, odśwież przeglądarkę.
Użyj firebase serve
aby przetestować z innych urządzeń lokalnych
Domyślnie firebase serve
odpowiada tylko na żądania z 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 testować na innych urządzeniach lokalnych, użyj flagi --host
w następujący sposób:
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 mogli zobaczyć zmiany w Twojej aplikacji internetowej przed jej publikacją, możesz skorzystać z kanałów podglądu.
Po wdrożeniu w kanale podglądu Firebase udostępnia Twoją aplikację internetową pod „adresem URL podglądu”, który jest udostępnianym, tymczasowym adresem URL. 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 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. Zatem każdy, kto zna adres URL, może uzyskać do niego dostęp.
W katalogu głównym lokalnego katalogu projektu uruchom następującą komendę:
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 aplikację internetową pod adresem URL podglądu zwróconym przez interfejs CLI. Będzie to wyglądać mniej więcej tak:
PROJECT_ID -- CHANNEL_ID - RANDOM_HASH .web.app
Aby zaktualizować adres URL podglądu zmianami, uruchom ponownie to samo polecenie. Upewnij się, że w poleceniu podano ten sam
CHANNEL_ID
.
Dowiedz się o zarządzaniu kanałami podglądu , w tym o ustawianiu daty 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
Kiedy 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 tę treść i konfigurację, które przetestowałeś w kanale podglądu. 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 lub nawet w różnych projektach Firebase.
SOURCE_CHANNEL_ID : jest to identyfikator kanału, który aktualnie 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 na swoim kanale 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ącą komendę:
firebase deploy --only hosting
Wyświetl zmiany (następny krok).
Krok 4: Wyświetl zmiany w działającej witrynie
Obie powyższe opcje umożliwiają wdrożenie zawartości i konfiguracji hostingu w następujących witrynach:
Subdomeny udostępniane przez Firebase dla domyślnej witryny hostingowej i wszelkich dodatkowych witryn hostingowych:
SITE_ID .web.app
(np.PROJECT_ID .web.app
)
SITE_ID .firebaseapp.com
(np.PROJECT_ID .firebaseapp.com
)Wszelkie domeny niestandardowe , które połączyłeś ze swoimi witrynami hostingowymi
Aby ograniczyć wdrażanie do określonej witryny hostingowej, określ cel 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 Hostingu w konsoli Firebase. Na przykład:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Dodaj zadania skryptowe przed 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 powiadamiać administratorów o wdrożeniu nowej zawartości witryny. Więcej szczegółów znajdziesz w dokumentacji Firebase CLI .
Buforowanie wdrożonej zawartości
Gdy zostanie wysłane żądanie treści statycznej , Firebase Hosting automatycznie buforuje zawartość w sieci CDN. Jeśli ponownie wdrożysz zawartość swojej witryny, Firebase automatycznie wyczyści całą buforowaną zawartość statyczną w sieci CDN, aby nowe żądania otrzymywały nową treść.
Pamiętaj, że możesz skonfigurować buforowanie zawartości dynamicznej .
Serwowanie przez HTTPS
Upewnij się, że wszystkie zasoby zewnętrzne, które nie są hostowane w Hostingu Firebase, są ładowane przez SSL (HTTPS), łącznie z wszelkimi skryptami zewnętrznymi. Większość przeglądarek nie pozwala użytkownikom na ładowanie „treści mieszanej” (ruch SSL i bez SSL).
Następne kroki
Zintegruj się z GitHubem i powtarzaj podgląd treści, konfigurując akcję GitHub .
Dowiedz się o dalszych możliwościach hostingu:
Zapoznaj się z pełną dokumentacją interfejsu CLI Firebase .
Przygotuj się do uruchomienia aplikacji:
- Skonfiguruj alerty budżetowe dla swojego projektu w Google Cloud Console.
- Monitoruj panel użytkowania i rozliczeń w konsoli Firebase, aby uzyskać ogólny obraz wykorzystania projektu w wielu usługach Firebase. Możesz także odwiedzić pulpit nawigacyjny wykorzystania hostingu, aby uzyskać bardziej szczegółowe informacje o użytkowaniu.
- Przejrzyj listę kontrolną uruchamiania Firebase .