Premiers pas avec l'hébergement d'applications

Avec une application Next.js ou Angular existante (versions 13 ou ultérieures de Next.js ou Angular 17.2 ou ultérieures) dans un dépôt GitHub, vous pouvez commencer à utiliser App Hosting aussi simplement que de créer un backend App Hosting, puis de lancer un déploiement avec un push vers votre branche en production. Si vous ne possédez 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 Google Cloud existant, saisissez son nom ou sélectionnez-le dans le menu déroulant.

    • Pour créer un projet, saisissez le nom souhaité. 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 vous permet de profiter d'une expérience optimale avec l'un des produits Firebase suivants:

    Sélectionnez un compte Google Analytics existant ou créez-en un.

    Si vous créez un compte, sélectionnez votre emplacement de création de rapports Analytics, puis acceptez les paramètres de partage des données et les conditions Google Analytics pour votre projet.

  5. Cliquez sur Créer un projet (ou sur Ajouter Firebase si vous utilisez 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 (facultatif): Créer 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 localement à l'aide de next dev ou ng start. Pour continuer, créez un dépôt GitHub et y transférez l'exemple de code nouvellement initialisé.

Étape 1: Créer un backend App Hosting

Un backend App Hosting est l'ensemble de ressources gérées que App Hosting crée pour créer et exécuter votre application Web. Tout propriétaire de projet peut créer le premier backend App Hosting d'un projet à l'aide de la console Firebase ou de la CLI Firebase. Après cette configuration initiale, les administrateurs App Hosting peuvent également créer et gérer des backends supplémentaires. Pour en savoir plus, consultez la section Rôles IAM Firebase App Hosting.

Console Firebase: dans le menu Créer, sélectionnez Hébergement d'applications, 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 et la région de votre choix comme arguments:

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

Pour la console ou la CLI, suivez les invites pour attribuer un nom à votre backend, configurer une connexion GitHub et configurer ces paramètres de déploiement de base:

  • 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éfinir 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 ligne. Il s'agit souvent de la branche dans laquelle les branches de fonctionnalités 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.

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

Lorsque vous créez un backend, Firebase vous fournit un sous-domaine sans frais sur lequel 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} --location us-central1

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

Une fois votre backend créé et que vous disposez d'une URL en ligne, 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 en ligne de votre dépôt GitHub. Pour tester votre configuration App Hosting:

  1. Dans GitHub, transférez une modification vers la branche en ligne 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 du tableau affiche le commit spécifique associé au déploiement déclenché par votre modification.

Étapes suivantes