Pierwsze kroki z App Hosting

W przypadku istniejącej aplikacji Next.js lub Angular (Next.js w wersji 13.5.x lub nowszej lub Angular w wersji 18.2.x lub nowszej) w repozytorium GitHub rozpoczęcie pracy 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 przejść na plan Blaze.

Aby utworzyć projekt:

  1. W Firebasekonsoli kliknij Dodaj projekt.

    • Aby dodać zasoby Firebase do istniejącego Google Cloudprojektu, 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, przeczytaj i zaakceptuj warunki usługi Firebase.

  3. Kliknij Dalej.

  4. (Opcjonalnie) skonfiguruj Google Analytics w projekcie, co umożliwi optymalne korzystanie z tych usług Firebase: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging i Remote Config (w tym Personalizacja).

    Wybierz istniejące Google Analyticskonto lub utwórz nowe. Jeśli tworzysz nowe konto, wybierz Analyticslokalizację raportowania, a następnie zaakceptuj ustawienia udostępniania danych i Google Analytics warunki korzystania z usługi w przypadku projektu.

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

Firebase automatycznie udostępnia zasoby dla Twojego projektu Firebase. Po zakończeniu procesu otworzy się strona podsumowania projektu Firebase w Firebasekonsoli.

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

Jeśli nie masz jeszcze aplikacji internetowej w repozytorium GitHub lub wolisz wypróbować ten proces na przykładowej aplikacji, zacznij od zainicjowania jednego z naszych przykładów dla Next.js lub Angular:

npm init @apphosting

Przykładową aplikację możesz uruchomić lokalnie za pomocą 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 HostingBackend to zbiór zarządzanych zasobów, które App Hosting tworzy na potrzeby budowania i uruchamiania aplikacji internetowej.

Konsola Firebase: w menu Kompilacja wybierz Hosting aplikacji, a potem kliknij Rozpocznij.

Interfejs wiersza poleceń: (wersja 13.15.4 lub nowsza) Aby utworzyć backend, uruchom to polecenie w katalogu głównym lokalnego projektu, podając projectID jako argument:

firebase apphosting:backends:create --project PROJECT_ID

W przypadku konsoli lub interfejsu CLI postępuj zgodnie z instrukcjami, aby wybrać region, skonfigurować połączenie z GitHubem i skonfigurować te podstawowe ustawienia wdrażania:

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

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

  • Ustaw gałąź na żywo.

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

  • Akceptowanie i odrzucanie automatycznych wdrożeń

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

  • Przypisz nazwę do backendu.

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

Gdy utworzysz backend, Firebase udostępni Ci bezpłatną subdomenę, w której użytkownicy będą mogli 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 interfejsu wiersza poleceń:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}

Krok 3. Uruchom wdrażanie, wprowadzając zmianę

Gdy utworzysz backend i uzyskasz działający adres URL, możesz wywoływać wdrażanie nowej wersji aplikacji internetowej za każdym razem, gdy prześlesz zmiany do działającej gałęzi repozytorium GitHub. Aby przeprowadzić test konfiguracji App Hosting:

  1. W GitHubie przenieś zmianę do aktywnej gałęzi aplikacji internetowej.
  2. Otwórz kartęApp Hosting w konsoli Firebase i kliknij Wyświetl panel w przypadku backendu. Lista tabel zawiera konkretne zatwierdzenie powiązane z wdrożeniem wywołanym przez Twoją zmianę.

Dalsze kroki