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 przejść przez kroki opisane w tym przewodniku.

Z tego przewodnika dowiesz się, jak skonfigurować App Hosting w konsoli Firebase, aby automatycznie wdrażać zmiany za każdym razem, gdy w repozytorium GitHub pojawi się nowe zatwierdzenie. 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

Wejdź na stronę https://github.com/FirebaseExtended/firebase-framework-tools i kliknij Fork (Rozwidlenie).

Krok 2. Utwórz backend App Hosting

W konsoli Firebase otwórz App Hosting i kliknij Rozpocznij. Aby korzystać z hostingu aplikacji, musisz przejść na abonament Blaze.

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

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

  • Wybierz region podstawowy (zwykle ten, który znajduje się najbliżej Twoich użytkowników).
  • Połącz się z GitHubem. Wybierz repozytorium, które zostało utworzone przez rozwidlenie repozytorium firebase-framework-tools.
  • Ustaw główny katalog aplikacji na jeden z tych katalogów:
  • Ustaw gałąź live jako główną.
  • Włącz automatyczne wdrażanie (automatyczne wdrażanie jest domyślnie włączone).
  • Przypisz nazwę do backendu.
  • 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 w panelu backendu kliknij link do aktywnego backendu, aby wyświetlić nową witrynę:

Zrzut ekranu z wierszem informacji o backendzie z wyróżnionym linkiem do aplikacji w wersji opublikowanej.

Krok 4. Rozpocznij 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 rozwidleniu demonstracyjnego repozytorium GitHub 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 wdrażanie nowej zmiany w środowisku produkcyjnym. Po zakończeniu wdrażania zmiany będą widoczne na stronie głównej aplikacji.

Dalsze kroki