Pierwsze kroki z App Hosting

Jeśli masz już aplikację Next.js lub Angular (Next.js w wersji 13.5.x+ lub Angular w wersji 18.2.x+) 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 zmian do gałęzi produkcyjnej. Jeśli nie masz aplikacji, użyj jednej z naszych przykładowych aplikacji, aby przejść przez kroki opisane w tym przewodniku.

Aby uzyskać pomoc AI, skopiuj prompt poniżej do swojego agenta kodowania AI (np. Antigravity, Claude Code, Codex i Cursor). Możesz dostosować prompt i iterować z agentem. Szczegółowe informacje o instalacji znajdziesz w sekcji Umiejętności agenta Firebase ._ 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

Z tego przewodnika dowiesz się, jak skonfigurować App Hosting w konsoli Firebase, aby automatycznie wdrażać aplikację za każdym razem, gdy w repozytorium GitHub pojawi się nowy commit. Na końcu tego procesu będziesz mieć działającą przykładową aplikację Next.js lub Angular, która będzie ponownie wdrażana za każdym razem, gdy zatwierdzisz nową zmianę w gałęzi main repozytorium GitHub.

Ten przewodnik koncentruje się na zalecanym procesie w konsoli Firebase, ale istnieją też inne sposoby wdrażania, w tym użycie interfejsu wiersza poleceń Firebase do wdrożenia kodu lokalnego bez połączenia z GitHub.

Krok 1. Utwórz fork repozytorium demonstracyjnego

Otwórz https://github.com/firebase/apphosting-adapters i kliknij Fork.

Krok 2. Utwórz backend App Hosting

  1. W konsoli Firebase otwórz Hosting i usługi bezserwerowe > App Hosting.

  2. Kliknij Rozpocznij.

  3. Jeśli pojawi się prośba, przejdź na abonament Blaze z płatnością według wykorzystania, aby korzystać z App Hosting.

Zrzut ekranu przedstawiający konfigurację backendu App Hosting.

Aby wykonać te czynności, postępuj zgodnie z instrukcjami:

  • Wybierz region podstawowy (zwykle region najbliżej użytkowników).
  • Połącz się z GitHub. Wybierz repozytorium, które zostało utworzone przez utworzenie forka repozytorium firebase-framework-tools.
  • Ustaw główny katalog aplikacji na jeden z tych:
  • Ustaw gałąź produkcyjną jako main.
  • Włącz automatyczne wdrażanie (jest ono domyślnie włączone).
  • Przypisz nazwę do backendu.
  • Wybierz środowisko wykonawcze. Domyślnie jest wybrana najnowsza zalecana wersja Node.js.
    • Skonfiguruj automatyczne aktualizacje obrazu podstawowego (ABIU). Automatyczne aktualizacje obrazu podstawowego są domyślnie włączone i automatycznie stosują poprawki zabezpieczeń w środowisku bazowym. Możesz zrezygnować z automatycznych aktualizacji obrazu podstawowego, wybierając „Nie określono” w przypadku środowiska wykonawczego.
  • Utwórz nową aplikację internetową Firebase.

Kliknij Zakończ i wdróż.

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

Gdy utworzysz backend, Firebase udostępni Ci bezpłatną subdomenę, w której użytkownicy mogą odwiedzać Twoją aplikację internetową. Ma ona format backend-id--project-id.us-central1.hosted.app.

W wierszu Informacje o backendzie na panelu backendu kliknij link do backendu produkcyjnego, aby wyświetlić nową witrynę:

Zrzut ekranu z wierszem informacji o backendzie z podkreślonym linkiem do aplikacji w wersji opublikowanej.

Krok 4. Wywołaj wdrożenie, przesyłając zmianę

Gdy utworzysz backend i będziesz mieć adres URL wersji opublikowanej, możesz wywołać wdrożenie nowej wersji aplikacji internetowej za każdym razem, gdy prześlesz zmiany do gałęzi produkcyjnej repozytorium GitHub. Aby przetestować konfigurację App Hosting:

  1. W forku demonstracyjnego repozytorium GitHub otwórz źródło strony głównej aplikacji w wersji demonstracyjnej, wprowadź dowolną rozpoznawalną zmianę, a następnie prześlij ją do gałęzi głównej. Aby znaleźć stronę główną:

    • Next.js: /starters/nextjs/basic/src/app/page.tsx
    • Angular: /starters/angular/basic/src/app/pages/home/home.component.html

  2. W konsoli Firebase monitoruj App Hosting, gdy nowa zmiana jest wdrażana w środowisku produkcyjnym. Po zakończeniu wdrażania możesz wyświetlić zmianę na stronie głównej aplikacji.

Dalsze kroki