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 na żywo. Jeśli nie masz aplikacji, użyj jednej z naszych przykładowych aplikacji, aby wykonać czynności opisane w tym przewodniku.

Jeśli wolisz wdrożyć aplikację Next.js lub Angular bez połączenia z repozytorium GitHub, App Hosting obsługuje alternatywne sposoby wdrażania za pomocą Terraform, Firebase Studio lub bezpośrednio z lokalnego źródła. Zawsze możesz połączyć repozytorium GitHub później.

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:

Nowi użytkownicy Firebase lub Cloud

Jeśli dopiero zaczynasz korzystać z Firebase lub Google Cloud, wykonaj te czynności.
Możesz też wykonać te czynności, jeśli chcesz utworzyć zupełnie nowy projekt Firebase (i powiązany z nim Google Cloudprojekt).

  1. Zaloguj się w Firebase konsoli.
  2. Kliknij przycisk, aby utworzyć nowy projekt Firebase.

  3. W polu tekstowym wpisz nazwę projektu.

    Jeśli należysz do organizacji Google Cloud, możesz opcjonalnie wybrać folder, w którym chcesz utworzyć projekt.

  4. Po wyświetleniu monitu zapoznaj się z warunkami usługi Firebase i zaakceptuj je, a potem kliknij Dalej.
  5. (Opcjonalnie) Włącz w konsoli Firebase pomoc AI (nazywaną „Gemini w Firebase”), która ułatwi Ci rozpoczęcie pracy i usprawni proces programowania.

  6. (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 Analytics lokalizację raportowania, a następnie zaakceptuj ustawienia udostępniania danych i Google Analytics warunki projektu.

  7. Kliknij Utwórz projekt.

Firebase utworzy Twój projekt, udostępni początkowe zasoby i włączy ważne interfejsy API. Po zakończeniu procesu otworzy się strona podglądu projektu Firebase w Firebase konsoli.

Istniejący projekt w chmurze

Wykonaj te czynności, jeśli chcesz zacząć korzystać z Firebase w przypadku istniejącego projektuGoogle Cloud. Dowiedz się więcej o dodawaniu Firebase do istniejącego projektu Google Cloud i rozwiązywaniu związanych z tym problemów.

  1. Zaloguj się w Firebasekonsoli na konto, które daje Ci dostęp do istniejącego projektu Google Cloud.
  2. Kliknij przycisk, aby utworzyć nowy projekt Firebase.
  3. U dołu strony kliknij Dodaj Firebase do projektu Google Cloud.
  4. W polu tekstowym zacznij wpisywać nazwę projektu, a następnie wybierz projekt z wyświetlonej listy.
  5. Kliknij Otwórz projekt.
  6. Po wyświetleniu monitu zapoznaj się z warunkami usługi Firebase i zaakceptuj je, a potem kliknij Dalej.
  7. (Opcjonalnie) Włącz w konsoli Firebase pomoc AI (nazywaną „Gemini w Firebase”), która ułatwi Ci rozpoczęcie pracy i usprawni proces programowania.

  8. (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 Analytics lokalizację raportowania, a następnie zaakceptuj ustawienia udostępniania danych i Google Analytics warunki projektu.

  9. Kliknij Dodaj Firebase.

Firebase dodaje Firebase do istniejącego projektu. Po zakończeniu procesu otworzy się strona podglądu projektu Firebase w Firebase konsoli.

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, aby umożliwić Ci tworzenie i uruchamianie 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