Fermer

juillet 9, 2019

Comment utiliser Git Branches & Buddy pour organiser le code de projet –


Cet article a été créé en partenariat avec Buddy . Merci de soutenir les partenaires qui rendent SitePoint possible.

Dans cet article, vous allez apprendre à configurer des pipelines d'intégration / de déploiement continus pour votre flux de production de branche. Nous allons utiliser les services Buddy CI / CD pour configurer les pipelines. Nous allons utiliser un projet JavaScript de base dans lequel nous allons configurer deux branches de développement. Je vais vous montrer comment automatiser les tests sur chaque type de branche. Je vais également présenter le concept de flux de travail en branches et donner quelques exemples que vous pouvez adopter dans vos projets.

Conditions préalables

Pour suivre ce didacticiel, vous n'avez besoin que des compétences de base de Node.js. Vous devez également connaître Git. Voici quelques articles pour vous aider:

Afin de configurer nos pipelines, nous devrons écrire quelques tests en utilisant Jest . Vous n’êtes pas obligé d’apprendre à Jest si vous débutez, l’objet de cet article est d’apprendre à configurer des pipelines qui sélectionnent automatiquement de nouvelles branches et les construisent à votre place. Avant d’y arriver, nous devrions examiner diverses stratégies de branche que nous pouvons utiliser.

Stratégie de branche zéro

 01-basic-git-workflow

La stratégie de branche zéro (Zero Branch) est simplement une manière élégante de dire «vous n'utilisez aucune stratégie de branche». C'est également connu sous le nom de flux de travail de base . Vous ne disposez que d'une branche master sur laquelle vous commettez et construisez directement vos versions. Cette stratégie est pratique et bonne si le projet est:

  • Petit et simple
  • Ne nécessite que très peu de mises à jour
  • Géré par un développeur solo

Ces projets comprennent des tutoriels, des démonstrations, des prototypes, des modèles de projet de démarrage et des projets personnels. Cependant, cette approche présente plusieurs inconvénients:

  • Plusieurs conflits de fusion se produiront probablement si plusieurs personnes travaillent sur le projet.
  • Vous ne pourrez pas développer plusieurs fonctionnalités ni résoudre simultanément des problèmes
  • . La restauration des fonctionnalités sera une tâche difficile
  • Votre équipe passera trop de temps à traiter les problèmes de contrôle de version au lieu de travailler sur de nouvelles fonctionnalités

Tous ces problèmes peuvent être résolus en adoptant une stratégie de branche. Cela devrait vous donner:

  • Capacité à travailler de manière indépendante et à appliquer des modifications au référentiel partagé sans affecter les membres de votre équipe
  • Possibilité de fusionner le code de vos coéquipiers avec vos modifications et à résoudre rapidement les conflits éventuels
  • les normes de code sont maintenues et les efforts de collaboration se déroulent sans problème, quelle que soit la taille de votre équipe

Notez qu'il existe de nombreux types de flux de travail de branche que vous êtes libre de choisir. Vous pouvez également créer votre propre flux de travail de branche personnalisé qui vous convient le mieux. Commençons par la stratégie de branche la plus simple.

Stratégie de développement de branche

 02-workflow de branche de développement

Dans cette stratégie, vous avez créé une branche de longue durée appelée . qui longe la branche master . Tous les travaux sont d'abord engagés dans la branche develop . C'est un endroit sûr où vous pouvez introduire un nouveau code qui pourrait casser votre projet. Vous aurez besoin d'une stratégie de test afin de ne pas introduire de bogues dans la branche master lorsque vous fusionnez les modifications.

Avantages de ce flux de travail sont:

  • Simple à mettre en œuvre
  • La branche master reste stable et en bonne santé aussi longtemps que des travaux expérimentaux sont effectués sur la branche develop
  • Un correctif peut être implémenté à n'importe quel moment sur la branche master alors qu'une fonctionnalité est actuellement mise en œuvre

Les inconvénients de ce flux de travail sont les suivants:

  • Plusieurs fonctionnalités ne peuvent pas être développées simultanément
  • Un seul développeur (deux au maximum) peut travailler activement sur le projet
  • Supprimer et restaurer des fonctionnalités à l'aide de la seule branche develop est un défi

Voyons maintenant un autre flux de travail susceptible d'atténuer ces défis.

Stratégie relative à la branche principale

 Flux de travaux 03-branche-branche

Dans cette flux de travail, vous configurez une nouvelle branche chaque fois que vous souhaitez développer une nouvelle fonctionnalité. Vous pouvez appliquer un correctif à tout moment sur la branche master en cas de problème. Les développeurs devront intégrer les derniers correctifs de la branche master avant de pouvoir fusionner leur branche dans master.

Vous aurez besoin d'une convention de nommage pour vos branches pour suivre les fonctionnalités et les corrections de bugs en cours de développement. Voici quelques suggestions de format que vous pouvez trouver sur Internet:

  • utilisateurs / nom d'utilisateur / description
  • utilisateurs / nom d'utilisateur / workitem
  • bugfix / description
  • feature / feature-name
  • feature / feature-area / nom-fonctionnalité
  • fonctionnalités / id 'id' est généré par un outil de gestion de projet)
  • correctif / description

Cette stratégie présente les avantages de:

  • Vous pouvez avoir un grand nombre de développeurs travaillant sur plusieurs fonctionnalités de votre projet. simultanément
  • Il est facile de supprimer des fonctionnalités et de les restaurer ultérieurement si vous changez d'avis
  • Vous pouvez facilement suivre le travail de chaque développeur

Les inconvénients de cette stratégie sont les suivants:

  • Le développement simultané de fonctionnalités n'est pas toujours efficace. faisable dans des situations où la mise en œuvre d’une fonctionnalité dépend d’une autre fonctionnalité à développer. Cela signifie que les fonctions ne peuvent pas être transférées au maître tant que toutes les fonctions dépendantes ne sont pas complètes

Voyons la stratégie suivante et voyons comment nous pouvons atténuer ce problème.

Stratégie de branche Gitflow

 04- gitflow

Si vous pouvez combiner les flux de travail de branche "Développer" et "Entité", vous obtenez une solution qui annule les inconvénients de chacun. Vincent Driessen a écrit un article de blog dans lequel il décrit un modèle avancé de branchement git qui aide les grandes équipes à collaborer efficacement sur des projets complexes avec des problèmes de contrôle de version minimaux.

Gitflow est un modèle personnalisable qui vous permet de choisir les fonctionnalités. cela fonctionnera mieux pour votre projet et votre équipe. Si vous utilisez Gitflow, vous pouvez adopter les extensions de git de Daniel Kummer git-flow . Ce sont des outils qui permettent aux développeurs d’exécuter des opérations de référentiel de haut niveau basées sur le modèle de Vincent. Je n'entrerai pas beaucoup dans les détails, mais voici ce que vous devez savoir.

Pour:

  • Convient aux grandes équipes travaillant sur un projet complexe
  • Facilité à suivre les fonctionnalités actives et à organiser les mises à jour

.

  • Excès de compétences pour les petits projets

Voyons maintenant comment automatiser les tâches de nos succursales à l'aide des services Buddy CI.

Pipelines modèles de branche

Nous devons d'abord configurer un projet simple, puis l'utiliser. mettre en place nos pipelines. Nous créerons des pipelines qui extrairont uniquement les modifications et exécuteront des tests. Commencez par créer un nouveau référentiel GitHub. Appelez-le copain-demo .

 05-Create-Project

Ensuite, téléchargez le projet de démarrage suivant et envoyez-le à votre référentiel:

 $ git clone git@github.com: brandiqa / react-parcel-starter.git buddy-demo
$ git remote rm origin
# Remplacez `username` par le vôtre
$ git remote ajouter l'origine git@github.com: nom d'utilisateur / buddy-demo.git
$ git config master.remote origin
$ git config master.merge refs / heads / master
$ git push -u origine master

Il s’agit d’un projet de base de React construit à partir de Parcel . Vous pouvez exécuter les commandes suivantes pour garantir son exécution:

 $ npm install
$ npm start

Si vous utilisez le code Visual Studio, appuyez sur F5 pour lancer le navigateur. Sinon, ouvrez une page de navigateur et accédez à localhost: 1234 .

 06-React-Parcel-Starter

Comme vous pouvez le constater, rien n’est fantastique. Avant de pouvoir le déployer sur notre Buddy CI, nous devons écrire un test. Nous allons utiliser Jest Testing Framework pour cela:

 $ npm install -D jest

Mettez à jour la section de script package.json pour qu'elle exécute jest lorsque la commande npm test est exécutée.

  "scripts": {
   // ...
    "test": "plaisanterie"
  },

Mettons à jour src App.jsx un peu:

Kit de départ pour colis React

Cette page est sur la branche principale!

Maintenant, écrivons un faux test qui passe. Créez le fichier App.test.js et insérez le code suivant:

 test ("Fake Test 1", () => {
  attendez (vrai) .toBeTruthy ();
});

Exécutez la commande npm test pour confirmer que notre test est réussi.

 07-Run-Fake-Test

Commettez vos modifications et transmettez-les à votre GitHub. repo. Nous allons ensuite configurer notre pipeline CI à Buddy . Si vous êtes nouveau sur la plate-forme, il vous suffit de créer un compte gratuit en utilisant votre compte GitHub. Notez que Buddy prend en charge un certain nombre de services de référentiels distants autres que GitHub:

Quel que soit le fournisseur de service que vous sélectionniez, Buddy répertoriera les référentiels pour lesquels vous pouvez configurer l’automatisation. Dans notre cas, nous choisirons le projet buddy-demo . Cliquez sur le bouton Ajouter un nouveau pipeline puis remplissez la page suivante avec les détails suivants:

  • Nom – Maître
  • Mode déclencheur – À la demande
  • Succursale – Succursale: maître

 pipeline-configuration.png "width =" 1544 "height =" 820 "class =" aligneur de taille saturée wp-image-172820

Dans notre pipeline principal, nous allons définir les actions suivantes:

  • Exécution des tests
  • Application Bundling
  • Déploiement sur un serveur Web

La page suivante décrit différentes méthodes. de définir une action. Choisissez Node.js et, sur la page suivante, assurez-vous que les commandes suivantes ont été spécifiées:

 npm install
test npm

 add-nodejs "width =" 1640 "height =" 1485 "class =" aligneur complet, taille-complète wp-image-172821

Vous pouvez renommer le nom de l'action en "Exécuter les tests" sur l'onglet Action . J'aimerais souligner que si vos tests nécessitent un service de base de données, vous pouvez en configurer un via l'onglet Services :

 10-Attach-Database-Test-Service [19659005] Les bases de données les plus populaires sont déjà prises en charge. Sélectionnez simplement un type de base de données et indiquez les informations de connexion et les informations d'identification. Cliquez sur le bouton Ajouter cette action lorsque vous avez terminé. Sur la page suivante, cliquez sur le bouton plus en bas pour ajouter l'action «Assembler les actifs». Sélectionnez à nouveau Node.js et entrez la commande suivante à la page suivante:

 npm run build

Renommez l'action en Bundle Assets dans l'onglet Action . Cliquez sur Ajouter cette action lorsque vous avez terminé. Cliquez à nouveau sur le symbole plus pour ajouter l'action «Déployer en production». Buddy prend en charge, de manière native, le déploiement de projets auprès de différents types de fournisseurs d’hébergement:

 deployment-actions "width =" 1700 "height =" 2244 "class =" aligncenter à la taille wp-image-172822

N'hésitez pas à utiliser l'une des options de déploiement si vous avez un compte avec l'un de ces services. Si ce n’est pas le cas, choisissez un fournisseur qui vous permet de configurer un compte gratuit pour déployer votre application. Dans mon cas, j'ai déjà un compte de forfait d'hébergement Web que je peux utiliser. Normalement, vous aurez votre site Web principal, www.domainname.com pour héberger votre version de production en direct de votre projet.

Vous aurez besoin d'un site de mise en scène distinct (généralement caché du public) qui est déployé à partir de votre pipeline de branchement d'intégration de développement ou . Le site intermédiaire peut simplement être un sous-domaine qui ne devrait pas être indexable par les moteurs de recherche. Le site intermédiaire permettra aux développeurs, aux chefs de projet et aux bêta-testeurs de confirmer le bon fonctionnement des nouvelles fonctionnalités avant de les transférer sur le site de production en direct.

Pour déployer votre application sur un serveur d'hébergement Web partagé ou dédié (avec CPanel), utilisez simplement la méthode FTP. Buddy fournit également une méthode sFTP qui chiffrera l’ensemble des ressources de votre projet lors du téléchargement sur votre serveur. Voici un exemple de configuration du mien:

 ftp-details "width =" 1629 "height =" 1755 "class =" aligncenter à la taille wp-image-172823 ]

Vous devez configurer un nouveau compte FTP à l'aide de votre CPanel. Assurez-vous que le répertoire personnel de votre nouveau compte d'utilisateur FTP pointe directement vers le dossier www ou du sous-domaine . Sinon, vous ne pourrez peut-être pas accéder au bon répertoire d’hébergement via FTP. Une fois que vous avez configuré les trois actions de votre pipeline, vous pouvez:

  • Exécuter votre pipeline manuellement
  • Transférer le nouveau code dans votre dépôt distant et Buddy l’exécutera automatiquement pour vous

Une fois que vous avez terminé, cela est à quoi devrait ressembler le pipeline complet:

 Full-Pipeline "width =" 1205 "height =" 823 "class =" aligncenter taille-complet wp-image-172824

En supposant que vous utilisez Dans le flux de production Gitflow ou quelque chose de similaire, vous aurez probablement besoin de configurer des pipelines supplémentaires pour:

  • branche Développer / Intégration
  • . être identique au pipeline de branche master . Vous devrez fournir une configuration différente pour le déploiement, de sorte que le code soit déployé sur un site intermédiaire. Les pipelines de branche Feature et Hotfix devront uniquement avoir au moins l'action testing configurée. Vous voudrez probablement limiter le nombre de tests que vous pouvez exécuter dans le pipeline de branche Feature. Vous pouvez le faire facilement dans Jest en ajoutant simplement ceci à la commande de test: jest --coverage --changedSince = master . Ceci testera uniquement le nouveau code qui n'a pas encore été inséré dans la branche master .

    Puisqu'il y aura plusieurs branches feature et hotfix vous pouvez se demander comment on peut mettre en place un pipeline pour une telle situation. Simple – utilisez simplement l'option générique:

     pipeline-settings-wildcard "width =" 1613 "height =" 1110 "class =" aligncenter size-complet wp-image-172825

    Pour confirmer que votre pipeline développe / * (19459016) / hotfix * fonctionne, créez simplement la branche sur votre ordinateur. Créons une branche aléatoire dans ce cas:

     git checkout -b feature / task-1
    

    Créez ensuite un nouveau test dans le test App.test.js :

     ("Fake Test 2 for Fake Feature", () => {
      attendez (vrai) .toBeTruthy ();
    });
    

    Ensuite, validez les modifications et placez la branche dans votre dépôt GitHub:

     $ git add.
    $ git commit -m "Ajout de la première branche de fonctionnalité"
    $ git push -u origine fonctionnalité / tâche-1
    [feature/task-1 049bef2] Ajout de la première branche de fonctionnalité
     1 fichier modifié, 4 insertions (+)
    

    Si vous basculez rapidement vers le tableau de bord de votre compte Buddy, votre pipeline devrait afficher votre nouvelle branche et exécuter les actions que vous avez définies. C'est ainsi que nous avons mis en place des pipelines pour tout flux de travaux de stratégie de branche que vous avez adopté pour votre projet.

    Résumé

    Pour finir, si vous prévoyez de créer des branches à longue durée de vie, il est judicieux de les configurer. votre repo partagé en premier. Ainsi, lorsque vous commencez à créer de nouveaux pipelines, vous pouvez simplement utiliser l'option Sélectionner une branche pour sélectionner votre branche longue vie.

    Nous en sommes maintenant à la fin du didacticiel. En tant que défi, allez-y et installez des pipelines pour les correctifs et se développer . Créez des branches et écrivez des tests qui échouent pour voir ce qui se passe. Vous pouvez également aller plus loin et rechercher plus de renseignements sur les stratégies de branchement Git. Si vous le souhaitez, vous pouvez même installer git-flow et personnaliser votre flux de travail de création de branches à l'aide de l'outil. Ensuite, configurez votre pipeline Buddy pour prendre en charge votre flux de travail de création de branches git personnalisé.




Source link