Przed wdrożeniem zmian 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, by członkowie zespołu sprawdzili zmiany, Hosting może utworzyć możliwe do udostępnienia, tymczasowe adresy URL podglądu dla Twojej witryny. Obsługujemy nawet integrację z GitHubem w celu wdrożenia z wykorzystaniem żądania pull.
Zanim zaczniesz
Wykonaj czynności wymienione na stronie Pierwsze kroki z hostowaniem, a w szczególności te zadania:
- Zainstaluj lub zaktualizuj interfejs wiersza poleceń Firebase do najnowszej wersji.
- Połącz lokalny katalog projektu (zawierający treść aplikacji) z projektem Firebase.
Opcjonalnie możesz wdrożyć zawartość i konfigurację Hostingu aplikacji, ale nie jest to wymagane w przypadku czynności opisanych na tej stronie.
Krok 1. Przetestuj lokalnie
Jeśli robisz szybkie iteracje lub chcesz, aby aplikacja korzystała z emulowanych zasobów projektu backendu, możesz przetestować zawartość Hostingu i skonfigurować ją lokalnie. Podczas testowania lokalnego Firebase udostępnia Twoją aplikację internetową pod lokalnie hostowanym adresem URL.
Hosting jest częścią Pakietu emulatorów lokalnych Firebase, który umożliwia aplikacji interakcję z treściami i konfiguracją emulowanego Hostingu, a także opcjonalnie z emulowanymi zasobami projektu (funkcjami, bazami danych i regułami).
(Opcjonalnie) Domyślnie Twoja aplikacja hostowana lokalnie będzie wchodzić w interakcje z rzeczywistymi, a nie emulowanymi zasobami projektu (funkcjami, bazą danych, regułami itp.). Możesz też opcjonalnie połączyć aplikację, aby używać wszystkich skonfigurowanych przez Ciebie emulowanych zasobów projektu. Więcej informacji: Baza danych czasu rzeczywistego | Cloud Firestore | Cloud Functions
W katalogu głównym lokalnego katalogu projektu uruchom następujące polecenie:
firebase emulators:start
Otwórz aplikację internetową pod lokalnym adresem URL zwracanym przez interfejs wiersza poleceń (zwykle
http://localhost:5000
).Aby zaktualizować lokalny adres URL ze zmianami, odśwież przeglądarkę.
Przeprowadź test 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 w przeglądarce na komputerze, ale nie na innych urządzeniach w Twojej sieci. Jeśli chcesz przeprowadzić test na innych urządzeniach 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 inni użytkownicy zobaczyli zmiany w Twojej aplikacji internetowej, zanim ją opublikujesz, możesz użyć kanałów podglądu.
Po wdrożeniu aplikacji w kanale podglądu Firebase będzie udostępniać Twoją aplikację internetową pod „adresem URL podglądu” – czyli dostępnym do udostępniania, tymczasowym adresem URL. Gdy używasz adresu URL podglądu, aplikacja internetowa wchodzi w interakcję z rzeczywistym backendem dla wszystkich zasobów projektu (z wyjątkiem „przypiętych” funkcji w konfiguracji przepisów).
Adresy URL podglądu są trudne do odgadnięcia (zawierają losowy hasz), ale są publiczne. Dzięki temu każdy, kto zna ten 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 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.Otwórz aplikację internetową pod adresem URL podglądu zwróconym przez interfejs wiersza poleceń. Będzie to wyglądać mniej więcej tak:
PROJECT_ID--CHANNEL_ID-RANDOM_HASH.web.app
Aby zaktualizować adres URL podglądu w związku ze zmianami, uruchom to samo polecenie jeszcze raz. Pamiętaj, aby w poleceniu podać tę samą wartość
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.
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 z niego korzystać.
Krok 3. Wdróż wersję
Gdy uznasz, że chcesz podzielić się zmianami ze światem, wdróż zawartość i konfigurację Hostingu na swoim kanale na żywo. W Firebase dostępne są różne opcje tego etapu w zależności od zastosowania (opcje poniżej).
Opcja 1. Skopiuj z kanału podglądu do kanału na żywo
Ta opcja daje pewność, że wdrażasz na kanale aktywnym dokładnie zawartość i konfigurację przetestowane na kanale podglądu. Dowiedz się więcej o klonowaniu wersji.
W dowolnym katalogu uruchom to 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: to identyfikatory witryn Hosting, które zawierają kanały.
- Jako domyślnej witryny w Hostingu użyj identyfikatora projektu Firebase.
- Możesz wskazać witryny, które należą do tego samego projektu Firebase, a nawet do różnych projektów Firebase.
SOURCE_CHANNEL_ID: identyfikator kanału obsługującego wersję, którą chcesz wdrożyć na swoim kanale.
- W przypadku kanału na żywo użyj
live
jako identyfikatora.
- W przypadku kanału na żywo użyj
Wyświetl zmiany (następny krok).
Opcja 2. Wdróż z lokalnego katalogu projektu na kanale aktywnym
Dzięki tej opcji możesz dostosowywać konfiguracje pod kątem kanału transmisji na żywo lub wdrażać je, nawet jeśli nie korzystasz jeszcze z kanału wersji przedpremierowej.
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 działającej witrynie
Obie powyższe opcje służą do wdrażania zawartości i konfiguracji Hostingu w tych witrynach:
Subdomeny udostępnione w Firebase dla domyślnej witryny Hostingu i wszelkich dodatkowych witryn Hostingu:
SITE_ID.web.app
(np.PROJECT_ID.web.app
)
SITE_ID.firebaseapp.com
(np.PROJECT_ID.firebaseapp.com
)domeny niestandardowe połączone przez Ciebie z witrynami w Hostingu.
Aby ograniczyć wdrażanie do określonej witryny Hostingu, określ miejsce docelowe wdrożenia w poleceniu interfejsu wiersza poleceń.
Inne działania i informacje związane z wdrażaniem
Dodaj komentarz do wdrożenia
Opcjonalnie możesz dodać komentarz do wdrożenia. Ten komentarz będzie wyświetlany z innymi informacjami o wdrożeniu w panelu hostowania w konsoli Firebase. Przykład:
firebase deploy --only hosting -m "Deploying the best new feature ever."
Dodaj skryptowane zadania 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 punkt zaczepienia po wdrożeniu może
powiadamiać administratorów o wdrożeniach nowych treści w witrynie. Więcej informacji znajdziesz w dokumentacji interfejsu wiersza poleceń Firebase.
Buforowanie wdrożonych treści
Po otrzymaniu żądania treści statycznej Hosting Firebase automatycznie zapisuje je w pamięci podręcznej w sieci CDN. Jeśli ponownie wdrożysz treść witryny, Firebase automatycznie wyczyści wszystkie treści statyczne przechowywane w pamięci podręcznej w sieci CDN, tak aby nowe żądania mogły zostać odebrane.
Pamiętaj, że możesz skonfigurować zapisywanie zawartości dynamicznej w pamięci podręcznej.
Obsługa przez HTTPS
Upewnij się, że wszystkie zasoby zewnętrzne, które nie są hostowane w Hostingu Firebase, są ładowane przez SSL (HTTPS), w tym wszelkie skrypty zewnętrzne. Większość przeglądarek nie zezwala użytkownikom na ładowanie „treści mieszanej” (ruchu SSL i bez SSL).
Usuwam pliki
W Hostingu Firebase podstawowym sposobem usuwania wybranych plików z wdrożonej witryny jest usunięcie ich lokalnie, a następnie ponowne wdrożenie.
Dalsze kroki
Skonfiguruj działanie GitHub, aby przeprowadzić integrację z GitHubem i iterować zawartość wyświetlającą podgląd.
Dowiedz się więcej o innych możliwościach hostingu:
Zapoznaj się z pełną dokumentacją interfejsu wiersza poleceń Firebase.
Przygotuj się do wprowadzenia aplikacji na rynek:
- Skonfiguruj alerty dotyczące budżetu dla swojego projektu w konsoli Google Cloud.
- Monitoruj panel Wykorzystanie i płatności w konsoli Firebase, aby mieć ogólny obraz wykorzystania projektu w różnych usługach Firebase. Bardziej szczegółowe informacje o wykorzystaniu możesz też znaleźć w panelu Użycie hostingu.
- Zapoznaj się z listą kontrolną uruchamiania Firebase.