Déployer une application React sur Firebase avec des actions GitHub

Le déploiement d'applications Web sur Firebase Hosting peut être fastidieux. Cependant, en utilisant les actions GitHub, vous pouvez simplifier et rationaliser le processus de déploiement et rendre il est incroyablement facile de gérer les flux de travail de déploiement tout au long de la durée de vie d'un logiciel projet.

En quelques étapes simples, vous pouvez configurer un workflow de déploiement pour automatiser le processus. Cela inclut le suivi des nouvelles modifications apportées aux branches et la journalisation des erreurs. Lisez la suite pour savoir comment déployer une application React sur le service d'hébergement de Firebase.

Qu'est-ce qu'un pipeline CI/CD?

Un pipeline CI/CD (Continuous Integration/Continuous Delivery) est un ensemble de processus automatisés mis en œuvre pour permettre de construire, tester et déployer en continu des applications.

En termes simples, un pipeline CI/CD est mis en place pour automatiser les processus impliqués dans le cycle de vie du développement logiciel. Cela comprendra le développement proprement dit, les tests, les versions (version bêta, alpha et finale), les corrections de bogues et même les mises à jour des fonctionnalités. Essentiellement, ce processus permet d'expédier facilement et rapidement des logiciels de qualité.

Un pipeline CI/CD couvre généralement quelques étapes, notamment :

1. Phase source: Cette phase couvre le développement et la maintenance proprement dits du code de l'application avec un outil de contrôle de version tel que Git.
2. Étape de construction: cette étape assemble le code source avec toutes ses dépendances dans un format exécutable.
3. Phase de test: Cette phase intègre des tests automatisés pour valider la qualité du logiciel. L'objectif final est de détecter et de corriger les bogues. Vous pouvez effectuer différents types de tests à cette étape et une fois que le code a réussi les tests, il est prêt à être déployé.
4. Déploiement: cette étape automatise le processus de déploiement dans l'environnement de production.

Le pipeline doit surveiller chaque étape pour s'assurer qu'il n'y a pas de bugs et pour améliorer l'ensemble du processus pour les futures versions.

Qu'est-ce que les actions GitHub?

GitHub Actions est une fonctionnalité fournie par GitHub pour automatiser les processus de workflow de déploiement d'un logiciel dans les pipelines CI/CD. Il permet de définir et d'automatiser les workflows de déploiement directement depuis le référentiel GitHub de votre projet.

GitHub Actions présente plusieurs avantages :

1. Facile à utiliser: GitHub Actions fournit une interface conviviale et une syntaxe simple pour configurer les workflows de déploiement. Vous pouvez facilement et rapidement définir les flux de travail de votre projet à l'aide de l'éditeur intégré sur GitHub.
2. Intégration native: GitHub Actions fait partie de GitHub, ce qui facilite la configuration, la gestion et la collaboration sur les flux de travail parallèlement au code de votre projet.
3. Flexible et personnalisable: GitHub Actions fournit une plate-forme flexible et personnalisable qui vous permet de créer des flux de travail adaptés à vos besoins spécifiques. De plus, il prend en charge plusieurs langages de programmation. Cela signifie que vous pouvez l'utiliser avec la technologie que vous préférez.

Configurer un projet Firebase et le client React

Pour commencer, rendez-vous sur Base de feu et connectez-vous avec votre compte Google. Sur la page de présentation de la console, cliquez sur Créer un projet pour configurer un nouveau projet et fournir le nom du projet.

Suivant, créer une application React et installez les outils de ligne de commande Firebase :

npm install -g firebase-tools

Vous pouvez trouver le code de ce projet dans son Référentiel GitHub.

Connectez-vous à Firebase depuis votre terminal en utilisant les informations d'identification de votre compte Firebase.

connexion firebase: ci

Cela déclenchera le flux d'authentification Firebase qui vous demandera d'entrer vos informations de connexion si vous n'êtes pas déjà connecté. Une fois que Firebase vous aura authentifié, il imprimera un jeton. Copiez ce jeton; vous l'utiliserez pour exécuter des commandes Firebase dans votre configuration GitHub Actions.

Enfin, créez une version prête pour la production de votre application :

construction d'exécution npm

Cette commande génère les fichiers et actifs nécessaires, dans un nouveau dossier "build" dans le répertoire racine, requis pour déployer l'application.

Initialiser Firebase dans votre application React

Exécutez cette commande pour initialiser Firebase dans le dossier de votre projet :

initialisation de la base de feu

Ensuite, confirmez que vous souhaitez initialiser Firebase dans votre projet et continuez et sélectionnez Hébergement: configurez les fichiers pour l'hébergement Firebase et (éventuellement) configurez les déploiements d'action GitHubdans la liste des options.

Spécifiez que vous souhaitez utiliser un projet existant et sélectionnez le nom du projet que vous avez initialement créé sur la console développeur de Firebase.

Ensuite, spécifiez le dossier 'build' comme dossier public répertoire, sélectionnez Non pour réécrire toutes les URL dans l'option /index.html, sélectionnez Non à la possibilité de configurer des builds et des déploiements automatiques à partir de GitHub, et enfin, sélectionnez Oui pour écraser l'option de fichier build/index.html.

Après avoir apporté les modifications ci-dessus, la CLI créera un fichier firebase.json dans le répertoire racine. Ce fichier contient toute la configuration d'hébergement dont le workflow GitHub Actions aura besoin.

Enfin, avant de configurer le workflow GitHub Actions, créer un dépôt sur GitHub, et poussez-y les fichiers de projet.

Configuration des actions GitHub

Dans le référentiel de votre projet sur GitHub, sélectionnez Paramètres > Secrets et variables > Actions. Dans la page secrète du référentiel, entrez FIREBASE_TOKEN comme nom du secret, et collez le jeton Firebase que vous avez copié dans le secrets des champs.

Configurer le workflow de déploiement

Cliquez sur l'onglet Actions dans le référentiel de votre projet et sélectionnez Configurer Nodejs flux de travail dans le Intégration continue section.

Ensuite, renommez le nom du fichier en firebase.yml, supprimez le code passe-partout dans l'éditeur et ajoutez le code ci-dessous :

# Ce workflow effectuera une installation propre des dépendances de nœuds,
# cachez-les/restaurez-les, construisez le source coder et exécuter des tests sur différents
# versions de nœud
# Pour plus d'informations, voir :
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nom: Firebase CI
sur:
 pousser:
 branches: [ principales ]
 pull_request :
 succursales: [principales]
emplois:
 construire:
 s'exécute sur: ubuntu-latest
 stratégie:
 matrice:
 version-nœud: [14.x]

 pas:
 - utilisations: actions/checkout@v2
 - nom: utilisez Node.js ${{ matrix.node-version }}
 utilise: actions/setup-node@v1
 avec:
 version-noeud: ${{ matrix.node-version }}
 - exécuter: npm install -g npm
 - nom: npm install, build et test
 exécutez: |
 installation npm
 construction d'exécution npm
 - nom: Archive Build
 utilise: actions/upload-artifact@v2
 avec:
 nom: construire
 chemin: construire

 déployer:
 nom: Déployer
 besoins: construire
 s'exécute sur: ubuntu-latest
 pas:
 - utilisations: actions/checkout@v2
 - nom: Télécharger Build
 utilise: actions/download-artifact@v2
 avec:
 nom: construire
 chemin: construire
 - nom: Déployer sur Firebase
 utilise: w9jds/firebase-action@master
 avec:
 args: déployer --uniquement l'hébergement
 env :
 FIREBASE_TOKEN: ${{ secrets. FIREBASE_TOKEN }}

Voici quelques-unes des propriétés clés expliquées :

1. Sur: événements qui déclenchent les actions dans ce workflow.
2. Emplois: spécifie les travaux qu'une action particulière doit exécuter. Dans ce cas, il y a deux tâches: construire et déployer.
3. Fonctionne sur: la machine sur laquelle cette action doit s'exécuter.
4. Pas: définit une séquence d'étapes pour l'action à effectuer pour un travail particulier.
5. Avec: Spécifie tous les arguments requis par les actions à exécuter.
6. Nom: Nom d'une étape particulière pour un travail.

Enfin, validez les modifications apportées à ce fichier. GitHub déclenchera automatiquement ce flux de travail, en créant et en déployant l'application React sur le service d'hébergement de Firebase. Vous pouvez rechercher l'URL en direct de l'application dans les journaux de déploiement.

Déploiement d'applications à l'aide d'actions GitHub

GitHub Actions fournit une approche de déploiement simplifiée. Il garantit que vous pouvez déployer des applications de manière cohérente et fiable, quelle que soit la technologie dans laquelle vous les intégrez.

De plus, vous pouvez facilement personnaliser le flux de travail de déploiement en utilisant les outils de déploiement intégrés pour répondre à vos besoins spécifiques de pipeline CI/CD.