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.

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ę nowe zatwierdzenie. Na końcu tego procesu będziesz mieć działającą przykładową aplikację Next.js lub Angular, która będzie wdrażana ponownie za każdym razem, gdy zatwierdzisz nową zmianę w gałęzi main repozytorium GitHub.

Chociaż ten przewodnik koncentruje się na zalecanym procesie w konsoli Firebase, istnieją 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 usługi App Hosting.

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

  • Wybierz region podstawowy (zwykle region najbliższy użytkownikom).
  • 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 domyślnie włączone).
  • Przypisz nazwę do backendu.
  • 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 będą mogli odwiedzać Twoją aplikację internetową. Jej format to 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 wyróżnionym linkiem do aplikacji w wersji opublikowanej.

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

Gdy utworzysz backend i będziesz mieć URL wersji opublikowanej, możesz wywołać wdrażanie 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 rozwidleniu demonstracyjnego repozytorium GitHub otwórz kod źródłowy 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