Oefening: een wijziging doorvoeren via de pijplijn

Voltooid

In dit deel ziet u uw implementatie-slots in actie. Op de startpagina van de website wijzigt u de achtergrondkleur en de tekst op de hero-banner. Vervolgens pusht u uw wijzigingen naar GitHub, bekijkt u de pijplijnuitvoering en controleert u de wijzigingen.

Als u het proces verder wilt oefenen, gaat u de wijzigingen terug en bekijkt u hoe de pijplijn wordt uitgevoerd als een manier om vooruit te rollen.

De tekst op de hero-banner wijzigen

Hier wijzigt u de tekst op de hero-banner. Later ziet u de wijziging wanneer u implementeert in App Service.

1. Open in Visual Studio Code in de map Tailspin.SpaceGame.Web/Views/HomeIndex.cshtml.

2. Zoek naar deze tekst boven aan de pagina:

   <p>An example site for learning</p>
   

   Tip

   Visual Studio Code biedt een manier om te zoeken naar tekst in bestanden. Als u het zoekvenster wilt openen, selecteert u het vergrootglaspictogram in het zijvenster.

3. Vervang de voorbeeldtekst door de volgende tekst en sla het bestand op.

   <p>Welcome to the official Space Game site!</p>
   

De achtergrondkleur wijzigen

Hier wijzigt u de achtergrondkleur van de hero-banner van grijs in groen.

1. Open in Visual Studio Code de map Tailspin.SpaceGame.Web/wwwroot/css en vervolgens site.scss.

   Belangrijk

   Open site.scss, niet site.css. In de fase Build wordt node-sass uitgevoerd om site.scss (een Sasss-bestand) te converteren naar site.css (een standaard CSS-bestand).

2. Zoek de volgende code boven aan het bestand:

   .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;
   

3. Vervang in de code de gemarkeerde tekst, zoals wordt weergegeven in het volgende voorbeeld. Sla het bestand vervolgens op.

   .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;
   

De wijziging door de pijplijn pushen

Normaal gesproken bouwt en voert u de site lokaal uit om de wijziging te controleren. U kunt ook eventuele bijbehorende eenheidstests uitvoeren om te controleren of uw wijziging de bestaande functionaliteit niet onderbreekt.

Ter beknoptheid voert u hier de wijzigingen door in uw vertakking, pusht u uw vertakking naar GitHub en bekijkt u hoe de pijplijn wordt uitgevoerd.

1. Voeg Index.cshtml en site.scss toe aan de index, voer de wijzigingen door en push de wijzigingen vervolgens naar 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
   

2. Traceer in Azure Pipelines de build door elke stap.

3. Ga naar de URL die overeenkomt met de productie slot voor uw Staging-omgeving. Dit slot is het standaardslot dat u hebt geconfigureerd toen u eerder de pijplijn instelde.

   U ziet dat op de geïmplementeerde website de kleur en tekstwijzigingen worden weergegeven.

   

4. Ga naar de URL die overeenkomt met de swappen slot in uw staging--omgeving. De URL bevat '-swap.azurewebsites.net' in de naam.

   U ziet de vorige versie van de website, zonder de kleur en tekst te wijzigen.

   

   U ziet geen wijzigingen omdat u de productieslot en de wisselslot hebt gewisseld. Met andere woorden, hier implementeert u altijd naar de wisselslot, en vervolgens wisselt u het productieslot en wisselslot. Het wisselproces zorgt ervoor dat de productie- sleuf verwijst naar de recentere implementatie.

De wijziging herstellen

Stel dat u een wijziging hebt geïmplementeerd die u wilt terugdraaien. Op dit moment kunt u de wijziging terugdraaien door het productieslot te verwisselen en het slot opnieuw met te wisselen. U kunt de slots bijvoorbeeld handmatig wisselen via de Azure Portal. Of in plaats van de wijzigingen terug te draaien, kunt u vooruitrollen door een andere wijziging door de pijplijn te pushen.

Dat doe je hier. U keert de meest recente codewijzigingen terug en pusht een andere wijziging via de pijplijn. Hiervoor gebruikt u de opdracht git revert.

In Git verwijdert u zelden doorvoeringen uit de geschiedenis van een bestand. In tegenstelling tot de bewerking "ongedaan maken" in een teksteditor, creëert het git revert-commando een nieuwe commit die in feite het tegenovergestelde is van de opgegeven set commits. Om de commits te bekijken, voert u eerst de git log-opdracht uit om uw commitgeschiedenis te traceren tijdens het revert proces.

1. Voer in de terminal de volgende git log opdracht uit om uw doorvoergeschiedenis weer te geven.

   git --no-pager log --oneline
   

   Uw uitvoer lijkt op het volgende codevoorbeeld. In de uitvoer ziet u extra commits en verschillende commit-ID's.

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

   Traceer in de uitvoer de doorvoergeschiedenis. De meest recente doorvoering staat bovenaan.

2. Voer de volgende git revert-opdracht uit om één commit terug te draaien.

   git revert --no-edit HEAD
   

   U kunt HEAD beschouwen als de huidige status van uw tak. HEAD verwijst naar de meest recente commit. Met deze opdracht wordt opgegeven om alleen de HEAD of de meest recente commit terug te zetten.

3. Voer git log opnieuw uit om de bijgewerkte doorvoergeschiedenis weer te geven.

   git --no-pager log --oneline
   

   Boven aan uw uitvoer ziet u een extra commit die de vorige commit terugdraait. Hier volgt een voorbeeld:

   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
   

De teruggedraaide wijziging doorgeven via de pijplijn

Hier pusht u de teruggedraaide wijziging via de pijplijn en ziet u de resultaten.

1. Voer de volgende git push opdracht uit om de blue-green branch te uploaden naar uw GitHub-opslagplaats.

   git push origin blue-green
   

2. Ga in Azure Pipelines naar de build. Monitor de build terwijl deze wordt uitgevoerd.

3. Ga naar de URL's die overeenkomen met de wisselslot en de productieslot voor uw Faseringsomgeving.

   De productieslot verwijst nu naar de teruggedraaide wijziging, wat de oorspronkelijke website is.

   

   De swap gleuf verwijst nu naar de vorige wijziging.

   

Geweldig werk! Het team heeft nu een manier om de releases te automatiseren. Ze kunnen nieuwe functies voor hun gebruikers krijgen zonder uitvaltijd.

Teamvergadering

Het team komt samen om de demo van de pijplijn te doen. Deze keer pusht Tim een wijziging door de pijplijn terwijl iedereen kijkt. Maar niet iedereen is ervan overtuigd.

Andy: Het is geweldig om implementatieslots in actie te zien. Maar ik snap het niet. Hoe profiteren we hier van implementaties zonder downtime? Staging is alleen voor ons team en het management.

Tim: Inderdaad, zullen we op dit moment niet veel voordeel zien. Maar stel dat we blauwgroene implementaties toepassen op een Productiefase. We hebben nog steeds handmatige goedkeuring van de directie nodig voordat we overgaan naar Productie. Maar wanneer we nieuwe functies uitbrengen, zal het wisselproces de implementatie bijna onmiddellijk maken. Het zal naadloos zijn voor onze gebruikers.

Andy: OK, ik denk dat ik het nu begrijp. Ik vind deze verbetering leuk. Het systeem van implementatieslots was eenvoudig in te stellen en het zal onze gebruikers voordeel bieden. Iedereen wint.

Amita: Over verbeteringen gesproken, waarom gaan we niet terug naar onze oefening voor waardestroomtoewijzing die we een paar weken geleden hebben gedaan? Ik wed dat we de voortgang zullen zien in hoe snel we nieuwe functies kunnen vrijgeven.

Mara: Geweldig, laten we dat op de agenda zetten voor onze volgende teamvergadering.