Übung: Bereitstellen der Webanwendung in Azure App Service

  • 13 Minuten

In diesem Modul erstellen Sie eine mehrstufige Pipeline, um Ihre Anwendung zu erstellen und in Azure App Service bereitzustellen. Sie lernen Folgendes:

  • Erstellen Sie eine App Service-Instanz zum Hosten Ihrer Webanwendung.
  • Erstellen einer mehrstufigen Pipeline.
  • Bereitstellen in Azure App Service

Erstellen der App Service-Instanz

  1. Melden Sie sich beim Azure-Portal an.

  2. Wählen Sie im linken Bereich App Services aus.

  3. Wählen Sie Erstellen>Web-App aus, um eine neue Web-App zu erstellen.

  4. Geben Sie auf der Registerkarte Grundlagen die folgenden Werte ein.

    Einstellung Wert
    Projektdetails
    Subscription Ihr Abonnement
    Ressourcengruppe Wählen Sie Neu erstellen aus, geben Sie tailspin-space-game-rg ein, und klicken Sie auf OK.
    Instanzendetails
    Name Geben Sie einen eindeutigen Namen an, z. B. tailspin-space-game-1234. Dieser Name muss innerhalb von Azure eindeutig sein. Er wird Bestandteil des Domänennamens. In der Praxis sollten Sie einen Namen wählen, der Ihren Dienst beschreibt. Notieren Sie sich den Namen für die spätere Verwendung.
    Veröffentlichen Code
    Laufzeitstapel .NET 6 (LTS)
    Operating System (Betriebssystem) Linux
    Region Wählen Sie eine Region aus, vorzugsweise eine in Ihrer Nähe.
    Tarife
    Linux-Plan Übernehmen Sie die Standardeinstellung.
    Tarif Wählen Sie im Dropdownmenü den Tarif Basic B1 aus.

  5. Wählen Sie Überprüfen und erstellen aus, überprüfen Sie das Formular, und wählen Sie dann Erstellen aus. Die Bereitstellung dauert einige Augenblicke.

  6. Klicken Sie nach Abschluss der Bereitstellung auf Zu Ressource wechseln. Unter App Service-Essentials werden Details zu Ihrer Bereitstellung angezeigt.

    Screenshot showing deployment details, including the deployment URL.

  7. Wählen Sie die URL aus, um den Status Ihrer App Service-Instanz zu überprüfen.

    A screenshot of a web browser showing the default App Service home page.

Wichtig

Auf der Seite Bereinigen Ihrer Azure DevOps-Umgebung in diesem Modul wird erläutert, wie Sie Ihre App Service-Instanz beseitigen, nachdem Sie damit fertig sind. Durch die Bereinigung wird sichergestellt, dass Azure-Ressourcen nach Abschluss dieses Moduls nicht in Rechnung gestellt werden. Führen Sie unbedingt die Bereinigungsschritte durch, auch wenn Sie dieses Modul nicht abschließen.

Erstellen einer Dienstverbindung

Wichtig

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

  1. Wechseln Sie in Azure DevOps zu Ihrem Projekt Space Game – Web – Release.

  2. Wählen Sie in der unteren linken Ecke der Seite Projekteinstellungen aus.

  3. Klicken Sie unter Pipelines auf Dienstverbindungen.

  4. Wählen Sie Neue Dienstverbindung, anschließend Azure Resource Manager und dann Weiter aus.

  5. Wählen Sie Dienstprinzipal (automatisch) und dann Weiter aus.

  6. Füllen Sie die erforderlichen Felder wie folgt aus: Melden Sie sich bei Ihrem Microsoft-Konto an, wenn Sie dazu aufgefordert werden.

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

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

  8. Wählen Sie Speichern aus.

Hinzufügen der Buildphase zur Pipeline

Eine mehrstufige Pipeline ermöglicht es Ihnen, verschiedene Phasen zu definieren, die Ihre Änderung durchläuft, während sie durch die Pipeline befördert wird. Jede Phase definiert den Agent, die Variablen sowie die Schritte, die zum Ausführen der jeweiligen Phase der Pipeline erforderlich sind. In diesem Abschnitt definieren Sie eine Phase zur Durchführung der Erstellung (Build). Sie definieren eine zweite Phase, um die Webanwendung in App Service bereitzustellen (Deploy).

Um Ihre vorhandene Buildkonfiguration in eine mehrstufige Pipeline umzuwandeln, fügen Sie Ihrer Konfiguration einen stages-Abschnitt hinzu. Anschließend fügen Sie mindestens einen stage-Abschnitt für jede Phase Ihrer Pipeline hinzu. Phasen (stages) untergliedern sich in Aufträge, die wiederum eine Reihe von Schritten darstellen, die nacheinander als Einheit ausgeführt werden.

  1. Öffnen Sie in Ihrem Projekt in Visual Studio Code azure-pipelines.yml, und ersetzen Sie deren Inhalt durch diesen Code:

    trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      displayName: 'Compile Sass assets'

    - task: gulp@1
      displayName: 'Run gulp tasks'

    - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
      displayName: 'Write build info'
      workingDirectory: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

  2. Führen Sie am integrierten Terminal die folgenden Befehle aus, um die Änderungen zu stagen, zu committen und dann in Ihren Remotebranch zu pushen.

    git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline

  3. Navigieren Sie in Azure Pipelines zu Ihrer Pipeline, um die Protokolle anzuzeigen.

  4. Wählen Sie nach Abschluss des Builds die Schaltfläche „Zurück“ aus, um zur Seite „Zusammenfassung“ zurückzukehren und den Status Ihrer Pipeline und des veröffentlichten Artefakts zu überprüfen.

    A screenshot of Azure Pipelines showing the job summary.

Erstellen der Entwicklungsumgebung

Eine Umgebung ist eine abstrakte Darstellung Ihrer Bereitstellungsumgebung. Umgebungen können verwendet werden, um bestimmte Kriterien für Ihr Release zu definieren, z. B. welche Pipeline für die Bereitstellung in der Umgebung autorisiert ist. Umgebungen können auch verwendet werden, um manuelle Genehmigungen für bestimmte Benutzer*innen/Gruppen einzurichten, die notwendig sind, bevor die Bereitstellung fortgesetzt wird.

  1. Klicken Sie in Azure Pipelines auf Umgebungen.

    A screenshot of Azure Pipelines showing the location of the Environments menu option.

  2. Klicken Sie auf Umgebung erstellen.

  3. Geben Sie unter Name den Wert dev ein.

  4. Behalten Sie in den übrigen Feldern die Standardwerte bei.

  5. Klicken Sie auf Erstellen.

Speichern des Namens Ihrer Web-App in einer Pipelinevariablen

Die hier erstellte Bereitstellungsphase verwendet den Namen, um zu bestimmen, welche App Service-Instanz bereitgestellt werden soll, z. B. tailspin-space-game-web-1234.

Sie könnten diese Namen zwar in Ihrer Pipelinekonfiguration hartcodieren, doch wenn Sie ihn als Variable definieren, lässt sich Ihre Konfiguration besser wiederverwenden.

  1. Wählen Sie in Azure DevOps Pipelines und dann Bibliothek aus.

    Screenshot of Azure Pipelines showing the location of the Library menu.

  2. Wählen Sie + Variablengruppe aus, um eine neue Variablengruppe zu erstellen.

  3. Geben Sie Release als Variablengruppennamen ein.

  4. Wählen Sie unter Variablen die Option Hinzufügen aus, um eine neue Variable hinzuzufügen.

  5. Geben Sie WebAppName als Variablennamen und den Namen Ihrer App Service-Instanz als ihren Wert ein: z. B. tailspin-space-game-web-1234.

  6. Wählen Sie Speichern aus.

Hinzufügen der Bereitstellungsphase zur Pipeline

Sie erweitern Ihre Pipeline, indem Sie eine Bereitstellungsphase hinzufügen, um das Space Game in App Service bereitzustellen. Dabei verwenden Sie die Aufgaben download und AzureWebApp@1, um das Buildartefakt herunterzuladen und dann bereitzustellen.

  1. Ersetzen Sie in Visual Studio Code den Inhalt von azure-pipelines.yml durch den folgenden YAML-Code:

    trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      wwwrootDir: 'Tailspin.SpaceGame.Web/wwwroot'
      dotnetSdkVersion: '6.x'

    steps:
    - task: UseDotNet@2
      displayName: 'Use .NET SDK $(dotnetSdkVersion)'
      inputs:
        version: '$(dotnetSdkVersion)'

    - task: Npm@1
      displayName: 'Run npm install'
      inputs:
        verbose: false

    - script: './node_modules/.bin/node-sass $(wwwrootDir) --output $(wwwrootDir)'
      displayName: 'Compile Sass assets'

    - task: gulp@1
      displayName: 'Run gulp tasks'

    - script: 'echo "$(Build.DefinitionName), $(Build.BuildId), $(Build.BuildNumber)" > buildinfo.txt'
      displayName: 'Write build info'
      workingDirectory: $(wwwrootDir)

    - task: DotNetCoreCLI@2
      displayName: 'Restore project dependencies'
      inputs:
        command: 'restore'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Build the project - $(buildConfiguration)'
      inputs:
        command: 'build'
        arguments: '--no-restore --configuration $(buildConfiguration)'
        projects: '**/*.csproj'

    - task: DotNetCoreCLI@2
      displayName: 'Publish the project - $(buildConfiguration)'
      inputs:
        command: 'publish'
        projects: '**/*.csproj'
        publishWebProjects: false
        arguments: '--no-build --configuration $(buildConfiguration) --output $(Build.ArtifactStagingDirectory)/$(buildConfiguration)'
        zipAfterPublish: true

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

- stage: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: dev
    variables:
    - group: Release
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop
          - task: AzureWebApp@1
            displayName: 'Azure App Service Deploy: website'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appName: '$(WebAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

    Beachten Sie den hervorgehobenen Abschnitt und die Verwendung der Aufgaben download und AzureWebApp@1. Die Pipeline ruft den $(WebAppName) aus der zuvor erstellten Variablengruppe ab.

    Beachten Sie auch, dass für die Bereitstellung in der environmentdev-Umgebung verwendet wird.

  2. Fügen Sie im integrierten Terminal azure-pipelines.yml zum Index hinzu. Committen Sie dann die Änderung, und pushen Sie sie auf GitHub.

    git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline

  3. Navigieren Sie in Azure Pipelines zu Ihrer Pipeline, um die Protokolle anzuzeigen.

  4. Wählen Sie nach Abschluss des Builds die Schaltfläche „Zurück“ aus, um zur Seite „Zusammenfassung“ zurückzukehren und den Status Ihrer Phasen zu überprüfen. Beide Phasen wurden in diesem Fall erfolgreich abgeschlossen.

    A screenshot of Azure Pipelines showing the completed Build and Deploy stages.

Anzeigen der bereitgestellten Website in App Service

  1. Wenn die App Service-Registerkarte noch geöffnet ist, aktualisieren Sie einfach die Seite. Navigieren Sie andernfalls im Azure-Portal zu Ihrer Azure App Service-Instanz, und wählen Sie die URL der Instanz aus: beispielsweise https://tailspin-space-game-web-1234.azurewebsites.net.

    Screenshot showing deployment details.

  2. Die Space Game-Website wurde erfolgreich in Azure App Service bereitgestellt.

    Screenshot of web browser showing the Space Game website.

Herzlichen Glückwunsch! Sie haben die Website Space Game erfolgreich mithilfe von Azure Pipelines in Azure App Service bereitgestellt.