Inizia a utilizzare App Hosting

Con un'app Next.js o Angular esistente (Next.js versioni 13.5.x+ o Angular 18.2.x+) in un repository GitHub, iniziare a utilizzare App Hosting può essere semplice come creare un backend App Hosting e poi avviare un rollout con un push al ramo live. Se non hai un'app, utilizza una delle nostre app di esempio per seguire i passaggi descritti 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 esistente Google Cloud, inserisci il nome del progetto o selezionalo dal menu a discesa.

    • Per creare un nuovo progetto, inserisci un nome. Puoi anche modificare facoltativamente 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 utilizzando 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 posizione dei report, quindi 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, verrà visualizzata la pagina Panoramica del progetto Firebase nella console 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 trasferisci il codice campione appena inizializzato.

Passaggio 1: crea un backend App Hosting

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

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

CLI: (versione 13.15.4 o successive) Per creare un backend, esegui il seguente comando dalla radice della directory del progetto locale, fornendo il tuo projectID come argomento:

firebase apphosting:backends:create --project PROJECT_ID

Per la console o l'interfaccia a riga di comando, segui le istruzioni per scegliere una regione, configurare una connessione GitHub e configurare queste impostazioni di deployment di base:

  • Imposta la directory principale dell'app (il valore predefinito è /)

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

  • Impostare il ramo live

    Questo è il ramo del repository GitHub di cui viene eseguito il deployment nell'URL live. Spesso è il ramo in cui vengono uniti i rami delle 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 offre 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}

Passaggio 3: attiva un rollout eseguendo il push di una modifica

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

  1. In GitHub, invia una modifica al branch live dell'app web.
  2. Apri la scheda App Hosting nella console Firebase e seleziona Visualizza dashboard per il tuo backend. L'elenco delle tabelle mostra il commit specifico associato al rollout attivato dalla modifica.

Passaggi successivi