Oefening: een wijziging via de pipeline pushen

Voltooid

In dit deel ziet u uw implementatiesites 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 Index.cshtml in Visual Studio Code in de map Tailspin.SpaceGame.Web/Views/Home.

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 kleur van de achtergrond wijzigen

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

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

   Belangrijk

   Open site.scss, niet site.css. De buildfase wordt uitgevoerd node-sass om site.scss (een Sass-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 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 productiesite voor uw staging-omgeving . Deze site is de standaardsite die u hebt geconfigureerd bij het instellen van de pijplijn eerder.

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

   

4. Ga naar de URL die overeenkomt met de wisselsite voor 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 productiesite en de wisselsite hebt gewisseld. Met andere woorden, hier implementeert u altijd naar de wisselsite en vervolgens wisselt u de productiesite en wisselsite . Het wisselproces zorgt ervoor dat de productiesite verwijst naar de recentere implementatie.

De wijziging ongedaan maken

Stel dat u een wijziging hebt geïmplementeerd die u wilt terugdraaien. Op dit moment kunt u de wijziging terugdraaien door de productiesite en wisselsite opnieuw te verwisselen . U kunt de sites bijvoorbeeld handmatig wisselen via 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. Gebruik hiervoor 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, maakt de git revert opdracht een nieuwe doorvoering die in feite het tegenovergestelde is van de opgegeven set doorvoeringen. Als u de doorvoeringen wilt zien, voert u eerst de git log opdracht uit om uw doorvoergeschiedenis te traceren tijdens het terugdraaien.

1. Voer in uw 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 doorvoeringen en verschillende doorvoer-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 doorvoering te herstellen.

   git revert --no-edit HEAD
   

   Denk aan HEAD als de huidige status van uw vertakking. HEAD verwijst naar de meest recente doorvoering. Met deze opdracht geeft u op om alleen de HEAD of de meest recente doorvoer terug te zetten.

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

   git --no-pager log --oneline
   

   Boven aan de uitvoer ziet u een extra doorvoer die de vorige doorvoering 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 pushen 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 vertakking te uploaden naar uw GitHub-opslagplaats.

   git push origin blue-green
   

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

3. Ga naar de URL's die overeenkomen met de swapsite en productiesite voor uw staging-omgeving.

   De productiesite verwijst nu naar de teruggedraaide wijziging. Dit is de oorspronkelijke website.

   

   De wisselsite verwijst nu naar de vorige wijziging.

   

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

Teamvergadering

Het team verzamelt de demo van de pijplijn. Deze keer pusht Tim een wijziging door de pijplijn terwijl iedereen kijkt. Maar niet iedereen is ervan overtuigd.

Andy: Het is geweldig om implementatiesites op het werk te zien. Maar ik snap het niet. Hoe profiteren we hier van implementaties zonder downtime? Fasering is alleen voor ons team en management.

Tim: Inderdaad, we zullen nu niet veel voordeel zien. Maar stel dat we blauwgroene implementaties toepassen op een productiefase . We hebben nog steeds de handmatige goedkeuring van het management voordat we promoveren 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 implementatiesites was eenvoudig in te stellen en het zal onze gebruikers ten goede komen. 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.