Exercice - Pousser une modification via le pipeline

14 minutes

Dans cette partie, vous voyez vos emplacements de déploiement en action. Dans la page d’accueil du site web, vous changez la couleur d’arrière-plan et le texte de la bannière. Poussez ensuite vos changements vers GitHub, observez l’exécution du pipeline et vérifiez le résultat.

Pour aller plus loin dans la pratique du processus, annulez les changements, puis observez l’exécution de pipeline dans le cadre d’une restauration par progression.

Changer le texte de la bannière

Ici, vous changez le texte de la bannière. Plus tard, vous verrez ce changement quand vous effectuerez le déploiement sur App Service.

Dans Visual Studio Code, dans le répertoire Tailspin.SpaceGame.Web/Views/Home, ouvrez Index.cshtml.
Recherchez ce texte en haut de la page :
```
<p>An example site for learning</p>
```
Conseil

Visual Studio Code permet de rechercher du texte dans des fichiers. Pour accéder au volet de recherche, sélectionnez l’icône en forme de loupe dans le volet latéral.
Remplacez l’exemple de texte par le texte suivant, puis enregistrez le fichier.
```
<p>Welcome to the official Space Game site!</p>
```

Changer la couleur d’arrière-plan

Ici, vous changez la couleur d’arrière-plan de la bannière en remplaçant le gris par du vert.

Dans Visual Studio Code, dans le répertoire Tailspin.SpaceGame.Web/wwwroot/css, ouvrez site.scss.

Important

Ouvrez site.scss et non site.css. La phase de génération exécute node-sass pour convertir site.scss (fichier Sass) en site.css (fichier CSS standard).

Recherchez le code suivant en haut du fichier :

.intro {
  height: 350px;
  background-color: #666;
  background-image: url('/images/space-background.svg');
  background-size: 1440px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

Dans le code, remplacez le texte en surbrillance comme indiqué dans l’exemple suivant. Puis enregistrez le fichier.

.intro {
  height: 350px;
  background-color: green;
  background-image: url('/images/space-background.svg');
  background-size: 1440px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;

Pousser le changement via le pipeline

Normalement, vous générez et exécutez le site localement pour vérifier l’application du changement. Vous pouvez également exécuter les tests unitaires associés pour vérifier que le changement n’impacte pas les fonctionnalités existantes.

Par souci de concision, commitez ici les changements apportés à la branche, poussez-la vers GitHub, puis regardez le pipeline s’exécuter.

Ajoutez Index.cshtml et site.scss à l’index, commitez les changements, puis poussez-les vers GitHub.

git add Tailspin.SpaceGame.Web/Views/Home/Index.cshtml Tailspin.SpaceGame.Web/wwwroot/css/site.scss
git commit -m "Change text and colors on the home page"
git push origin blue-green

Dans Azure Pipelines, suivez la build tout au long de chaque étape.
Accédez à l’URL qui correspond à l’emplacement production de l’environnement Préproduction. Il s’agit de l’emplacement par défaut que vous avez configuré en même temps que le pipeline.

Vous voyez que le site web déployé affiche les changements de couleur et de texte.
Accédez à l’URL qui correspond à l’emplacement swap de l’environnement Préproduction. L’URL comprend « -swap.azurewebsites.net » dans son nom.

Vous voyez la version précédente du site web, sans les changements de couleur et de texte.

Vous ne voyez aucun changement, car vous avez échangé l’emplacement production et l’emplacement swap. En d’autres termes, ici, vous effectuez toujours un déploiement sur l’emplacement swap, puis vous échangez l’emplacement production et l’emplacement swap. Le processus d’échange vérifie que l’emplacement production pointe vers le déploiement le plus récent.

Annulez la modification

Supposons que vous avez déployé un changement que vous souhaitez restaurer. À ce stade, vous pouvez restaurer le changement en échangeant à nouveau l’emplacement production et l’emplacement swap. Par exemple, vous pouvez échanger les emplacements manuellement via le portail Azure. Sinon, au lieu d’annuler les changements, vous pouvez effectuer une restauration par progression en poussant un autre changement à travers le pipeline.

C’est ce que vous allez faire ici. Vous allez restaurer les derniers changements apportés au code et pousser un autre changement via le pipeline. Pour cela, utilisez la commande git revert.

Dans Git, vous supprimez rarement les commits de l’historique d’un fichier. Contrairement à l’opération « annuler » dans un éditeur de texte, la commande git revert crée un commit qui est l’opposé de l’ensemble de commits spécifié. Pour voir les commits, exécutez d’abord la commande git log afin de suivre l’historique des commits pendant le processus de restauration.

Dans le terminal, exécutez la commande git log suivante pour voir l’historique des commits.
```
git --no-pager log --oneline
```
La sortie ressemble à l’exemple de code suivant. Dans votre sortie, vous verrez des commits supplémentaires et différents ID de commit.
```
d6130b0 (HEAD -> blue-green, origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline
```
Dans la sortie, tracez l’historique des commits. Le dernier commit est en haut.
Exécutez la commande git revert suivante pour restaurer un seul commit.
```
git revert --no-edit HEAD
```
Considérez HEAD comme l’état actuel de votre branche. HEAD fait référence au dernier commit. Cette commande indique de restaurer uniquement le commit HEAD, à savoir le dernier commit.

Réexécutez git log pour voir la mise à jour de l’historique des commits.

git --no-pager log --oneline

En haut de la sortie, vous pouvez voir un commit supplémentaire qui restaure le commit précédent. Voici un exemple :

e58896a (HEAD -> blue-green) Revert "Change text and colors on the home page"
d6130b0 (origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline

Pousser le changement restauré via le pipeline

Ici, poussez le changement restauré via le pipeline, et observez les résultats.

Exécutez la commande git push suivante pour charger la branche blue-green vers votre dépôt GitHub.
```
git push origin blue-green
```
Dans Azure Pipelines, accédez à la build. Suivez l’exécution de la build.
Accédez aux URL qui correspondent à l’emplacement swap et à l’emplacement production pour l’environnement Préproduction.

L’emplacement production pointe désormais vers le changement restauré, qui correspond au site web d’origine.

L’emplacement swap pointe désormais vers le changement précédent.

Beau travail ! L’équipe dispose désormais d’un moyen d’automatiser les mises en production. Elle peut offrir de nouvelles fonctionnalités à ses utilisateurs sans entraîner de temps d’arrêt.

Réunion d’équipe

L’équipe se réunit pour faire une démonstration du pipeline. Cette fois-ci, Tim pousse un changement via le pipeline pendant que tout le monde regarde. Mais tous ne sont pas convaincus.

Andy : C’est formidable de voir les emplacements de déploiement en action. Mais je ne comprends pas. Comment pouvons-nous bénéficier des déploiements sans temps d’arrêt ici ? La phase Préproduction est réservée à notre équipe et à notre direction.

Tim : En effet, nous ne voyons pas de réel avantage pour le moment. Mais imaginez ce qui va se passer quand nous allons appliquer des déploiements bleu-vert à une phase Production. Nous aurons toujours besoin de l’approbation manuelle de la direction pour pouvoir passer à la phase Production. Toutefois, quand nous mettrons en production les nouvelles fonctionnalités, le processus d’échange rendra le lancement presque instantané. Ce sera transparent pour les utilisateurs.

Andy : OK, je crois que je comprends maintenant. J’aime cette amélioration. Le système des emplacements de déploiement a été facile à configurer. Il va profiter aux utilisateurs. Tout le monde y gagne.

Amita : À propos d’améliorations, pourquoi ne pas revoir l’exercice de cartographie de chaîne de valeur que nous avons effectué il y a quelques semaines ? Je parie que nous verrons une progression de la rapidité avec laquelle nous pouvons mettre en production de nouvelles fonctionnalités.

Mara : Parfait, mettons cela à l’ordre du jour de notre prochaine réunion d’équipe.

Continuer