Pierwsze kroki z App Hosting

Jeśli masz już aplikację 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 App Hosting backendu, a następnie rozpoczęcie wdrażania przez przesłanie zmian do gałęzi live. Jeśli nie masz aplikacji, użyj jednej z naszych przykładowych aplikacji, aby wykonać czynności opisane w tym przewodniku.

Aby uzyskać pomoc AI, skopiuj poniższy prompt do asystenta kodowania AI (np. Antigravity, Claude Code, Codex i Cursor). Możesz dostosować prompta i współpracować 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.

W tym przewodniku opisujemy, jak skonfigurować App Hosting w Firebase konsoli, aby automatycznie wdrażać każdą nową zmianę w repozytorium GitHub. Na koniec 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 przepływie Firebase w konsoli, ale istnieją inne sposoby wdrażania, w tym użycie interfejsu wiersza poleceń Firebase do wdrożenia kodu lokalnego bez połączenia z GitHubem.

Krok 1. Utwórz fork repozytorium demonstracyjnego

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

Krok 2. Utwórz backend App Hosting

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

  2. Kliknij Rozpocznij.

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

Zrzut ekranu przedstawiający konfigurację backendu usługi App Hosting.

Postępuj zgodnie z instrukcjami, aby wykonać te czynności:

  • Wybierz region podstawowy (zwykle ten, który znajduje się najbliżej Twoich użytkowników).
  • Połącz z GitHubem. Wybierz repozytorium, które zostało utworzone przez rozwidlenie repozytorium apphosting-adapters.
  • Ustaw katalog główny aplikacji na jeden z tych folderów:
  • Ustaw gałąź live jako główną.
  • Włącz automatyczne wdrażanie (automatyczne wdrażanie jest domyślnie włączone).
  • Przypisz nazwę do backendu.
  • Wybierz środowisko wykonawcze. Domyślnie wstępnie wybrana jest najnowsza zalecana wersja Node.js.
    • Skonfiguruj automatyczne aktualizacje obrazu podstawowego. ABIU jest domyślnie włączone i automatycznie stosuje poprawki zabezpieczeń w środowisku bazowym. Możesz zrezygnować z ABIU, wybierając „Nieokreślony” jako czas działania.
  • Utwórz nową aplikację internetową Firebase.

Kliknij Zakończ i wdroż.

Krok 3. 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ą. Ma ona format backend-id--project-id.us-central1.hosted.app.

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

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

Krok 4. Rozpocznij wdrażanie, wprowadzając zmianę

Gdy utworzysz backend i uzyskasz URL wersji opublikowanej, 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 rozwidleniu demonstracyjnego repozytorium GitHub przejdź do źródła strony głównej aplikacji w wersji demonstracyjnej, wprowadź dowolną rozpoznawalną zmianę, a następnie wypchnij 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 zobaczyć zmianę na stronie głównej aplikacji.

Dalsze kroki