Premiers pas avec l'hébergement d'applications

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

Ce guide explique comment configurer App Hosting dans la console Firebase pour effectuer un déploiement automatique chaque fois qu'un 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ée chaque fois que vous commiterez une nouvelle modification dans la branche main de votre dépôt GitHub.

Bien que ce guide se concentre sur le processus recommandé dans la console Firebase, il existe d'autres façons de déployer, y compris à l'aide de l'interface CLI Firebase pour déployer du code local sans connexion GitHub.

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

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

Étape 2 : Créez un backend App Hosting

  1. Dans la console Firebase, accédez à Hosting & Serverless > 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 firebase-framework-tools.
  • 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 dernière version recommandée de Node.js est présélectionnée.
    • Configurez les mises à jour automatiques des images de base (ABIU). Elles sont activées par défaut et appliquent automatiquement des correctifs de sécurité à votre environnement sous-jacent. Vous pouvez désactiver les mises à jour automatiques des images de base en sélectionnant "Not specified" (Non spécifié) pour votre environnement d'exécution.
  • Créez une application Web Firebase.

Sélectionnez Finish and deploy (Terminer et déployer).

Étape 3 : Affichez 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 Backend information (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 de backend avec le lien vers l'application en direct mis en évidence.

Étape 4 : Déclenchez 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 envoyez des modifications dans la branche active de votre dépôt GitHub. Pour effectuer un test de votre App Hosting configuration :

  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 la modification reconnaissable de votre choix, puis envoyez-la à 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 pendant le déploiement de votre nouvelle modification en production. Une fois le déploiement terminé, vous pouvez afficher votre modification sur la page d'accueil de l'application.

Étapes suivantes