Pierwsze kroki z App Hosting

Jeśli masz już aplikację Next.js lub Angular (Next.js w wersji 13.5.x lub nowszej albo Angular w wersji 18.2.x lub nowszej) 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 do aktywnej gałęzi. 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ższego prompta do swojego asystenta kodowania AI (np. Antigravity, Claude Code, Codex lub Cursor). Możesz dostosować prompta i wprowadzać zmiany z agentem. Szczegółowe informacje o instalacji znajdziesz w artykule 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 do repozytorium GitHub zostanie przesłane nowe zatwierdzenie. Na końcu tego procesu będziesz mieć działającą przykładową aplikację Next.js lub Angular, która jest wdrażana ponownie za każdym razem, gdy zatwierdzisz nową zmianę w gałęzi main repozytorium GitHub.

Chociaż ten przewodnik skupia się na zalecanym procesie w konsoli Firebase, istnieją inne sposoby wdrażania, w tym użycie interfejsu wiersza poleceń Firebase do wdrażania kodu lokalnego bez połączenia z GitHubem.

Krok 1. Utwórz rozwidlenie repozytorium demonstracyjnego

Wejdź na https://github.com/firebase/apphosting-adapters i wybierz Fork (Rozwidlenie).

Krok 2. Utwórz backend App Hosting

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

  2. Kliknij Rozpocznij.

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

Zrzut ekranu przedstawiający konfigurację backendu App Hosting.

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

  • Wybierz region główny (zwykle region najbliżej 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 jedną z tych wartości:
  • Ustaw aktywną gałąź jako main.
  • 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). Funkcja ABIU jest domyślnie włączona i automatycznie stosuje poprawki zabezpieczeń w środowisku bazowym. Możesz zrezygnować z ABIU, wybierając „Nie określono” dla środowiska wykonawczego.
  • Utwórz nową aplikację internetową Firebase.

Kliknij Zakończ i wdróż.

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

Gdy tworzysz backend, Firebase udostępnia 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 w panelu backendu kliknij link do aktywnego backendu, aby wyświetlić nową witrynę:

Zrzut ekranu przedstawiający wiersz z informacjami o backendzie z wyróżnionym linkiem do opublikowanej aplikacji.

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

Gdy backend zostanie utworzony i będziesz mieć adres URL wersji opublikowanej, możesz uruchomić wdrażanie nowej wersji aplikacji internetowej za każdym razem, gdy prześlesz zmiany do gałęzi wersji opublikowanej w repozytorium GitHub. Aby przeprowadzić test konfiguracji App Hosting:

  1. W rozwidleniu repozytorium demonstracyjnego na GitHubie przejdź do źródła strony głównej aplikacji 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ć zmiany na stronie głównej aplikacji.

Dalsze kroki