Premiers pas avec l'hébergement d'applications

Si vous disposez d'une application Next.js ou Angular existante (Next.js 13.5.x ou version ultérieure, ou Angular 18.2.x ou version ultérieure) 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 active. Si vous n'avez pas d'application, utilisez l'une de nos applications exemples pour suivre les étapes décrites dans ce guide.

Pour obtenir l'assistance de l'IA, copiez le prompt ci-dessous dans votre agent de codage IA (comme Antigravity, Claude Code, Codex et Cursor). Vous pouvez personnaliser la requête et l'affiner avec votre agent. Pour obtenir des instructions d'installation détaillées, consultez Compétences d'agent Firebase. 

Help me use Firebase in my app.
1. Make sure that **Firebase agent skills** are installed and updated. For Claude Code, Codex, or Cursor agents, help me install the Firebase plugin. For other agents, run `npx skills add firebase/agent-skills`.  Always try to use **Firebase agent skills** for Firebase-related tasks.
2. Help me use Firebase to host my web app. Set up my app to use Firebase, and then deploy my app.

Ce guide explique comment configurer App Hosting dans la console Firebase pour déployer automatiquement chaque fois qu'un nouveau commit est effectué dans un dépôt GitHub. À la fin de ce processus, vous disposerez d'un exemple d'application Next.js ou Angular en ligne qui sera redéployé chaque fois que vous validerez une nouvelle modification dans la branche main de votre dépôt GitHub.

Bien que ce guide se concentre sur le flux de la console Firebase recommandé, il existe d'autres façons de déployer, y compris en utilisant la CLI Firebase pour déployer du code local sans connexion GitHub.

Étape 1 : Dupliquer le dépôt de démonstration

Accédez à https://github.com/firebase/apphosting-adapters et sélectionnez Fork.

Étape 2 : Créez un backend App Hosting

  1. Dans la console Firebase, accédez à Hébergement et sans serveur > App Hosting.

  2. Cliquez sur Commencer.

  3. Si vous y êtes invité, passez au forfait Blaze avec paiement à l'usage pour utiliser App Hosting.

Capture d'écran de la configuration du backend App Hosting.

Suivez les instructions pour effectuer les étapes suivantes :

  • Choisissez une région principale (généralement la région la plus proche de vos utilisateurs).
  • Connectez-vous à GitHub. Choisissez le dépôt que vous venez de créer en dupliquant le dépôt apphosting-adapters.
  • Définissez le répertoire racine de votre application sur l'un des éléments suivants :
  • Définissez la branche active sur main.
  • Activez les déploiements automatiques (ils sont activés par défaut).
  • Attribuez un nom à votre backend.
  • Sélectionnez votre environnement d'exécution. Par défaut, la version recommandée la plus récente de Node.js est présélectionnée.
    • Configurez les mises à jour automatiques des images de base (ABIU). ABIU est activé par défaut et applique automatiquement les correctifs de sécurité à votre environnement sous-jacent. Vous pouvez désactiver l'ABIU en sélectionnant "Non spécifié" pour votre environnement d'exécution.
  • Créer une application Web Firebase

Sélectionnez Terminer et déployer.

Étape 3 : 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.

Dans la ligne Informations sur le backend du tableau de bord de votre backend, sélectionnez le lien vers votre backend actif pour afficher votre nouveau site Web :

Capture d'écran de la ligne d'informations du backend avec le lien de l'application en ligne mis en évidence.

Étape 4 : Déclencher un déploiement en effectuant un changement

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 envoyez des modifications dans la branche active de votre dépôt GitHub. Pour tester votre configuration App Hosting :

  1. Dans votre duplication du dépôt GitHub de démonstration, accédez à la source de la page d'accueil de l'application de démonstration, apportez une modification reconnaissable de votre choix, puis transférez votre modification vers la branche principale. Pour trouver votre page d'accueil :

    • Next.js : /starters/nextjs/basic/src/app/page.tsx
    • Angular : /starters/angular/basic/src/app/pages/home/home.component.html

  2. Dans la console Firebase, surveillez App Hosting à mesure que votre nouvelle modification est déployée en production. Une fois le déploiement terminé, vous pouvez voir vos modifications sur la page d'accueil de l'application.

Étapes suivantes