Pierwsze kroki z App Hosting

Jeśli masz już aplikację Next.js lub Angular (wersje Next.js 13.5.x lub nowsze lub Angular 18.2.x 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, wykonaj czynności opisane w tym przewodniku, korzystając z jednej z naszych przykładowych aplikacji.

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 ją z menu.

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

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

  3. Kliknij Dalej.

  4. (Opcjonalnie) Skonfiguruj Google Analytics w swoim projekcie, aby zapewnić optymalne działanie tych usług Firebase: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging i Remote Config (w tym personalizacji).

    Wybierz istniejące konto Google Analytics lub utwórz nowe. Jeśli tworzysz nowe konto, wybierz Analyticslokalizację raportowania, a następnie zaakceptuj ustawienia udostępniania danych i zasady Google Analytics dotyczące projektu.

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

Firebase automatycznie udostępnia zasoby dla Twojego projektu Firebase. Po zakończeniu procesu wyświetli się strona podglądu 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ładową aplikację możesz uruchomić lokalnie, używając 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 tworzenia i uruchamiania aplikacji internetowej.

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 lokalnej lokalizacji 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 CLI postępuj zgodnie z instrukcjami, aby wybrać region, skonfigurować połączenie z GitHubem i skonfigurować te podstawowe ustawienia wdrożenia:

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

    Zwykle znajduje się tam plik package.json.

  • Ustaw gałąź produkcyjną.

    To jest gałąź w Twoim repozytorium GitHub, która jest wdrażana do adresu URL witryny. Często jest to gałąź, do której scalane są gałęzie funkcji lub gałęzie rozwoju.

  • Akceptowanie lub odrzucanie wdrożeń automatycznych

    Automatyczne wdrożenia są domyślnie włączone. Po zakończeniu tworzenia backendu możesz od razu wdrożyć aplikację na App Hosting.

  • Nazwij backend.

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

Gdy utworzysz backend, Firebase udostępni Ci bezpłatną subdomenę, do której użytkownicy końcowi będą mogli wchodzić w celu korzystania 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. Uruchom wdrożenie, przesyłając zmianę

Gdy backend zostanie utworzony, a Ty będziesz mieć aktywny adres URL, możesz uruchomić wdrażanie nowej wersji aplikacji internetowej, gdy tylko prześlesz zmiany do aktywnej gałęzi w repozytorium GitHub. Aby przetestować konfigurację App Hosting:

  1. W GitHubie prześlij zmianę 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