Pierwsze kroki z App Hosting

Jeśli masz już aplikację Next.js lub Angular (wersje Next.js 13.5.x lub nowsze lub wersje 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, użyj 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 plan 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 uzyskać optymalne wrażenia podczas korzystania z tych usług Firebase: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging i Remote Config (w tym personalizacja).

    Wybierz istniejące konto Google Analytics lub utwórz nowe. Jeśli tworzysz nowe konto, wybierz Analyticsmiejsce 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 i aplikację internetową w usłudze GitHub

Jeśli nie masz jeszcze aplikacji internetowej w repozytorium GitHub lub wolisz wypróbować proces z przykładową aplikacją, zacznij od zainicjowania jednej z naszych aplikacji przykładowych, odpowiednio 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 przenieś 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 lokalnego katalogu projektu, podając jako argument projectID:

firebase apphosting:backends:create --project PROJECT_ID

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

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

    Zwykle jest to miejsce, w którym znajduje się 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 wdrażanie jest 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 tworzysz backend, Firebase udostępnia Ci bezpłatną subdomenę, do której użytkownicy mogą 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}

Krok 3. Uruchom wdrożenie, przesyłając zmianę

Gdy backend zostanie utworzony i uzyskasz 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 GitHub przenieś 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