Pierwsze kroki z App Hosting

Jeśli masz już aplikację Next.js lub Angular (wersje Next.js 13 lub nowsze albo Angular 17.2 lub nowsze) w repozytorium GitHub, rozpoczęcie korzystania z App Hosting może być tak proste jak utworzenie backendu App Hosting, a następnie rozpoczęcie wdrażania przez przesłanie do gałęzi produkcyjnej. Jeśli nie masz aplikacji, skorzystaj z jednej z naszych przykładowych aplikacji, aby wykonać czynności opisane w tym przewodniku.

Zanim zaczniesz

Zanim skonfigurujesz Firebase App Hosting, musisz utworzyć projekt Firebase (jeśli jeszcze go nie masz) i przełączyć się 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 jego nazwę. Możesz też opcjonalnie edytować identyfikator projektu wyświetlany pod jego nazwą.

  2. Jeśli pojawi się taka prośba, zapoznaj się z warunkami usługi Firebase i je zaakceptuj.

  3. Kliknij Dalej.

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

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

    Jeśli tworzysz nowe konto, wybierz lokalizację raportowania Analytics, a następnie zaakceptuj ustawienia udostępniania danych i warunki korzystania z usługi Google Analytics w swoim projekcie.

  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 procesu wyświetli się strona podsumowania projektu Firebase w konsoli Firebase.

Krok 0 (opcjonalnie): utwórz repozytorium GitHub i aplikację internetową

Jeśli nie masz jeszcze aplikacji internetowej w repozytorium GitHub lub wolisz wypróbować proces na przykładowej aplikacji, zacznij od zainicjowania jednej z naszych przykładowych aplikacji (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 prześlij do niego nowo zainicjowany przykładowy kod.

Krok 1. Utwórz backend App Hosting

App Hosting backend to zbiór zarządzanych zasobów, które App Hosting tworzy w celu kompilowania i uruchamiania aplikacji internetowej. Możesz tworzyć i wyświetlać App Hosting backendy za pomocą konsoli Firebase lub interfejsu wiersza poleceń Firebase.

Konsola Firebase: w menu Kompilacja wybierz Hosting aplikacji, a następnie Rozpocznij.

CLI: (wersja 13.15.4 lub nowsza) Aby utworzyć backend, uruchom to polecenie w katalogu głównym lokalnego katalogu projektu, podając jako argumenty projectID i preferowany region:

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

Zarówno w konsoli, jak i w interfejsie wiersza poleceń postępuj zgodnie z instrukcjami wyświetlanymi na ekranie, aby nadać backendowi nazwę, skonfigurować połączenie z GitHubem i skonfigurować te podstawowe ustawienia wdrożenia:

  • Ustaw katalog główny aplikacji (wartość domyślna to /).

    Zwykle znajduje się tam plik package.json.

  • Ustaw gałąź na żywo.

    Jest to gałąź repozytorium GitHub, która jest wdrażana pod adresem URL wersji opublikowanej. Często jest to gałąź, do której scalane są gałęzie funkcji lub gałęzie rozwoju.

  • Akceptowanie lub odrzucanie wdrożeń automatycznych

    Automatyczne wdrażanie 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 utworzysz backend, Firebase udostępni Ci bezpłatną subdomenę, do której użytkownicy będą mogli wchodzić, aby korzystać z Twojej aplikacji internetowej. Format adresu to backend-id--project-id.us-central1.hosted.app.

Aby wyświetlić adres URL aplikacji internetowej, otwórz 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, a Ty będziesz mieć aktywny adres URL, możesz uruchamiać wdrażanie nowej wersji aplikacji internetowej za każdym razem, gdy prześlesz zmiany do aktywnej gałęzi w repozytorium GitHub. Aby przetestować konfigurację App Hosting:

  1. W GitHubie prześlij zmiany do gałęzi produkcyjnej aplikacji internetowej.
  2. W konsoli Firebase otwórz kartę App Hosting i wybierz Wyświetl panel dla backendu. W tabeli widać konkretnego zatwierdzenia powiązanego z wdrożeniem, które zostało wywołane przez Twoją zmianę.

Dalsze kroki