Übung: Einrichten Ihrer Umgebung

  • 15 Minuten

Das Team hat langsam eine DevOps-Strategie in seine Prozesse integriert. In diesem Abschnitt stellen Sie sicher, dass Ihre Umgebung die bisherigen Bemühungen des Teams widerspiegelt.

Führen Sie dazu die folgenden Schritte aus:

  • 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.
  • Fügen Sie die Buildpipeline hinzu.

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 Abonnement benötigen, um mit Azure DevOps zu arbeiten, werden Sie hier Azure DevOps für die Bereitstellung auf Azure-Ressourcen verwenden, die in Ihrem Azure-Abonnement vorhanden sind. Um den Prozess zu vereinfachen, melden Sie sich bei Ihrem Azure-Abonnement und der Azure DevOps-Organisation mit demselben Microsoft-Konto an.

Wenn Sie verschiedene Microsoft-Konten für die Anmeldung bei Azure und Azure DevOps verwenden, fügen Sie einen Benutzer zu Ihrer DevOps-Organisation unter dem Microsoft-Konto hinzu, das Sie für die Anmeldung bei Azure verwenden. Weitere Informationen finden Sie unter Hinzufügen von Organisationsbenutzern und Verwalten des Zugriffs. 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 erneut mit dem Microsoft-Konto an, mit dem Sie sich bei Ihrem Azure-Abonnement anmelden.

Abrufen des Azure DevOps-Projekts

Stellen Sie sicher, dass Ihre Azure DevOps-Organisation so eingerichtet ist, dass Sie den Rest dieses Moduls abschließen können. Zu diesem Zweck führen Sie eine Vorlage aus, die für Sie ein Projekt in Azure DevOps erstellt.

Die Module in diesem Lernpfad sind fortschreitend in der Reihenfolge angeordnet, in der Sie das Tailspin-Webteam bei seiner DevOps-Reise begleiten. Zu Lernzwecken ist jedem Modul ein Azure DevOps-Projekt zugeordnet.

Ausführen der Vorlage

Eine Vorlage ausführen, die in Ihrer Azure DevOps-Organisation alles für Sie einrichtet.

Ausführen der Vorlage

Führen Sie die folgenden Schritte auf der „Azure DevOps Demo Generator“-Website 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, und geben Sie einen Projektnamen ein, zum Beispiel Space Game – Web – Release.

    Screenshot of the Azure DevOps Demo Generator web site showing the process to create the project.

  3. Wählen Sie Yes, I want to fork this repository>Authorize (Ja, ich möchte dieses Repository forken > Autorisieren) aus. Wenn ein Fenster angezeigt wird, müssen Sie den Zugriff auf Ihr GitHub-Konto autorisieren.

    Wichtig

    Sie müssen diese Option auswählen, damit die Vorlage mit Ihrem GitHub-Repository verbunden wird. Wählen Sie sie auch dann aus, wenn Sie das Websiteprojekt Space Game bereits geforkt haben. Die Vorlage verwendet Ihren vorhandenen Fork.

  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. Achten Sie darauf, dass Sie die Bereinigungsschritte auch ausführen, 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:

Vorbereiten von Visual Studio Code

Richten Sie Visual Studio Code ein, damit Sie die Website lokal erstellen und die Quelldateien verwenden können.

Visual Studio Code enthält ein integriertes Terminal, mit dem Sie von einer Stelle aus Dateien bearbeiten und über die Befehlszeile arbeiten können.

  1. Starten Sie Visual Studio Code.

  2. Wählen Sie Terminal und dann Neues 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, z. B. Zsh, wählen Sie stattdessen diese Shell aus. Git für Windows enthält Git Bash, mit dem Git-Befehle einfach ausgeführt werden können.

    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 folgenden Befehl aus, um zu Ihrem Basisverzeichnis zu navigieren.

    cd ~

Konfigurieren von Git

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

Sie müssen mindestens die folgenden Schritte ausführen:

  1. Lade die aktuelle Version von Git herunter, und installiere diese.
  2. Festlegen Ihres Benutzernamens.
  3. E-Mail-Adresse für Commits festlegen

Hinweis

Wenn Sie bereits die zweistufige Authentifizierung bei GitHub verwenden, erstellen Sie ein persönliches Zugriffstoken. Verwenden Sie Ihr Token anstelle Ihres Kennworts, wenn Sie später dazu aufgefordert werden.

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

Einrichten Ihres Projekts in Visual Studio Code

Bei der Ausführung der Vorlage zum Einrichten Ihres Azure DevOps-Projekts wurde das Repository mslearn-tailspin-spacegame-web-deploy automatisch für Sie geforkt. Nun laden Sie eine Kopie auf Ihren Computer herunter, damit Sie damit arbeiten können. Dieser Vorgang wird auch als Klonen bezeichnet.

Lokales Klonen des Forks

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

  2. Wählen Sie Code und dann auf der Registerkarte HTTPS die Schaltfläche „Kopieren“ aus, um die URL in die Zwischenablage zu kopieren.

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

  3. Navigieren Sie in Visual Studio Code zum zuvor geöffneten Terminalfenster.

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

  5. Wechseln Sie in das Verzeichnis mslearn-tailspin-spacegame-web-deploy. Dieses Verzeichnis ist das Stammverzeichnis 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 folgenden Befehl 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)

    Origin (Ursprung) gibt Ihr Repository auf GitHub an. Wenn Sie Code aus einem anderen Repository forken, wird das ursprüngliche Remoterepository (das, aus dem Sie geforkt haben) häufig als upstream bezeichnet.

  2. Führen Sie den folgenden Befehl 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 ein zweites 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). Nun verfügen Sie auch über einen Abrufzugriff für 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)
upstream        https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy.git (push)

Öffnen des Projekts in Visual Studio Code

  1. Führen Sie den folgenden Befehl aus dem Stammverzeichnis Ihres Projekts aus.

    code .

  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 Shellbefehl ein, um den Shellbefehl Install 'code' command in PATH („Code“-Befehl in PATH installieren) zu suchen.
  3. Starten Sie das Terminal neu, damit der neue PATH-Wert angewandt wird.

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

Abrufen des Branchs aus GitHub

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

  2. Führen Sie die folgenden Befehle aus, um den Branch release-pipeline aus dem MicrosoftDocs-Repository zu fetchen, und checken Sie einen neuen Branch upstream/release-pipeline aus.

    git fetch upstream release-pipeline
git checkout -B release-pipeline upstream/release-pipeline

  3. Optional können Sie in Visual Studio Code die Datei azure-pipelines.yml öffnen und sich die anfängliche YAML-Pipelinekonfiguration ansehen.

Führen Sie die Pipeline aus.

An diesem Punkt verfügen Sie über Folgendes:

  • Einen Fork des Repositorys mslearn-tailspin-spacegame-web-deploy in Ihrem GitHub-Konto.
  • Das lokal geklonte Repository mslearn-tailspin-spacegame-web-deploy.
  • Einen Branch namens release-pipeline, der den Quellcode der Website und eine anfängliche Azure Pipelines-Konfiguration enthält.

Anschließend lösen Sie die Ausführung der Pipeline manuell aus. Dieser Schritt stellt sicher, dass Ihr Projekt so eingerichtet ist, dass es aus Ihrem GitHub-Repository heraus erstellt. Die anfängliche Pipelinekonfiguration erstellt die Anwendung und erzeugt ein Buildartefakt.

  1. Navigieren Sie in Azure Devops zu Ihrem Projekt, und wählen Sie dann Pipelines aus.

  2. Wählen Sie die Pipeline mslearn-tailspin-spacegame-web-deploy aus. Wenn Sie dazu aufgefordert werden, wählen Sie Ressourcen autorisieren aus, um die Dienstverbindung zu autorisieren.

    Screenshot of Azure Pipelines showing the pipeline for this project. The pipeline has no runs.

  3. Wählen Sie Pipeline ausführen und dann im Dropdownmenü Branch/Tag den Branch release-pipeline aus. Ausführen auswählen.

    Screenshot of Azure Pipelines showing the location of the Run pipeline button.

  4. Wählen Sie auf der Seite Zusammenfassung Ihren Pipelineauftrag aus, um die Protokolle anzuzeigen.

    Screenshot of Azure Pipelines showing the running job.

  5. Klicken Sie nach Abschluss des Builds auf die Schaltfläche „Zurück“, um zur Zusammenfassungsseite zurückzukehren.

    Screenshot of Azure Pipelines showing how to navigate to the summary page.

  6. Wählen Sie Ihr veröffentlichtes Artefakt aus.

    Screenshot of Azure Pipelines showing the location of the link to the published artifact.

  7. Die Datei Tailspin.Space.Game.Web.zip ist Ihr Buildartefakt. Diese Datei enthält Ihre erstellte Anwendung und deren Abhängigkeiten.

    Screenshot of Azure Pipelines showing the published artifact. The artifact includes a .zip file.

Sie haben jetzt eine Buildpipeline für das Webprojekt Space Game. Als Nächstes fügen Sie eine Bereitstellungsphase hinzu, um Ihr Buildartefakt in Azure App Service bereitzustellen.