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

    • Aby utworzyć nowy projekt, wpisz jego nazwę. Opcjonalnie możesz też 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 w projekcie Google Analytics, aby optymalnie korzystać z tych usług Firebase:

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

    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 używasz 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 na potrzeby tworzenia i uruchamiania aplikacji internetowej. Każdy właściciel projektu może utworzyć pierwszy App Hosting backend dla projektu za pomocą konsoli Firebase lub interfejsu wiersza poleceń Firebase. Po tej wstępnej konfiguracji App Hostingadministratorzy mogą też tworzyć dodatkowe backendy i nimi zarządzać. Więcej informacji znajdziesz w sekcji Firebase App HostingUprawnienia.

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 (domyślnie /).

    Zwykle jest to miejsce, w którym znajduje się plik package.json.

  • Ustaw gałąź produkcyjną.

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

  • akceptować lub odrzucać automatyczne wdrażanie.

    Automatyczne wdrożenia są domyślnie włączone. Po zakończeniu tworzenia backendu możesz od razu wdrożyć aplikację na 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. Uruchom wdrożenie, przesyłając zmianę

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