Übung: Pushen einer Änderung durch die Pipeline

14 Minuten

In diesem Teil sehen Sie Ihre Bereitstellungsslots in Aktion. Auf der Homepage der Website ändern Sie die Hintergrundfarbe und den Text auf dem Hero-Banner. Anschließend pushen Sie Ihre Änderungen zu GitHub, beobachten die Ausführung der Pipeline und überprüfen die Änderungen.

Um den Prozess weiter zu üben, machen Sie dann Ihre Änderungen rückgängig und beobachten die Ausführung der Pipeline als eine Art Rollforward.

Ändern des Texts auf dem Hero-Banner

Hier ändern Sie den Text auf dem Hero-Banner. Später wird die Änderung angezeigt, wenn die Bereitstellung in App Service erfolgt.

Öffnen Sie in Visual Studio Code im Verzeichnis Tailspin.SpaceGame.Web/Views/Home die Datei Index.cshtml.
Achten Sie auf diesen Text am oberen Rand der Seite:
```
<p>An example site for learning</p>
```
Tipp

Visual Studio Code bietet eine Möglichkeit, in Dateien nach Text zu suchen. Um auf den Suchbereich zuzugreifen, wählen Sie das Lupensymbol im Seitenbereich aus.
Ersetzen Sie den Beispieltext durch den folgenden Text, und speichern Sie die Datei dann.
```
<p>Welcome to the official Space Game site!</p>
```

Ändern der Hintergrundfarbe

Hier ändern Sie die Hintergrundfarbe des Hero-Banners von „Grau“ in „Grün“.

Öffnen Sie in Visual Studio Code im Verzeichnis Tailspin.SpaceGame.Web/wwwroot/css die Datei site.scss.

Wichtig

Öffnen Sie site.scss, nicht site.css. Die Build-Stage führt node-sass aus, um site.scss (eine Sass-Datei) in site.css (eine CSS-Standarddatei) zu konvertieren.

Suchen Sie den folgenden Code am Anfang der Datei:

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

Ersetzen Sie im Code den markierten Text wie im folgenden Beispiel gezeigt. Speichern Sie dann die Datei.

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

Pushen der Änderung über die Pipeline

Normalerweise würden Sie die Website lokal erstellen und ausführen, um die Änderung zu überprüfen. Sie können auch alle zugehörigen Komponententests ausführen, um zu überprüfen, dass Ihre Änderung nicht die bestehende Funktionalität beeinträchtigt.

Aus Gründen der Übersichtlichkeit werden hier die Änderungen an Ihren Branch committet, Ihr Branch zu GitHub gepusht und die Pipeline ausgeführt.

Fügen Sie Index.cshtml und site.scss zum Index hinzu, committen Sie die Änderungen, und pushen Sie sie dann zu 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

Verfolgen Sie die einzelnen Schritte des Buildvorgangs in Azure Pipelines.
Wechseln Sie zu der URL, die dem Slot production für Ihre Stagingumgebung entspricht. Dieser Slot ist der Standardslot, den Sie beim Einrichten der Pipeline zuvor konfiguriert haben.

Sie sehen, dass die bereitgestellte Website die Farb- und Textänderungen anzeigt.
Wechseln Sie zu der URL, die dem Slot swap für Ihre Stagingumgebung entspricht. Die URL enthält „-swap.azurewebsites.net“ in ihrem Namen.

Die vorherige Version der Website wird ohne die Farb- und Textänderungen angezeigt.

Sie sehen keine Änderungen, da Sie den Slot production und den Slot swap vertauscht haben. Mit anderen Worten: Hier erfolgt die Bereitstellung immer im Slot swap, und dann werden der Slot production und swap vertauscht. Der Austausch stellt sicher, dass der Slot production auf die aktuellere Bereitstellung verweist.

Zurücksetzen der Änderung

Angenommen, Sie haben eine Änderung bereitgestellt, die Sie rückgängig machen möchten. An diesem Punkt könnten Sie die Änderung rückgängig machen, indem Sie den Slot production und den Slot swap erneut vertauschen. Sie könnten z. B. die Slots manuell über das Azure-Portal austauschen. Oder anstatt einen Rollback der Änderungen auszuführen, könnten Sie einen Rollforward ausführen, indem Sie eine weitere Änderung durch die Pipeline pushen.

Genau das werden Sie hier durchführen. Sie werden Ihre letzten Codeänderungen rückgängig machen und eine weitere Änderung durch die Pipeline pushen. Verwenden Sie hierzu den git revert-Befehl.

In Git entfernen Sie nur selten Commits aus dem Verlauf einer Datei. Anders als der Vorgang „Rückgängig machen“ in einem Text-Editor erzeugt der Befehl git revert einen neuen Commit, der im Wesentlichen das Gegenteil des angegebenen Satzes von Commits ist. Um die Commits anzuzeigen, führen Sie zunächst den Befehl git log aus, um den Commitverlauf während der Wiederherstellung nachzuverfolgen.

Führen Sie in Ihrem Terminal den folgenden git log-Befehl aus, um Ihren Commitverlauf anzuzeigen.
```
git --no-pager log --oneline
```
Die Ausgabe ähnelt dem folgenden Codebeispiel. In Ihrer Ausgabe werden zusätzliche Commits und unterschiedliche Commit-IDs angezeigt.
```
d6130b0 (HEAD -> blue-green, origin/blue-green) Change text and colors on the home page
ce56955 Swap deployment slots
0d6a123 Trigger the pipeline
```
Verfolgen Sie in der Ausgabe den Commitverlauf nach. Der neueste Commit befindet sich am Anfang.
Führen Sie den folgenden Befehl git revert aus, um einen Commit rückgängig zu machen.
```
git revert --no-edit HEAD
```
Stellen Sie sich HEAD als den aktuellen Zustand Ihres Branchs vor. HEAD bezieht sich auf den neuesten Commit. Dieser Befehl gibt an, dass nur der HEAD, also der letzte Commit, rückgängig gemacht werden soll.

Führen Sie git log erneut aus, um Ihren aktualisierten Commitverlauf anzuzeigen.

git --no-pager log --oneline

Am Anfang Ihrer Ausgabe sehen Sie einen zusätzlichen Commit, der den vorherigen Commit rückgängig macht. Hier sehen Sie ein Beispiel:

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

Pushen der rückgängig gemachten Änderung über die Pipeline

Hier pushen Sie Ihre rückgängig gemachte Änderung über die Pipeline und sehen die Ergebnisse.

Führen Sie den folgenden git push-Befehl aus, um den blue-green-Branch in Ihr GitHub-Repository hochzuladen.
```
git push origin blue-green
```
Wechseln Sie in Azure Pipelines zum Build. Überwachen Sie die Ausführung des Builds.
Wechseln Sie zu den URLs, die dem Slot swap und production für Ihre Stagingumgebung entsprechen.

Der Slot production verweist nun auf Ihre rückgängig gemachte Änderung, d. h. auf die ursprüngliche Website.

Der Slot swap verweist nun auf die vorherige Änderung.

Gut gemacht! Das Team verfügt jetzt über eine Möglichkeit, die Releases zu automatisieren. Sie können neue Features für Ihre Benutzer ohne Downtime erhalten.

Teambesprechung

Das Team versammelt sich zur Demonstration der Pipeline. Diesmal pusht Tim eine Änderung über die Pipeline, während alle zusehen. Aber nicht jeder ist davon überzeugt.

Andy: Es ist toll, Bereitstellungsslots bei der Arbeit zu beobachten. Aber ich verstehe es nicht. Wie profitieren wir hier von Bereitstellungen ohne Downtime? Das Staging ist nur für unser Team und das Management vorgesehen.

Tim: In der Tat werden wir im Moment keinen großen Nutzen erkennen. Aber stellen Sie sich vor, wenn wir Blau-Grün-Bereitstellungen auf eine Stage in der Produktionsumgebung anwenden. Wir verfügen weiterhin über die manuelle Genehmigung des Managements, bevor wir in die Produktionsumgebung höher stufen. Aber wenn wir neue Features freigeben, wird der Austauschprozess den Rollout fast sofort ermöglichen. Er wird für unsere Benutzer reibungslos verlaufen.

Andy: OK, ich glaube, ich verstehe jetzt. Mir gefällt diese Verbesserung. Das System der Bereitstellungsslots war einfach einzurichten und unsere Benutzer werden davon profitieren. Jeder gewinnt.

Amita: Da wir gerade von Verbesserungen sprechen, warum wiederholen wir nicht unsere Übung der Wertstromanalyse, die wir vor ein paar Wochen durchgeführt haben? Ich wette, wir werden einen Fortschritt darin erkennen, wie schnell wir neue Features freigeben können.

Mara: Hervorragend. Setzen wir das auf die Tagesordnung für unsere nächste Teambesprechung.

Weiter