Premiers pas avec l'hébergement d'applications

Si vous disposez d'une application Next.js ou Angular (Next.js 13.5.x+ ou Angular 18.2.x+) dans un dépôt GitHub, vous pouvez commencer à utiliser App Hosting en créant un backend App Hosting, puis en lançant un déploiement avec un push vers votre branche de production. Si vous n'avez pas d'application, utilisez l'une de nos applications exemples pour suivre les étapes décrites dans ce guide.

Avant de commencer

Avant de pouvoir configurer Firebase App Hosting, vous devez créer un projet Firebase (si vous n'en avez pas déjà un) et passer au forfait Blaze.

Pour créer un projet :

  1. Dans la console Firebase, cliquez sur Ajouter un projet.

    • Pour ajouter des ressources Firebase à un projet existant Google Cloud, saisissez son nom ou sélectionnez-le dans le menu déroulant.

    • Pour créer un projet, saisissez son nom. Vous pouvez également modifier l'ID du projet affiché sous le nom du projet.

  2. Si vous y êtes invité, lisez et acceptez les Conditions d'utilisation de Firebase.

  3. Cliquez sur Continuer.

  4. (Facultatif) Configurez Google Analytics pour votre projet, ce qui permet une expérience optimale avec les produits Firebase suivants : Firebase A/B Testing, Cloud Messaging, Crashlytics, In-App Messaging et Remote Config (y compris Personnalisation).

    Sélectionnez un compte Google Analytics existant ou créez-en un. Si vous créez un compte, sélectionnez votre Analytics zone géographique pour les rapports, puis acceptez les paramètres de partage des données et les conditions d'utilisation de Google Analytics pour votre projet.

  5. Cliquez sur Créer un projet (ou Ajouter Firebase si vous ajoutez Firebase à un projet Google Cloud existant).

Firebase provisionne automatiquement des ressources pour votre projet Firebase. Une fois le processus terminé, vous êtes redirigé vers la page de présentation de votre projet Firebase dans la console Firebase.

Étape 0 (facultative) : Créez un dépôt GitHub et une application Web

Si vous n'avez pas encore d'application Web dans un dépôt GitHub ou si vous préférez essayer le flux avec un exemple d'application, commencez par initialiser l'un de nos exemples, pour Next.js ou Angular :

npm init @apphosting

Vous pouvez exécuter l'exemple d'application en local à l'aide de next dev ou ng start. Pour continuer, créez un dépôt GitHub et transférez-y l'exemple de code nouvellement initialisé.

Étape 1 : Créez un backend App Hosting

Un backend App Hosting est l'ensemble des ressources gérées que App Hosting crée pour concevoir et exécuter votre application Web.

Console Firebase : dans le menu Créer, sélectionnez App Hosting, puis Premiers pas.

CLI (version 13.15.4 ou ultérieure) : pour créer un backend, exécutez la commande suivante à partir de la racine du répertoire de votre projet local, en fournissant votre projectID comme argument :

firebase apphosting:backends:create --project PROJECT_ID

Que vous utilisiez la console ou la CLI, suivez les instructions pour choisir une région, configurer une connexion GitHub et définir les paramètres de déploiement de base suivants :

  • Définissez le répertoire racine de votre application (/ par défaut).

    C'est généralement là que se trouve votre fichier package.json.

  • Définissez la branche en direct.

    Il s'agit de la branche de votre dépôt GitHub qui est déployée sur votre URL en direct. Il s'agit souvent de la branche dans laquelle les branches de fonctionnalité ou de développement sont fusionnées.

  • Accepter ou refuser les déploiements automatiques

    Les déploiements automatiques sont activés par défaut. Une fois le backend créé, vous pouvez choisir de déployer immédiatement votre application sur App Hosting.

  • Attribuez un nom à votre backend.

Étape 2 : Afficher l'application déployée

Lorsque vous créez un backend, Firebase vous fournit un sous-domaine sans frais où les utilisateurs finaux peuvent accéder à votre application Web. Son format est backend-id--project-id.us-central1.hosted.app.

Pour afficher l'URL de votre application Web, consultez la console Firebase ou exécutez la commande CLI suivante :

firebase apphosting:backends:get --project PROJECT_ID {BACKEND_ID}

Étape 3 : Déclencher un déploiement en envoyant une modification

Une fois votre backend créé et que vous disposez d'une URL active, vous pouvez déclencher le déploiement d'une nouvelle version de votre application Web chaque fois que vous transférez des modifications dans la branche active de votre dépôt GitHub. Pour tester votre configuration App Hosting :

  1. Dans GitHub, transférez une modification vers la branche active de l'application Web.
  2. Ouvrez l'onglet App Hosting dans la console Firebase, puis sélectionnez Afficher le tableau de bord pour votre backend. La liste des tableaux affiche le commit spécifique associé au déploiement déclenché par votre modification.

Étapes suivantes