Inizia a utilizzare App Hosting

Se hai già un'app Next.js o Angular (versioni Next.js 13.5.x+ o Angular 18.2.x+) in un repository GitHub, iniziare a utilizzare App Hosting può essere semplice come creare un backend di App Hosting e poi avviare un'implementazione con un push al branch pubblicato. Se non hai un'app, utilizza una delle nostre app di esempio per seguire i passaggi descritti in questa guida.

Questa guida descrive come configurare App Hosting nella console Firebase per eseguire automaticamente il deployment ogni volta che viene eseguito un nuovo commit in un repository GitHub. Al termine di questo flusso, avrai un'app di esempio Next.js o Angular pubblicata di cui viene eseguito il deployment ogni volta che esegui il commit di una nuova modifica al branch main del repository GitHub.

Sebbene questa guida si concentri sul flusso della console Firebase consigliato, esistono altri modi per eseguire il deployment, incluso l'utilizzo della CLI Firebase per eseguire il deployment del codice locale senza una connessione GitHub.

Passaggio 1: crea una copia del repository demo

Vai alla pagina https://github.com/firebase/apphosting-adapters e seleziona Fork.

Passaggio 2: crea un backend App Hosting

  1. Nella console Firebase, vai a Hosting e serverless > App Hosting.

  2. Fai clic su Inizia.

  3. Se ti viene richiesto, esegui l'upgrade al piano tariffario Blaze con pagamento a consumo per utilizzare App Hosting.

Uno screenshot della configurazione del backend di App Hosting.

Segui le istruzioni per completare questi passaggi:

  • Scegli una regione principale (di solito la regione più vicina ai tuoi utenti).
  • Connettiti a GitHub. Scegli il repository che hai appena creato creando una copia del repository firebase-framework-tools.
  • Imposta la directory principale dell'app su una delle seguenti:
  • Imposta il branch pubblicato come main.
  • Abilita le implementazioni automatiche (sono abilitate per impostazione predefinita).
  • Assegna un nome al backend.
  • Crea una nuova app web Firebase.

Seleziona Fine ed esegui il deployment.

Passaggio 3: visualizza l'app di cui è stato eseguito il deployment

Quando crei un backend, Firebase ti fornisce un sottodominio senza costi in cui gli utenti finali possono visitare la tua app web. Il formato è backend-id--project-id.us-central1.hosted.app.

Nella riga Informazioni sul backend della dashboard del backend, seleziona il link al backend pubblicato per visualizzare il nuovo sito web:

Uno screenshot della riga di informazioni di backend con il link all'app live in evidenza.

Passaggio 4: attiva un'implementazione eseguendo il push di una modifica

Una volta creato il backend e ottenuto un URL pubblicato, puoi attivare l'implementazione di una nuova versione dell'app web ogni volta che esegui il push delle modifiche nel branch pubblicato del repository GitHub. Per eseguire un test della App Hosting configurazione:

  1. Nella copia del repository GitHub demo, vai all'origine della home page dell'app demo, apporta le modifiche riconoscibili che preferisci e poi esegui il push della modifica al branch main. Per trovare la home page:

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

  2. Nella Firebase console, monitora App Hosting mentre la nuova modifica viene implementata in produzione. Al termine dell'implementazione, puoi visualizzare la modifica nella home page dell'app.

Passaggi successivi