Automatiser les déploiements angulaires de Firebase avec des actions GitHub

Dans cet article, nous allons apprendre à utiliser les actions GitHub d'Actions Marketplace pour automatiser le déploiement sur Firebase.

Dans notre dernier message icinous avons examiné comment déployer des applications angulaires sur Firebase. . Dans cet article, nous apprendrons comment automatiser ce processus, car des modifications sont apportées aux projets après le premier déploiement.

Qu'est-ce que GitHub Actions ?

GitHub Actions est l'outil d'intégration continue et de livraison continue construit et utilisé par GitHub. Il vous permet de créer, tester et déployer votre code directement depuis GitHub, en prenant en charge toute l'automatisation qui permet que cela se fasse en douceur sans aucun outil CI/CD tiers. Les possibilités que vous pouvez créer et automatiser à l'aide de cela sont infinies, et pour la facilité de travailler directement à partir de l'endroit où votre code est stocké, GitHub ne peut pas être comparé.

Pourquoi les actions GitHub sont-elles importantes ?

GitHub Actions offre un beaucoup d'avantages instantanés pour vous, le développeur. Le premier est la flexibilité de créer des workflows d'automatisation directement à partir de GitHub. Il s'agit d'un service à valeur ajoutée impressionnant qui s'ajoute à un service que vous utilisez déjà et que vous connaissez déjà. Vous configurez des actions au même endroit que vous configurez des relations publiques, n'est-ce pas cool ?

La ​​prochaine chose qui vous enthousiasmera est que GitHub Actions est gratuit, pour toujours, pour tout projet public que vous avez sur GitHub. Il prend également en charge Docker et vous pouvez exécuter des actions dans différentes machines virtuelles à l'intérieur de l'infrastructure GitHub. vous pouvez créer une automatisation personnalisée et la partager avec votre communauté.

Avant de commencer

N'oubliez pas de consulter le premier article sur Déploiement sur Firebase icicar cet article s'appuie sur cette connaissance du déploiement .

Vous avez également besoin de :

• Code VS pour votre environnement de développement intégré
• Node version 11.0 installé sur votre machine
• Node Package Manager version 6.7 (il est généralement livré avec l'installation de Node)
• Angular CLI version 8.0 ou supérieure
• Angular version 11 ou ultérieure
• Pour télécharger le projet de modèle de démarrage ici

Introducing GitHub Marketplace

"GitHub Marketplace est un nouvelle façon t o découvrir et acheter des outils qui étendent votre flux de travail. Trouvez des applications à utiliser tout au long de votre processus de développement, de l'intégration continue à la gestion de projet et à la revue de code. — Blog GitHub

Les entreprises proposant d'excellents produits comme Google avec Firebase ont déjà des actions d'automatisation hébergées sur GitHub dont vous pouvez profiter pour organiser votre flux de travail. Toute personne ou toute équipe disposant d'un produit peut également utiliser les documents de la place de marché et obtenir leurs actions sur la place de marché. De nombreuses personnes le font déjà, et cela me rappelle la place de marché des extensions de code VS.

Naviguer sur la place de marché[19659010]Le marché dispose d'une fonction de recherche étendue et de catégories intéressantes où vous pouvez explorer et trouver d'autres moyens d'automatiser votre flux de travail.

GitHub Action for Firebase est l'action nous utiliserons pour automatiser notre flux de travail de construction et de déploiement. Dans ce post ici nous avons appris comment déployer nos applications Angular à l'aide de l'hébergement Firebase. Nous automatiserons ce processus dans cet article avec les actions GitHub.

Le flux initial

Si vous avez commencé cet article depuis le début, vous auriez téléchargé le modèle de démarrage. Si ce n'est pas le cas, veuillez le télécharger ici.

Ouvrez maintenant le tableau de bord Firebase ici et connectez-vous avec vos informations d'identification Google. Cliquez ensuite sur « Ajouter un projet » et suivez le processus de création d'un nouveau projet.

Fournissez d'abord le nom du projet, dans notre case nghost, puis cliquez sur "Suivant". Vous serez invité à choisir si vous souhaitez utiliser Analytics, que vous pouvez désactiver, car nous n'avons pas besoin d'Analytics pour ce didacticiel.

Cliquez ensuite sur « Terminer » pour générer votre nouveau projet appelé nghost.

Dans votre code VS, ouvrez le dossier que vous avez téléchargé précédemment et exécutez ces commandes ci-dessous :

npm install
ng build --prod

Cela crée le dossier dist avec les fichiers générés à télécharger. Maintenant, pour connecter notre projet à Firebase, vous devez installer les outils Firebase, puis confirmer votre identité pour pouvoir accéder au projet que vous avez créé à partir de la CLI dans VS Code.

npm install -g firebase-tools
connexion à la base de feu

La connexion ouvrira un service d'authentification dans votre navigateur, et une fois que vous aurez terminé, vous verrez un message de réussite.

Ensuite, vous pouvez déployer l'application avec cette commande :

firebase init

Cela vous montre une série d'invites et vous pouvez répondre en fonction de vos besoins.

Déploiement

La première invite vous demande quel service vous souhaitez utiliser. Nous choisirons l'option d'hébergement.

 ?** Hébergement : configurez les fichiers pour l'hébergement Firebase et (éventuellement) configurez les déploiements d'action GitHub**

Le suivant vous demande si vous avez déjà créé un projet sur Firebase.

 ? Veuillez sélectionner une option : Utiliser un projet existant
? Sélectionnez un projet Firebase par défaut pour ce répertoire : nghost-68106 (nghost)
i Utilisation du projet nghost-68106 (nghost)

Choisissez « Oui » et sélectionnez nghost (ou le nom que vous avez donné à votre propre projet).

Les dernières questions concernent les détails du déploiement.

 ? Que voulez-vous utiliser comme répertoire public ? dist/kendo-angular-semence
? Configurer en tant qu'application d'une seule page (réécrire toutes les URL dans /index.html) ? Oui
? Configurer des builds et des déploiements automatiques avec GitHub ? Non
? Le fichier dist/kendo-angular-seed/index.html existe déjà. Écraser? Non

Après avoir appuyé sur Entrée, vous devriez voir un message de réussite avec un lien que vous pouvez visiter pour voir l'application en direct.

✔ Déploiement terminé !
Console de projet : [https://console.firebase.google.com/project/nghost-68106/overview](https://console.firebase.google.com/project/nghost-68106/overview)
URL d'hébergement : [https://nghost-68106.web.app] (https://nghost-68106.web.app)

Maintenant, l'application est en ligne. Automatisons ce processus afin de ne pas avoir à le répéter à chaque nouvelle modification du projet.

Continuité

La première chose à faire est de créer un référentiel GitHub et de pousser le projet vers celui-ci—actions ne fonctionne qu'avec des projets hébergés sur GitHub. Vous pouvez voir un guide étape par étape pour le faire ici.

Retour à VS Code, dans le dossier racine, créez un nouveau répertoire appelé .github. À l'intérieur, créez un dossier de workflows, puis un fichier main.yml.

Ouvrez votre terminal et exécutez cette commande ci-dessous pour récupérer votre jeton Firebase :

 connexion firebase:ci

Ceci vous demandera vos informations d'authentification Google. Une fois qu'il a confirmé qu'il s'agit bien de vous, vous verrez une invite de réussite et à l'intérieur du terminal, vous verrez votre jeton. Gardez-le en sécurité.

Dans le fichier main.yml, copiez le bloc de code ci-dessous dedans :

nom : Build and Deploy
au:
  pousser:
    branches:
      - Maître
travaux:
  construire:
    nom : Construire
    run-on: ubuntu-latest
    pas:
      - nom : Checkout Repo
        utilise : actions/checkout@master
      - nom : installer les dépendances
        exécuter : npm installer
      - nom : Construire
        run: npm run build --prod
      - nom : Artefact de production d'archives
        utilise : actions/upload-artifact@master
        avec:
          nom : dist
          chemin : dist
  déployer:
    nom : Déployer
    besoins : construire
    run-on: ubuntu-latest
    pas:
      - nom : Checkout Repo
        utilise : actions/checkout@master
      - nom : Télécharger l'artefact
        utilise : actions/download-artifact@master
        avec:
          nom : dist
          chemin : dist
      - nom : Déployer sur Firebase
        utilise : w9jds/firebase-action@master
        avec:
          args : déployer --seulement l'hébergement
        env :
          FIREBASE_TOKEN : * SUPPRIMER CECI ET METTRE VOTRE TOKEN ICI*

En gros, cela reproduit toutes les étapes que nous avons suivies, de l'installation des dépendances à la création pour la production et enfin à la diffusion vers Firebase Hosting à chaque fois qu'il y a une poussée vers la branche principale. Nous avons un article d'introduction sur les actions qui explique chaque étape. Vérifiez-le ici.

Après avoir enregistré le fichier, validez et transférez les modifications vers GitHub.

Maintenant , chaque fois que vous transmettez de nouvelles modifications à master, votre application est déployée automatiquement sans votre intervention. Et s'il y a un problème, vous serez alerté par GitHub comme vous le feriez pour tout dépôt que vous avez.

Conclusion

Dans cet article, nous avons découvert les actions GitHub et le marché où nous pouvons créer des actions et les héberger pour les autres à utiliser. Nous avons vu comment utiliser les actions directement depuis la place de marché et faciliter la vie de nos développeurs.