Déployez l'application angulaire à Firebase avec des actions GitHub

Cet ensemble d'instructions vous aide à configurer des actions GitHub pour construire un projet angulaire et vous déployer à l'hébergement Firebase sur l'événement Push. Même vous pouvez référer ce tutoriel pour créer n'importe quel nœud.Application JS et déploie sur Firebase.

Les actions GitHub vous permet d'automatiser, de personnaliser et d'exécuter vos workflows de développement logiciel dans votre référentiel. C'est le meilleur moyen de créer et de maintenir une vie en intégration / déploiement continu (CI / CD) pour votre application.

Nous supposons que vous avez déjà poussé votre application vers le référentiel GitHub. Commençons par la configuration des actions GitHub.

Étape 1 - Créer une action github

Connectez-vous à votre compte GitHub et accédez à votre référentiel. Dans votre référentiel, cliquez sur Actions Onglet, puis cliquez sur "Configurez un workflow vous-même" lien.

Voir la capture d'écran ci-dessous pour référence:

Étape 2 - Créer un workflow

Une fois que vous avez cliqué sur le lien SETP Workflow, cela modifiera un nouveau fichier ".github / workflows / Main.yml »sous le référentiel. Qui contient une configuration par défaut pour le workflow.

Vous verrez le fichier nouvellement mis en caisse, quelque chose comme ceci:

Jobs: # Ce flux de travail contient un seul travail appelé "build" build: # Le type de coureur que le travail s'exécutera sur Runs-On: Ubuntu-Latest # Les étapes représentent une séquence de tâches qui seront exécutées dans le cadre des étapes du travail : # Découvrez votre référentiel sous $ github_workspace, afin que votre travail puisse y accéder - Utilisations: Actions / [PROTÉRÉEMENT DE LA PROTÉRÉE] # Exécute une seule commande à l'aide du Shell Runners - Nom: Exécutez un script en ligne Run: Echo Hello, World! # Exécute un ensemble de commandes à l'aide du Shell Runners - Nom: Exécutez un script multi-ligne Run: | Echo Ajouter d'autres actions pour construire, faire écho à tester et déployer votre projet. 

Étape 3 - Personnalisez votre flux de travail

Maintenant, nous personnaliserons le fichier de configuration du flux de travail en fonction de nos exigences. Dans cette étape, nous avons décomposer la configuration étape par étape pour vous faire comprendre. Même vous pouvez ignorer cette étape, car le fichier de configuration complet est fourni dans les prochaines étapes.

1. Définir le nom du workflow - Ceci est une étape facultative, mais vous pouvez donner un nom à votre workflow.

   Nom: Deploy_to_fireBase_Hosting 

2. Personnaliser le nom du travail - Tous les emplois sont définis dans les sections «Emplois». Tout d'abord, nous modifions la construction du nom de travail defualt en Firebase-déploie. Vous pouvez changer cela en n'importe quel nom selon vous.

   Emplois: Firebase-déplore: 

3. Personnaliser le déclencheur - Le flux de travail par défaut se déclenche sur chaque poussée dans toutes les branches. Vous devrez peut-être limiter cela à des branches spécifiques.

   Par exemple, activez le déclencheur de flux de travail uniquement sur Push to Main ou Release / * Branches:

   sur: push: branches: - Main - release / * 

4. Mettre à jour l'action de paiement - Le workflow par défaut utilise des actions / [protégés par e-mail], qui est la dernière version. Donc, pas besoin d'apporter des modifications ici, mais vous pouvez toujours changer cela en actions les plus récentes / [Protégé par e-mail]

   - Utilisations: Actions / [Protégé par e-mail] 

5. Personnaliser le nœud.JS Build Trigger - Maintenant, définissez le nœud.Commandes de version et de construction JS pour votre application angulaire. Par exemple, nous utilisons le nœud.js 12.x version pour créer cette application.

   Étapes: - Utilisations: Actions / [Protégé par e-mail] - Utilisations: Actions / [Protégé par e-mail] avec: Version de nœud: '12.X '- Run: NPM Install - Exécuter: NPM Run build: prod 

6. Déployer sur Firebase - La dernière étape consiste à déployer votre application sur les fonctions de base de feu.

   Étapes: - Utilisations: Actions / [Protégé par e-mail] - Utilisations: Actions / [Protégé par e-mail] avec: Version de nœud: '12.X '- Run: NPM Install - Exécuter: NPM Run build: Prod - Use: W9JDS / [Email Protected] avec: Args: Deploy - Hébergement Env: Firebase_Token: $ secrets.Firebase_token 

   Selon la configuration ci-dessus, le déploiement sera effectué pour l'hébergement de base. Vous pouvez même modifier la valeur des args à «Déployer - Fonction«Pour déployer des fonctions Firbase.

Maintenant, cliquez sur Démarrer Commit sur le côté droit pour commettre votre nouveau workflow.

Étape 4 - Configuration du jeton Firebase

Les actions GitHub déploient le travail Besoin d'une Firebase_Token pour l'authentification pour déployer le code sur Firebase. Vous pouvez générer un jeton à l'aide d'outils CLI Firebase sur votre système.

Tout d'abord, installez les outils de base de feu à l'aide de NPM.

NPM I -g Firebase-Tools  

Ensuite, exécutez le Connexion de la base de feu: CI Commande sur le terminal:

Connexion de la base de feu: CI  

Cela vous montrera un lien sur votre terminal, ouvrez ce lien dans le navigateur Web et l'autorisation complète. Cela vous montrera un jeton à utiliser pour les tâches CI.

Exemple: Déploiement de Firebase --Token "\ $ firebase_token"

Car il n'est pas sûr de garder ce jeton dans le fichier de configuration. Ajoutez ce jeton aux secrets GitHub.

Dans votre référentiel GitHub, allez à Paramètres> Secrets> Nouveau secret de référentiel:

Utiliser Firebase_token comme nom et entrez le code secret dans valeur section. Puis cliquez sur le bouton Ajouter un secret.

Étape 5 - Configuration finale du workflow

Votre fichier de configuration de workflow final devrait ressembler à ceci dans l'éditeur de texte:

déposer: .github / workflow / Main.YML

Nom: DEPLOYS_TO_FIREBASE_HOSTING ON: PUSH: Branches: - Master - Release / * Jobs: Firebase-DepLoy: Runs-on: Ubuntu-Latest Étapes: - Utilisations: Actions / [Email Protected] - Utilisations: Actions / [Email Protected] avec: Version de nœud: '12.X '- Run: NPM Install - Exécuter: NPM Run build: Prod - Use: W9JDS / [Email Protected] avec: Args: Deploy - Hébergement Env: Firebase_Token: $ secrets.Firebase_token 

Vous pouvez maintenant commettre le fichier de configuration du flux de travail dans votre référentiel. Ce flux de travail est ajouté à .github / workflows / Main.YML. Vous pouvez changer Main.YML Fielname de votre choix avec .Extension YML.

Ensuite, allez-y et poussez quelques modifications à votre référentiel GitHub. Cela tirera l'action GitHub et effectuera les étapes définies dans le workflow.

Conclusion

Dans ce didacticiel, vous avez appris à construire un projet angulaire à l'aide d'actions GitHub et à déployer pour l'hébergement Firebase.

Vous pouvez également visiter la documentation des actions GitHub pour plus de détails.