Inizia a utilizzare App Hosting

Se hai già un'app Next.js o Angular (versioni Next.js 13 o successive o Angular 17.2 o successive) in un repository GitHub, iniziare a utilizzare App Hosting può essere semplice come creare un backend App Hosting e avviare un implementazione con un push al tuo 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 il nome desiderato. Se vuoi, puoi anche 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, in modo da poter usufruire di un'esperienza ottimale con uno dei seguenti prodotti Firebase:

    Seleziona un account Google Analytics esistente o creane uno nuovo.

    Se crei un nuovo account, seleziona la Analytics località 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 utilizzi 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. Qualsiasi proprietario del progetto può creare il primo backend App Hosting per un progetto utilizzando la console Firebase o Firebase CLI. Dopo questa configurazione iniziale, gli amministratori App Hosting possono anche creare e gestire backend aggiuntivi. Per maggiori dettagli, consulta Firebase App Hosting Ruoli IAM.

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 assegnare un nome al backend, per configurare una connessione GitHub e per 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 ramo del tuo repository GitHub che viene eseguito nel tuo 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.

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