Premiers pas avec l'hébergement d'applications

Si vous disposez d'une application Next.js ou Angular existante (versions 13.5.x+ de Next.js ou 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 déployer automatiquement 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 : Dupliquer le dépôt de démonstration

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

Étape 2 : Créer 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.
  • Créez une application Web Firebase.

Sélectionnez Finish and deploy (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 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 du backend avec le lien vers l'application en direct mis en évidence.

Étape 4 : 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 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 Firebase console, surveillez App Hosting pendant que votre nouvelle modification est déployée en production. Une fois le déploiement terminé, vous pouvez afficher votre modification sur la page d'accueil de l'application.

Étapes suivantes