Inizia a utilizzare App Hosting

Se hai già un'app Next.js o Angular (versioni Next.js 13.5.x o successive o Angular 18.2.x o successive) in un repository GitHub, iniziare a utilizzare App Hosting può essere semplice come creare un backend App Hosting e avviare un rollout con un push al ramo live. Se non hai un'app, utilizza una delle nostre app di esempio per seguire la procedura descritta in questa guida.

Prima di iniziare

Prima di poter configurare Firebase App Hosting, devi creare un progetto Firebase (se non ne hai già uno) ed eseguire l'upgrade al piano Blaze.

Per creare un progetto:

  1. Nella console Firebase, fai clic su Aggiungi progetto.

    • Per aggiungere risorse Firebase a un progetto Google Cloud esistente, inserisci il nome del progetto o selezionalo dal menu a discesa.

    • Per creare un nuovo progetto, inserisci un nome. Puoi anche scegliere di modificare l'ID progetto visualizzato sotto il nome del progetto.

  2. Se richiesto, leggi e accetta i Termini di Firebase.

  3. Fai clic su Continua.

  4. (Facoltativo) Configura Google Analytics per il tuo progetto, che consente un'esperienza ottimale con i seguenti prodotti Firebase: Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging e Remote Config (inclusa la personalizzazione).

    Seleziona un account Google Analytics esistente o creane uno nuovo. Se crei un nuovo account, seleziona la Analytics località dei report, poi accetta le impostazioni di condivisione dei dati e i termini di Google Analytics per il tuo progetto.

  5. Fai clic su Crea progetto (o Aggiungi Firebase, se stai aggiungendo Firebase a un progetto Google Cloud esistente).

Firebase esegue automaticamente il provisioning delle risorse per il tuo progetto Firebase. Al termine della procedura, nella console Firebase verrà visualizzata la pagina Panoramica del progetto Firebase.

(Facoltativo) Passaggio 0: crea un repository GitHub e un'app web

Se non hai già un'app web in un repository GitHub o se preferisci provare il flusso con un'app di esempio, inizia inizializzando uno dei nostri esempi per Next.js o Angular:

npm init @apphosting

Puoi eseguire l'app di esempio localmente utilizzando next dev o ng start. Per continuare, crea un nuovo repository GitHub e esegui il push del codice di esempio appena inizializzato.

Passaggio 1: crea un backend App Hosting

Un backend App Hosting è la raccolta di risorse gestite che App Hosting crea per creare ed eseguire la tua app web.

Console Firebase: nel menu Build, seleziona App Hosting e poi Inizia.

CLI: (versione 13.15.4 o successive) per creare un backend, esegui il seguente comando dalla directory principale del progetto locale, specificando il projectID e la regione preferita come argomenti:

firebase apphosting:backends:create --project PROJECT_ID --location us-central1

Sia per la console che per la CLI, segui le istruzioni per scegliere una regione, configurare una connessione GitHub e configurare queste impostazioni di deployment di base:

  • Imposta la directory principale della tua app (il valore predefinito è /)

    Di solito è qui che si trova il file package.json.

  • Imposta il ramo live

    Si tratta del branch del tuo repository GitHub di cui viene eseguito il deployment nell'URL attivo. Spesso è il ramo in cui vengono uniti i rami di funzionalità o di sviluppo.

  • Accettare o rifiutare le implementazioni automatiche

    Le implementazioni automatiche sono abilitate per impostazione predefinita. Al termine della creazione del backend, puoi scegliere di eseguire immediatamente il deployment della tua app su App Hosting.

  • Assegna un nome al backend.

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

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

Per visualizzare l'URL della tua app web, controlla la Console Firebase o esegui il seguente comando CLI:

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID} --location us-central1

Passaggio 3: attiva un'implementazione inviando una modifica

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

  1. In GitHub, invia una modifica al ramo live dell'app web.
  2. Apri la scheda App Hosting nella console Firebase e seleziona Visualizza dashboard per il tuo backend. L'elenco della tabella mostra il commit specifico associato all'implementazione attivata dalla modifica.

Passaggi successivi