Übung: Einrichten Ihrer Umgebung

Abgeschlossen

In diesem Abschnitt stellen Sie sicher, dass Ihre Azure DevOps-Organisation so eingerichtet ist, dass Sie den Rest dieses Moduls absolvieren können. Außerdem erstellen Sie die Azure App Service-Umgebungen, in denen die Bereitstellung erfolgt.

Um diese Ziele zu erreichen, gehen Sie wie folgt vor:

  • Fügen Sie einen Benutzer hinzu, um sicherzustellen, dass Azure DevOps eine Verbindung mit Ihrem Azure-Abonnement herstellen kann.
  • Richten Sie ein Azure DevOps-Projekt für dieses Modul ein.
  • Verschieben des Arbeitselements für dieses Modul in Azure Boards in die Spalte Wird ausgeführt.
  • Stellen Sie sicher, dass das Projekt lokal eingerichtet ist, damit Sie Änderungen in die Pipeline pushen können.
  • Erstellen Sie die Azure App Service-Umgebungen unter Verwendung der Azure CLI in Azure Cloud Shell.
  • Erstellen Sie die Pipelinevariablen, die die Namen Ihrer App Service-Umgebungen definieren.
  • Erstellen Sie eine Dienstverbindung, die Azure Pipelines den sicheren Zugriff auf Ihr Azure-Abonnement ermöglicht.
  • Führen Sie eine anfängliche Bereitstellung aus.

Hinzufügen eines Benutzers zu Azure DevOps

Für die Bearbeitung dieses Moduls benötigen Sie ein eigenes Azure-Abonnement. Zum Einstieg können Sie Azure kostenlos nutzen.

Obwohl Sie kein Azure-Abonnement benötigen, um Azure DevOps verwenden zu können, verwenden Sie Azure DevOps hier für die Bereitstellung in Ressourcen, die in Ihrem Azure-Abonnement vorhanden sind. Um den Prozess zu vereinfachen, melden Sie sich mit demselben Microsoft-Konto bei Ihrem Azure-Abonnement und der Azure DevOps-Organisation an.

Wenn Sie verschiedene Microsoft-Konten für die Anmeldung bei Azure und Azure DevOps verwenden, fügen Sie der DevOps-Organisation unter dem Microsoft-Konto, das Sie für die Anmeldung bei Azure verwenden, einen Benutzer hinzu. Weitere Informationen finden Sie unter Hinzufügen von Benutzern zu einer Organisation oder einem Projekt. Wählen Sie beim Hinzufügen des Benutzers die Zugriffsebene Basic aus.

Melden Sie sich anschließend von Azure DevOps ab, und melden Sie sich mit dem Microsoft-Konto, das Sie für die Anmeldung bei Ihrem Azure-Abonnement verwenden, wieder an.

Einrichten des Azure DevOps-Projekts

Hier stellen Sie sicher, dass Sie Ihre Azure DevOps-Organisation so eingerichtet haben, dass Sie den Rest dieses Moduls absolvieren können. Sie richten sie ein, indem Sie eine Vorlage ausführen, mit der in Azure DevOps ein Projekt erstellt wird.

Die Module in diesem Lernpfad sind fortschreitend angeordnet. Sie folgen dem Tailspin-Webteam auf seiner DevOps-Journey. Zu Lernzwecken ist jedem Modul ein Azure DevOps-Projekt zugeordnet.

Ausführen der Vorlage

Führen Sie eine Vorlage aus, die Ihre Azure DevOps-Organisation einrichtet.

Führen Sie die folgenden Schritte auf der Website „Azure DevOps Demo Generator“ durch, um die Vorlage auszuführen.

  1. Wählen Sie Sign In (Anmelden) aus, und akzeptieren Sie die Nutzungsbedingungen.

  2. Wählen Sie auf der Seite Create New Project (Neues Projekt erstellen) Ihre Azure DevOps-Organisation aus. Geben Sie dann einen Projektnamen ein, z. B. Space Game – Web – Deployment patterns.

    Screenshot that shows how to create a project through the Azure DevOps Demo Generator.

  3. Wählen Sie Yes, I want to fork this repository (Ja, dieses Repository forken) aus. Wählen Sie dann Authorize (Autorisieren) aus.

  4. Wählen Sie Create Project (Projekt erstellen) aus.

    Die Ausführung der Vorlage dauert einige Zeit.

  5. Klicken Sie auf Zu Projekt navigieren, um zu Ihrem Projekt in Azure DevOps zu wechseln.

Wichtig

Auf der Seite Clean up your Azure DevOps environment (Bereinigen der Azure DevOps-Umgebung) in diesem Modul werden wichtige Bereinigungsschritte erläutert. Durch das Bereinigen stellen Sie sicher, dass Sie weiterhin über kostenlose Erstellungsminuten verfügen. Befolgen Sie unbedingt die Bereinigungsschritte, auch wenn Sie dieses Modul nicht abschließen.

Festlegen der Sichtbarkeit Ihres Projekts

Zunächst ist Ihr Fork des Repositorys „Space Game“ auf GitHub auf „Public“ (Öffentlich) festgelegt, während das mit der Azure DevOps-Vorlage erstellte Projekt auf „Private“ (Privat) festgelegt ist. Auf eine öffentliches Repository auf GitHub kann jeder zugreifen, während ein privates Repository nur für Sie und die Personen zugänglich ist, für die Sie es freigeben möchten. Auf ähnliche Weise bieten öffentliche Projekte in Azure DevOps schreibgeschützten Zugriff für nicht authentifizierte Benutzer, während private Projekte erfordern, dass Benutzern Zugriff gewährt wird und sie authentifiziert werden, um auf die Dienste zuzugreifen.

Derzeit ist es nicht erforderlich, diese Einstellungen für die Zwecke dieses Moduls zu ändern. Für Ihre persönlichen Projekte müssen Sie jedoch die Sichtbarkeit und den Zugriff bestimmen, den Sie anderen gewähren möchten. Bei einem Open-Source-Projekt können Sie z. B. sowohl Ihr GitHub-Repository als auch das Azure DevOps-Projekt öffentlich machen. Wenn Ihr Projekt geschützt ist, sollten Sie sowohl Ihr GitHub-Repository als auch das Azure DevOps-Projekt als privat festlegen.

Später können die folgenden Ressourcen hilfreich sein, um zu bestimmen, welche Option für Ihr Projekt am besten geeignet ist:

Versetzen des Arbeitselements in die Ausführung

In diesem Abschnitt weisen Sie sich in Azure Boards selbst ein Arbeitselement für dieses Modul zu. Außerdem versetzen Sie dieses Arbeitselement in den Zustand Doing (Wird ausgeführt). In der Praxis erstellen Sie und Ihr Team Arbeitselemente zu Beginn jedes Sprints oder jeder Arbeitsiteration.

Wenn Sie Arbeit auf diese Weise zuweisen, haben Sie eine Checkliste, nach der Sie arbeiten können. So kann Ihr Team einsehen, woran Sie gerade arbeiten und wie viel Arbeit noch zu erledigen ist. Außerdem kann das Team so sich in Bearbeitung befindliche Arbeit beschränken, um nicht zu viel auf einmal zu übernehmen.

Erinnern Sie sich an die Hauptthemen, die das Team für den aktuellen Sprint festgelegt hat:

Screenshot of Azure Boards that shows the tasks for this sprint.

Hinweis

In einer Azure DevOps-Organisation sind Arbeitselemente fortlaufend nummeriert. In Ihrem Projekt stimmt die den einzelnen Arbeitselementen zugewiesene Zahl möglicherweise nicht mit der in der Abbildung überein.

Hier verschieben Sie das fünfte Element, Improve release cadence (Releasekadenz verbessern), in die Spalte Doing (Wird ausgeführt). Anschließend weisen Sie sich selbst dem Arbeitselement zu. Improve release cadence (Releasekadenz verbessern) bezieht sich auf die Wahl eines Bereitstellungsmusters, das es Ihnen ermöglicht, Änderungen schnell für Ihre Benutzer freizugeben.

So richten Sie das Arbeitselement ein:

  1. Navigieren Sie in Azure DevOps zu Boards, und wählen Sie dann im Menü Boards aus.

    Screenshot of Azure DevOps that shows the location of the Boards menu.

  2. Wählen Sie am unteren Rand des Arbeitselements Improve release cadence (Releasekadenz verbessern) den Pfeil nach unten aus. Weisen Sie sich dann das Arbeitselement zu.

    Screenshot of Azure Boards that shows the location of the down arrow.

  3. Verschieben Sie das Arbeitselement aus der Spalte To Do (Zu erledigen) in die Spalte Doing (Wird ausgeführt).

    Screenshot of Azure Boards that shows the card in the Doing column.

Am Ende dieses Moduls verschieben Sie die Karte in die Spalte Fertig, nachdem Sie die Aufgabe abgeschlossen haben.

Lokales Einrichten des Projekts

Hier laden Sie das Space Game-Projekt in Visual Studio Code, konfigurieren Git, klonen Ihr Repository lokal und legen das Upstreamremoterepository fest, damit Sie den Startercode herunterladen können.

Hinweis

Wenn Sie das Projekt mslearn-tailspin-spacegame-web-deploy bereits lokal eingerichtet haben, können Sie zum nächsten Abschnitt übergehen.

Öffnen des integrierten Terminals

Visual Studio Code verfügt über ein integriertes Terminal. Darin können Sie sowohl Dateien bearbeiten als auch von der Befehlszeile aus arbeiten.

  1. Starten Sie Visual Studio Code.

  2. Wählen Sie im Menü Ansicht die Option Terminal aus.

  3. Wählen Sie in der Dropdownliste Git-Bash aus. Wenn Sie mit einer anderen Unix-Shell vertraut sind, deren Verwendung Sie bevorzugen, wählen Sie stattdessen diese Shell aus.

    A screenshot of Visual Studio Code showing the location of the Git Bash shell.

    Im Terminalfenster können Sie jede Shell auswählen, die auf Ihrem System installiert ist. Sie können z. B. Git Bash oder PowerShell oder eine andere Shell auswählen.

    Hier verwenden Sie Git Bash, Teil von Git für Windows, was die Ausführung von Git-Befehlen erleichtert.

    Hinweis

    Wenn unter Windows die Git-Bash nicht als Option aufgeführt wird, vergewissern Sie sich, dass Sie Git installiert haben, und starten Sie Visual Studio Code neu.

  4. Führen Sie den Befehl cd aus, um zum gewünschten Arbeitsverzeichnis zu wechseln. Sie können auch Ihr Stammverzeichnis (~) oder ein anderes Verzeichnis wählen.

    cd ~
    

Konfigurieren von Git

Wenn Sie noch nicht mit Git und GitHub vertraut sind, müssen Sie zunächst einige Befehle ausführen, um Ihre Identität mit Git zu verknüpfen und sich bei GitHub zu authentifizieren. Weitere Informationen finden Sie unter Einrichten von Git.

Sie müssen mindestens die folgenden Schritte ausführen. Führen Sie die Befehle im integrierten Terminal aus.

  1. Festlegen Ihres Benutzernamens.
  2. E-Mail-Adresse für Commits festlegen
  3. Zwischenspeichern Ihres GitHub-Kennworts.

Hinweis

Erstellen Sie ein persönliches Zugriffstoken, wenn Sie bereits die zweistufige Authentifizierung für GitHub verwenden. Verwenden Sie Ihr Token anstelle Ihres Kennworts, wenn Sie dazu aufgefordert werden.

Behandeln Sie das Zugriffstoken wie ein Kennwort. Bewahren Sie es an einem sicheren Ort auf.

Einrichten Ihres Projekts in Visual Studio Code

Im Lernpfad Erstellen von Anwendungen mit Azure DevOps haben Sie ein Git-Repository geforkt und dann geklont. Das Repository enthält den Quellcode für die Website von Space Game. Ihr Fork wurde mit ihren Projekten in Azure DevOps verknüpft, sodass die Builderstellung erfolgt, wenn Sie Änderungen nach GitHub pushen.

Wichtig

In diesem Lernpfad wechseln wir zu einem anderen Git-Repository, mslearn-tailspin-spacegame-web-deploy. Bei der Ausführung der Vorlage zum Einrichten Ihres Azure DevOps-Projekts wurde das Repository automatisch für Sie geforkt.

In diesem Teil klonen Sie Ihren Fork lokal, damit Sie Ihre Pipelinekonfiguration ändern und ausbauen können.

Lokales Klonen des Forks

Sie haben nun in Ihrem GitHub-Konto eine Kopie des Space Game-Webprojekts erstellt. Nun laden Sie eine Kopie auf Ihren Computer herunter, damit Sie damit arbeiten können. Dieser Vorgang wird auch als Klonen bezeichnet.

Ein Klon ist genau wie ein Fork eine Kopie eines Repositorys. Wenn Sie ein Repository klonen, können Sie Änderungen vornehmen, prüfen, ob diese wie erwartet funktionieren, und diese Änderungen dann auf GitHub hochladen. Außerdem können Sie Ihre lokale Kopie mit Änderungen synchronisieren, die andere authentifizierte Benutzer an der Kopie Ihres Repositorys auf GitHub vorgenommen haben.

Führen Sie die folgenden Schritte aus, um das Space Game-Webprojekt auf Ihrem Computer zu klonen:

  1. Navigieren Sie auf GitHub zu Ihrem Fork des Webprojekts Space Game (mslearn-tailspin-spacegame-web-deploy).

  2. Wählen Sie Code aus. Klicken Sie dann auf der Registerkarte HTTPS auf die Schaltfläche neben der URL, um die URL in die Zwischenablage zu kopieren.

    Screenshot that shows how to locate the URL and copy button from the GitHub repository.

  3. Rufen Sie in Visual Studio Code das Terminalfenster auf.

  4. Wechseln Sie im Terminal zum Verzeichnis, in dem Sie arbeiten möchten. Sie können auch Ihr Stammverzeichnis (~) oder ein anderes Verzeichnis wählen.

    cd ~
    
  5. Führen Sie den Befehl git clone aus. Ersetzen Sie die hier angezeigte URL durch den Inhalt Ihrer Zwischenablage:

    git clone https://github.com/your-name/mslearn-tailspin-spacegame-web-deploy.git
    
  6. Wechseln Sie zum Verzeichnis mslearn-tailspin-spacegame-web-deploy. Dies ist das Basisverzeichnis Ihres Repositorys.

    cd mslearn-tailspin-spacegame-web-deploy
    

Einrichten des Remoterepositorys für den Upstream

Ein Remoterepository ist ein Git-Repository, in dem Teammitglieder zusammenarbeiten (wie ein Repository auf GitHub). Hier listen Sie Ihre Remoterepositorys auf und fügen ein Remoterepository hinzu, das auf die Kopie des Repositorys von Microsoft verweist, damit Sie den neuesten Beispielcode erhalten.

  1. Führen Sie den Befehl git remote aus, um Ihre Remoterepositorys aufzulisten:

    git remote -v
    

    Wie Sie sehen, umfassen Ihre Zugriffsmöglichkeiten auf Ihr Repository sowohl das Fetchen (Herunterladen) als auch das Pushen (Hochladen):

    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
    

    Die Angabe Origin bezieht sich hier auf Ihr Repository auf GitHub. Beim Forken von Code aus einem anderen Repository wird das ursprüngliche Remoterepository (aus dem der Fork erstellt wurde) oftmals als upstream bezeichnet.

  2. Führen Sie den Befehl git remote add aus, um ein Remoterepository namens upstream zu erstellen, das auf das Microsoft-Repository verweist:

    git remote add upstream https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git
    
  3. Führen Sie git remote noch mal aus, um die Änderungen anzuzeigen:

    git remote -v
    

    Wie Sie sehen, umfassen Ihre Zugriffsmöglichkeiten auf das Repository weiterhin sowohl das Abrufen (Herunterladen) als auch das Pushen (Hochladen). Zudem verfügen Sie jetzt über Fetchzugriff auf das Microsoft-Repository:

    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    origin  https://github.com/username/mslearn-tailspin-spacegame-web-deploy.git (push)
    upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (fetch)
    

Öffnen des Projekts im Datei-Explorer

In Visual Studio Code zeigt Ihr Terminalfenster auf das Stammverzeichnis des Webprojekts Space Game. Um die Struktur des Projekts anzuzeigen und mit Dateien zu arbeiten, öffnen Sie nun im Datei-Explorer das Projekt.

  1. Die einfachste Möglichkeit zum Öffnen des Projekts besteht darin, Visual Studio Code im aktuellen Verzeichnis erneut zu öffnen. Führen Sie dazu im integrierten Terminal den folgenden Befehl aus:

    code -r .
    

    Das Verzeichnis und die Dateistruktur werden im Datei-Explorer angezeigt.

  2. Öffnen Sie das integrierte Terminal erneut. Das Terminal leitet Sie zum Stammverzeichnis Ihres Webprojekts weiter.

Wenn der code-Befehl fehlschlägt, müssen Sie Ihrem Systempfad (PATH) Visual Studio Code hinzufügen. Gehen Sie folgendermaßen vor:

  1. Wählen Sie in Visual Studio Code F1 oder Ansicht>Befehlspalette aus, um die Befehlspalette aufzurufen.
  2. Geben Sie in der Befehlspalette Shell Command: Install 'code' command in PATH (Shellbefehl: Befehl „code“ in PATH installieren) ein.
  3. Wiederholen Sie den vorherigen Vorgang, um das Projekt im Datei-Explorer zu öffnen.

Sie können jetzt mit dem Quellcode von Space Game und Ihrer Azure Pipelines-Konfiguration in der lokalen Entwicklungsumgebung arbeiten.

Erstellen der Azure App Service-Umgebungen

Hier erstellen Sie die Umgebungen für die jeweiligen Pipelinephasen. Sie erstellen eine App Service-Instanz für die einzelnen Phasen: Entwicklung, Test und Staging.

In den vorherigen Modulen haben Sie die Azure CLI zum Erstellen Ihrer App Service-Instanzen verwendet. Hier gehen Sie genauso vor.

Wichtig

Sie benötigen ein eigenes Azure-Abonnement für die Übungen in diesem Modul.

Aufrufen der Cloud Shell über das Azure-Portal

  1. Wechseln Sie zum Azure-Portal, und melden Sie sich an.
  2. Wählen Sie im Menü Cloud Shell aus. Wählen Sie Bash aus, wenn Sie dazu aufgefordert werden.

Wählen Sie eine Azure-Region aus.

Hier geben Sie die Standardregion oder den geografischen Standort an, an dem Ihre Azure-Ressourcen erstellt werden sollen.

  1. Führen Sie in Cloud Shell den folgenden az account list-locations-Befehl aus, um die Regionen aufzulisten, die über Ihr Azure-Abonnement verfügbar sind.

    az account list-locations \
      --query "[].{Name: name, DisplayName: displayName}" \
      --output table
    
  2. Wählen Sie in der Spalte Name in der Ausgabe eine Region in Ihrer Nähe aus. Wählen Sie z. B. eastasia oder westus2 aus.

  3. Führen Sie az configure aus, um Ihre Standardregion festzulegen. Ersetzen Sie <REGION> durch den Namen der ausgewählten Region.

    az configure --defaults location=<REGION>
    

    In diesem Beispiel wird westus2 als Standardregion festgelegt:

    az configure --defaults location=westus2
    

Erstellen der App Service-Instanzen

Hier erstellen Sie App Service-Instanzen für die drei Stages der Bereitstellung: Entwicklung, Test und Staging. Sie fügen der Stagingumgebung später in diesem Modul einen Bereitstellungsslot hinzu.

Hinweis

Zu Lernzwecken verwenden Sie hier die Standardeinstellungen des Netzwerks. Diese Einstellungen machen Ihre Website über das Internet zugänglich. In der Praxis könnten Sie ein virtuelles Azure-Netzwerk konfigurieren, das Ihre Website in einem Netzwerk platziert, das nicht vom Internet aus erreichbar ist, auf das aber nur Ihr Team zugreifen kann. Zu einem späteren Zeitpunkt können Sie das Netzwerk dann neu konfigurieren, damit die Website den Benutzern zur Verfügung steht.

  1. Generieren Sie in Cloud Shell eine Zufallszahl, damit der Domänennamen der Web-App eindeutig ist:

    webappsuffix=$RANDOM
    
  2. Führen Sie den folgenden az group create-Befehl aus, um eine Ressourcengruppe mit dem Namen tailspin-space-game-rg zu erstellen.

    az group create --name tailspin-space-game-rg
    
  3. Führen Sie die folgenden Befehle aus, um zwei App Service-Pläne zu erstellen.

    az appservice plan create \
      --name tailspin-space-game-test-asp \
      --resource-group tailspin-space-game-rg \
      --sku B1 \
      --is-linux
    
    az appservice plan create \
      --name tailspin-space-game-prod-asp \
      --resource-group tailspin-space-game-rg \
      --sku P1V2 \
      --is-linux
    

    Wichtig

    Wenn die B1-SKU in Ihrem Azure-Abonnement nicht verfügbar ist, wählen Sie einen anderen Plan aus, z. B. S1 (Standard).

    Erinnern Sie sich daran, dass ein App Service-Plan die CPU-, Arbeitsspeicher- und Speicherressourcen definiert, die für die Ausführung Ihrer Web-App bereitgestellt werden.

    Der erste Befehl gibt den Plan B1 an. Dieser Plan wird im Basic-Tarif ausgeführt. In den App Service-Umgebungen wird dieser Plan für die Stages Entwicklung und Test verwendet. Der Plan B1 Basic ist für Apps konzipiert, die geringe Anforderungen an den Datenverkehr stellen, z. B. in einer Entwicklungs- oder Testumgebung.

    Der zweite Befehl gibt den Plan P1V2 an, der im Tarif Premium ausgeführt wird. Dieser Plan wird für das Staging verwendet. Der Plan Premium P1V2 ist für Workloads in der Produktionsumgebung vorgesehen. Er wird auf dedizierten VM-Instanzen ausgeführt.

    Der Plan Basic bietet keine zusätzlichen Bereitstellungsslots. Der Plan Premium hingegen schon. Aus diesem Grund benötigen Sie den Premium-Plan für Ihre Stagingumgebung.

  4. Führen Sie die folgenden az webapp create-Befehle aus, um die drei App Service-Instanzen zu erstellen, jeweils eine für die Umgebungen für Entwicklung, Test und Staging.

    az webapp create \
      --name tailspin-space-game-web-dev-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-test-asp \
      --runtime "DOTNET|6.0"
    
    az webapp create \
      --name tailspin-space-game-web-test-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-test-asp \
      --runtime "DOTNET|6.0"
    
    az webapp create \
      --name tailspin-space-game-web-staging-$webappsuffix \
      --resource-group tailspin-space-game-rg \
      --plan tailspin-space-game-prod-asp \
      --runtime "DOTNET|6.0"
    

    Beachten Sie, dass Sie hier denselben App Service-Plan, B1 Basic, auf die App Service-Instanzen für Entwicklung und Test anwenden. Sie wenden den App Service-Plan Premium P1V2 auf die App Service-Instanz für Staging an.

  5. Führen Sie den folgenden az webapp list-Befehl aus, um Hostname und Status der einzelnen App Service-Instanzen aufzulisten.

    az webapp list \
      --resource-group tailspin-space-game-rg \
      --query "[].{hostName: defaultHostName, state: state}" \
      --output table
    

    Notieren Sie sich den Hostnamen der einzelnen ausgeführten Dienste. Sie benötigen diese Hostnamen später, wenn Sie Ihre Arbeit überprüfen. Im Folgenden sehen Sie ein Beispiel für die Hostnamen:

    HostName                                                 State
    -------------------------------------------------------  -------
    tailspin-space-game-web-dev-21017.azurewebsites.net      Running
    tailspin-space-game-web-test-21017.azurewebsites.net     Running
    tailspin-space-game-web-staging-21017.azurewebsites.net  Running
    
  6. Wechseln Sie als optionaler Schritt zu mindestens einem Namen. Überprüfen Sie, ob der Host ausgeführt und die Standardhomepage angezeigt wird.

    Diese Seite wird in jeder Umgebung angezeigt:

    Screenshot of the default home page in Azure App Service.

Wichtig

Auf der Seite Clean up your Azure DevOps environment (Bereinigen der Azure DevOps-Umgebung) in diesem Modul werden wichtige Bereinigungsschritte erläutert. Durch die Bereinigung wird sichergestellt, dass Azure-Ressourcen nach Abschluss dieses Moduls nicht in Rechnung gestellt werden. Achten Sie darauf, dass Sie die Bereinigungsschritte auch ausführen, wenn Sie dieses Modul nicht abschließen.

Erstellen von Pipelinevariablen in Azure Pipelines

In Erstellen einer mehrstufigen Pipeline mit Azure Pipelines haben Sie eine Variable für die jeweilige App Service-Instanz der Entwicklungs-, Test- und Staging-Stage hinzugefügt. Hier gehen Sie genauso vor.

Alle Stages in der Pipelinekonfiguration verwenden diese Variablen, um festzustellen, in welcher App Service-Instanz die Bereitstellung erfolgen soll.

So fügen Sie die Variablen hinzu

  1. Navigieren Sie in Azure DevOps zu Ihrem Projekt Space Game – Web – Deployment patterns.

  2. Wählen Sie unter Pipelines die Option Library (Bibliothek) aus.

    Screenshot of Azure Pipelines that shows the Library menu option.

  3. Wählen Sie + Variable group (Variablengruppe) aus.

  4. Geben Sie unter Properties (Eigenschaften) für den Variablengruppennamen Release ein.

  5. Wählen Sie unter Variables die Option + Add aus.

  6. Geben Sie als Namen Ihrer Variable WebAppNameDev ein. Geben Sie als Wert den entsprechenden Namen der App Service-Instanz Ihrer Entwicklungsumgebung ein, z. B. tailspin-space-game-web-dev-1234.

  7. Wiederholen Sie die Schritte 5 und 6 zweimal, um Variablen für Ihre Test- und Stagingumgebungen zu erstellen (siehe folgende Tabelle):

    Variablenname Beispielwert
    WebAppNameTest tailspin-space-game-web-test-1234
    WebAppNameStaging tailspin-space-game-web-staging-1234

    Stellen Sie sicher, dass Sie jeden Beispielwert durch die App Service-Instanz ersetzen, die Ihrer Umgebung entspricht.

    Wichtig

    Legen Sie den Namen der App Service-Instanz fest, nicht deren Hostnamen. In diesem Beispiel geben Sie tailspin-space-game-web-dev-1234 und nicht tailspin-space-game-web-dev-1234.azurewebsites.net ein.

  8. Klicken Sie im oberen Bereich der Seite auf Speichern, um die Variable in der Pipeline zu speichern.

    Ihre Variablengruppe sollte ungefähr wie folgt aussehen:

    Screenshot of Azure Pipelines that shows the variable group. The group contains three variables.

Erstellen der Entwicklungs-, Test- und Stagingumgebungen

In vorherigen Modulen haben Sie Umgebungen für die Entwicklungs-, Test-und Stagingumgebungen erstellt. Hier wiederholen Sie den Vorgang.

So erstellen Sie die Entwicklungs-, Test- und Stagingumgebungen

  1. Klicken Sie in Azure Pipelines auf Umgebungen.

    Screenshot of Azure Pipelines that shows the location of the Environments menu option.

  2. So erstellen Sie die Umgebung dev

    1. Klicken Sie auf Umgebung erstellen.
    2. Geben Sie unter Name den Wert dev ein.
    3. Behalten Sie in den übrigen Feldern die Standardwerte bei.
    4. Klicken Sie auf Erstellen.
  3. So erstellen Sie die Umgebung test

    1. Kehren Sie zur Seite Umgebungen zurück.
    2. Wählen Sie Neue Umgebung aus.
    3. Geben Sie unter Name den Wert test ein.
    4. Klicken Sie auf Erstellen.
  4. So erstellen Sie die Stagingumgebung:

    1. Kehren Sie zur Seite Umgebungen zurück.
    2. Wählen Sie Neue Umgebung aus.
    3. Geben Sie unter Name den Wert staging ein.
    4. Klicken Sie auf Erstellen.

Erstellen einer Dienstverbindung

Hier erstellen Sie eine Dienstverbindung, die Azure Pipelines den Zugriff auf Ihr Azure-Abonnement ermöglicht. Azure Pipelines verwendet diese Dienstverbindung, um die Website in App Service bereitzustellen. Eine ähnliche Dienstverbindung haben Sie im vorherigen Modul erstellt.

Wichtig

Achten Sie darauf, dass Sie sowohl beim Azure-Portal als auch bei Azure DevOps mit dem gleichen Microsoft-Konto angemeldet sind.

  1. Navigieren Sie in Azure DevOps zu Ihrem Projekt Space Game – Web – Deployment patterns.

  2. Wählen Sie unten auf der Seite Project settings (Projekteinstellungen) aus.

  3. Klicken Sie unter Pipelines auf Dienstverbindungen.

  4. Wählen Sie New service connection (Neue Dienstverbindung) und dann Azure Resource Manager aus. Klicken Sie anschließend auf Next (Weiter) aus.

  5. Wählen Sie oben auf der Seite Service principal (automatic) (Dienstprinzipal (automatisch)) aus. Wählen Sie Weiteraus.

  6. Füllen Sie die folgenden Felder aus:

    Feld Wert
    Bereichsebene Abonnement
    Subscription Ihr Azure-Abonnement
    Ressourcengruppe tailspin-space-game-rg
    Name der Dienstverbindung Resource Manager – Tailspin – Space Game

    Im weiteren Verlauf werden Sie u. U. aufgefordert, sich bei Ihrem Microsoft-Konto anzumelden.

  7. Achten Sie darauf, dass Grant access permission to all pipelines ausgewählt ist.

  8. Wählen Sie Speichern aus.

    Azure DevOps führt einen Verbindungstest aus, um sicherzustellen, dass eine Verbindung mit Ihrem Azure-Abonnement hergestellt werden kann. Wenn Azure DevOps keine Verbindung herstellen kann, haben Sie die Möglichkeit, sich ein zweites Mal anzumelden.

Abrufen des Branchs aus GitHub

Hier rufen Sie den Branch blue-green aus GitHub ab. Sie checken dann diesen Branch aus, d. h. Sie wechseln zu diesem Branch.

Dieser Branch enthält das Space Game-Projekt, mit dem Sie in den vorherigen Modulen gearbeitet haben, sowie eine anfängliche Azure Pipelines-Konfiguration.

  1. Öffnen Sie in Visual Studio Code das integrierte Terminal.

  2. Führen Sie die folgenden git-Befehle zum Abrufen eines Branchs namens blue-green des Repositorys von Microsoft aus, und wechseln Sie zu diesem Branch.

    git fetch upstream blue-green
    git checkout -B blue-green upstream/blue-green
    

    Das Format dieser Befehle ermöglicht es Ihnen, den Startercode aus dem Microsoft GitHub-Repository, bekannt als upstream, abzurufen. In Kürze werden Sie diesen Branch per Push in Ihr GitHub-Repository (als origin bezeichnet) übertragen.

  3. Als optionalen Schritt öffnen Sie in Visual Studio Code azure-pipelines.yml. Machen Sie sich mit der Erstkonfiguration vertraut.

    Die Konfiguration weist Ähnlichkeit mit den Konfigurationen auf, die Sie in den vorherigen Modulen dieses Lernpfads erstellt haben. Nur die Releasekonfiguration der Anwendung wird erstellt. Aus Gründen der Übersichtlichkeit werden außerdem die Trigger, manuellen Genehmigungen und Tests ausgelassen, die Sie in vorherigen Modulen eingerichtet haben.

    Zu Lernzwecken stuft diese Konfiguration Änderungen von allen Branches in Entwicklung, Test und Staging höher. Ein robusterer Ansatz könnte Änderungen nur von einem Releasebranch oder main höher stufen. Sie haben diesen robusten Ansatz im Modul Erstellen einer mehrstufigen Pipeline mithilfe von Azure Pipelines verwendet.

Ausführen der Pipeline und Anzeigen der bereitgestellten Website

Hier pushen Sie die Erstkonfiguration zu GitHub, damit Sie mit dem Team auf dem neuesten Stand sind. Später fügen Sie der Stagingumgebung einen Slot hinzu, sodass Sie eine Blau-Grün-Bereitstellung implementieren können.

  1. Öffnen Sie in Visual Studio Code das integrierte Terminal.

  2. Führen Sie den folgenden git commit-Befehl aus, um Ihrem Commitverlauf einen leeren Eintrag hinzuzufügen.

    git commit --allow-empty -m "Trigger the pipeline"
    

    Dieser Schritt dient zu Lernzwecken. Das ist nicht typisch. Wir stellen einen Startercode zur Verfügung, den Sie nicht mehr ändern müssen. Das Flag --allow-empty stellt sicher, dass der nächste Schritt den Branch erfolgreich auf GitHub pusht und die Ausführung von Azure Pipelines auslöst.

    Wenn Sie diesen Schritt auslassen, dann würde der Befehl git push, den Sie im nächsten Schritt ausführen, keine Aktion ausführen. Er würde also nicht die Ausführung von Azure Pipelines auslösen.

  3. Führen Sie den folgenden Befehl git push aus, um den Branch in Ihr GitHub-Repository hochzuladen.

    git push origin blue-green
    
  4. Wechseln Sie in Azure Pipelines zum Build. Überwachen Sie dann die Ausführung des Builds. Wenn Sie aufgefordert werden, wählen Sie Zulassen aus, um Bereitstellungsberechtigungen für die verschiedenen Stages zu erteilen.

  5. Navigieren Sie nach Abschluss der Pipelineausführung zu der Zusammenfassungsseite, um den Pipelinestatus anzuzeigen.

    Screenshot of Azure Pipelines that shows the completed stages.

  6. Navigieren Sie zu der URL, die den einzelnen Stages entspricht. Ihre Web-App sollte für jede Umgebung bereitgestellt werden.

    Screenshot of a web browser that shows the Space Game website in the Dev environment.