Pierwsze kroki z hostingiem aplikacji

Jeśli masz już w repozytorium GitHub aplikację Next.js lub Angular (Next.js w wersji 13 lub nowszej albo Angular w wersji 17.2 lub nowszej), rozpoczęcie korzystania z App Hosting może być tak proste, jak utworzenie backendu App Hostingu, a następnie rozpoczęcie wdrożenia z wypchnięciem do aktywnej gałęzi. Jeśli nie masz aplikacji, wykonaj czynności opisane w tym przewodniku, używając jednej z naszych przykładowych aplikacji.

Zanim zaczniesz

Zanim skonfigurujesz Firebase App Hosting, musisz utworzyć projekt Firebase (jeśli jeszcze go nie masz) i przejść na abonament Blaze.

Aby utworzyć projekt:

  1. W konsoli Firebase kliknij Dodaj projekt.

    • Aby dodać zasoby Firebase do istniejącego projektu Google Cloud, wpisz jego nazwę lub wybierz go z menu.

    • Aby utworzyć nowy projekt, wpisz odpowiednią nazwę. Możesz też opcjonalnie edytować identyfikator projektu wyświetlany pod jego nazwą.

  2. W razie potrzeby przeczytaj i zaakceptuj warunki korzystania z Firebase.

  3. Kliknij Dalej.

  4. (Opcjonalnie) Skonfiguruj Google Analytics w swoim projekcie, by zapewnić optymalną wygodę korzystania z tych usług Firebase:

    Wybierz istniejące konto Google Analytics lub utwórz nowe.

    Po utworzeniu nowego konta wybierz lokalizację raportowania Analytics, a następnie zaakceptuj w swoim projekcie ustawienia udostępniania danych i warunki korzystania z Google Analytics.

  5. Kliknij Utwórz projekt (lub Dodaj Firebase, jeśli używasz istniejącego projektu Google Cloud).

Firebase automatycznie udostępnia zasoby projektu Firebase. Po zakończeniu tego procesu otworzy się strona przeglądu Twojego projektu Firebase w konsoli Firebase.

Krok 0 (opcjonalny). Utwórz repozytorium GitHub i aplikację internetową

Jeśli nie masz jeszcze aplikacji internetowej znajdującej się w repozytorium GitHub lub jeśli wolisz wypróbować ten proces z przykładową aplikacją, zacznij od zainicjowania jednego z naszych przykładów dla Next.js lub Angular:

npm init @apphosting

Przykładowa aplikację możesz uruchomić lokalnie za pomocą narzędzia next dev lub ng start. Aby kontynuować, utwórz nowe repozytorium GitHub i przekaż do niego nowo zainicjowany przykładowy kod.

Krok 1. Utwórz backend App Hosting

Backend App Hosting to zbiór zarządzanych zasobów tworzonych przez App Hosting w celu tworzenia i uruchamiania Twojej aplikacji internetowej. Backendy App Hosting możesz tworzyć i wyświetlać za pomocą konsoli Firebase lub interfejsu wiersza poleceń Firebase.

Konsola Firebase: w menu Build (Tworzenie) wybierz App Hosting (Hosting aplikacji), a następnie Get Started (Rozpocznij).

Interfejs wiersza poleceń: (wersja 3.9 lub nowsza). Aby utworzyć backend, uruchom to polecenie w katalogu głównym lokalnego katalogu projektu, podając identyfikator projektu jako argument (w przypadku podglądu obsługiwany jest tylko region us-central1):

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

W przypadku konsoli lub interfejsu wiersza poleceń postępuj zgodnie z instrukcjami, aby przypisać nazwę do backendu, skonfigurować połączenie z GitHub i skonfigurować te podstawowe ustawienia wdrożenia:

  • Ustaw katalog główny aplikacji (domyślnie /).

    Zwykle w tym miejscu znajduje się plik package.json.

  • Ustaw aktywną gałąź.

    Jest to gałąź repozytorium GitHub, która jest wdrażana pod adresem URL wersji opublikowanej. Często jest to gałąź, z którą scalone są gałęzie cech lub gałęzie programowania.

  • Akceptowanie lub odrzucanie wdrożeń automatycznych

    Wdrażanie automatyczne jest domyślnie włączone. Po utworzeniu backendu możesz wybrać, czy aplikacja ma zostać natychmiast wdrożona w App Hosting.

Krok 2. Wyświetl wdrożoną aplikację

Gdy tworzysz backend, Firebase udostępnia bezpłatną subdomenę, w której użytkownicy mogą odwiedzać Twoją aplikację internetową. Jej format to backend-id--project-id.us-central1.hosted.app.

Aby wyświetlić adres URL aplikacji internetowej, sprawdź konsolę Firebase lub uruchom to polecenie w interfejsie wiersza poleceń:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

Krok 3. Aktywuj wdrożenie przez wypchnięcie zmiany

Gdy backend zostanie utworzony i masz już aktywny adres URL, możesz aktywować wdrażanie nowej wersji aplikacji internetowej za każdym razem, gdy wypchniesz zmiany do gałęzi aktywnej repozytorium GitHub. Aby przetestować konfigurację App Hostingu:

  1. W GitHubie prześlij zmianę do aktywnej gałęzi aplikacji internetowej.
  2. Otwórz kartę App Hosting (Hosting aplikacji) w konsoli Firebase i wybierz Wyświetl panel swojego backendu. Na liście tabel zobaczysz konkretne zatwierdzenie powiązane z wdrożeniem, które jest aktywowane przez Twoją zmianę.

Dalsze kroki