教學課程：使用 Azure DevOps 建立多階段管線

發行項
04/04/2024

Azure DevOps Services | Azure DevOps Server 2022 - Azure DevOps Server 2019

您可以使用 Azure DevOps 多階段管線，將您的 CI/CD 程式分割成代表開發週期不同部分的階段。使用多階段管線可讓您更瞭解部署程式，並讓您更輕鬆地整合核准和檢查。

在本文中，您將建立兩個 App Service 實例，並建置具有三個階段的 YAML 管線：

建置：建置原始程式碼併產生套件
開發：將您的套件部署至開發網站以進行測試
預備：使用手動核准檢查部署到預備 Azure App 服務實例

在真實世界的案例中，您可能會有另一個階段，視DevOps程式而定，部署至生產環境。

這個練習中的範例程式代碼適用於包含排行榜以顯示高分的假裝空間遊戲的 .NET Web 應用程式。您將部署至適用於 Linux 的 Azure Web 應用程式開發和預備實例。

必要條件

您可以在其中建立存放庫的 GitHub 帳戶。免費建立一個。
具有有效訂用帳戶的 Azure 帳戶。免費建立帳戶。
Azure DevOps 組織和專案。免費建立一個。
能夠在 Microsoft 裝載的代理程式上執行管線。您可以購買平行作業，也可以要求免費層。

派生專案

在 GitHub 派生下列範例存放庫。

https://github.com/MicrosoftDocs/mslearn-tailspin-spacegame-web-deploy

建立 App Service 執行個體

您必須先建立要部署的 App Service 實例，才能部署管線。您將使用 Azure CLI 來建立實例。

登入 Azure 入口網站。
從功能表中，選取 [Cloud Shell ] 和 [Bash 體驗]。
產生可讓您的 Web 應用程式功能變數名稱成為唯一的亂數。具有唯一值的優點是，您的 App Service 實例不會與其他完成本教學課程的學習者發生名稱衝突。
```
webappsuffix=$RANDOM    
```
開啟命令提示字元，並使用 az group create 命令來建立名為 tailspin-space-game-rg 的資源群組，其中包含您所有的 App Service 實例。 location更新值以使用最接近的區域。
```
az group create --location eastus --name tailspin-space-game-rg
```

使用命令提示字元建立App Service方案。

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

在命令提示字元中，使用命令建立兩個 App Service 實例，每個實例各建立一個實例（Dev 和 Staging）。az webapp create

az webapp create \
  --name tailspin-space-game-web-dev-$webappsuffix \
  --resource-group tailspin-space-game-rg \
  --plan tailspin-space-game-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-asp \
  --runtime "DOTNET|6.0"

使用命令提示字元，列出這兩個 App Service 實例，以確認它們是否使用命令執行 az webapp list 。

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

複製 App Service 實例的名稱，以在下一節中當做變數使用。

建立您的 Azure DevOps 專案和變數

設定您的 Azure DevOps 專案和組建管線。您也會為開發和預備實例新增變數。

您的組建管線：

包含在分支有程式代碼變更時執行的觸發程式
定義兩個變數， buildConfiguration 和 releaseBranchName
包含名為 Build 的階段，以建置 Web 應用程式
發佈您將在稍後階段使用的成品

新增建置階段

登入您的 Azure DevOps 組織並前往您的專案。
移至 [管線]，然後在建立第一個管線時選取 [ 新增管線 ] 或 [建立管線 ]。
執行精靈的步驟，首先選取 [GitHub] 作為您的原始程式碼位置。
系統可能會將您重新導向至 GitHub 以進行登入。若是如此，請輸入 GitHub 認證。
當您看到存放庫清單時，請選取您的存放庫。
系統可能會將您重新導向至 GitHub，以安裝 Azure Pipelines 應用程式。如果發生此情況，請選取 [核准並安裝]。

當 [設定 ] 索引卷標出現時，請選取 [ 入門管線]。

將此程式代碼取代azure-pipelines.yml的內容。

trigger:
- '*'

variables:
  buildConfiguration: 'Release'
  releaseBranchName: '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

當您準備好時，請選取 [儲存並執行]。

新增實例變數

在 Azure DevOps 中，移至 [管線連結>庫]。
選取 [+ 變數群組]。
在 [屬性] 底下，新增變數組名的 [發行]。
建立兩個變數來參考您的開發和預備主機名。以實例的正確值取代值 1234 。

變數名稱範例值

WebAppNameDev tailspin-space-game-web-dev-1234

WebAppNameStaging tailspin-space-game-web-staging-1234
選取 [ 儲存] 以儲存變數。

變數名稱	範例值
WebAppNameDev	tailspin-space-game-web-dev-1234
WebAppNameStaging	tailspin-space-game-web-staging-1234

新增開發階段

接下來，您將更新管線，將組建升級至開發階段。

在 Azure Pipelines 中，移至 [管線管線>]。
選取 內容選單中的 [編輯 ]，以編輯您的管線。

更新 azure-pipelines.yml 以包含開發階段。在開發階段中，您的管線會：

當建置階段因為條件而成功時執行
從下載成品 drop

使用 Azure Resource Manager 服務連線部署至 Azure App 服務

trigger:
- '*'

variables:
  buildConfiguration: 'Release'
  releaseBranchName: '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: 'Dev'
  displayName: 'Deploy to the dev environment'
  dependsOn: Build
  condition:  succeeded()
  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: 'your-subscription'
              appType: 'webAppLinux'
              appName: '$(WebAppNameDev)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

變更工作 AzureWebApp@1 以使用您的訂用帳戶。
1. 為工作選取 [設定]。
2. your-subscription更新 Azure 訂用帳戶的值以使用您自己的訂用帳戶。您可能需要在此程式中授權存取權。如果您在 YAML 編輯器中遇到授權資源的問題，替代方法是建立服務連線。
3. 將 應用程式類型 設定為Linux上的Web應用程式。
4. 選取 [ 新增 ] 以更新工作。
儲存並執行您的管線。

新增預備階段

最後，您將將開發階段升階為預備階段。不同於開發環境，您想要在預備環境中擁有更多控制權，您將新增手動核准。

建立預備環境

從 Azure Pipelines 中，選取 [環境]。
選取 [新增環境]。
建立名為預備環境的新環境，並將 [資源] 設定為 [無]。
在預備環境頁面上，選取 [核准並檢查]。
選取 [核准]。
在 [核准者] 中，選取 [ 新增使用者和群組]，然後選取您的帳戶。
在 核准者的指示中，撰寫 [ 核准此變更] 以備妥預備。
選取 [儲存]。

將新階段新增至管線

您會將新的階段 Staging 新增至包含手動核准的管線。

編輯管線檔案並新增區 Staging 段。

trigger:
- '*'

variables:
  buildConfiguration: 'Release'
  releaseBranchName: '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: 'Dev'
  displayName: 'Deploy to the dev environment'
  dependsOn: Build
  condition:  succeeded()
  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: 'your-subscription'
              appType: 'webAppLinux'
              appName: '$(WebAppNameDev)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

- stage: 'Staging'
  displayName: 'Deploy to the staging environment'
  dependsOn: Dev
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: staging
    variables:
    - group: 'Release'
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop
          - task: AzureWebApp@1
            displayName: 'Azure App Service Deploy: website'
            inputs:
              azureSubscription: 'your-subscription'
              appType: 'webAppLinux'
              appName: '$(WebAppNameDev)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

AzureWebApp@1變更預備階段中的工作以使用您的訂用帳戶。
1. 針對工作選取 [設定]。
2. your-subscription更新 Azure 訂用帳戶的值以使用您自己的訂用帳戶。您可能需要在此程式中授權存取權。
3. 將 應用程式類型 設定為Linux上的Web應用程式。
4. 選取 [ 新增 ] 以更新工作。
移至管線執行。監看組建執行時。到達 Staging時，管線會等候手動發行核准。您也會收到您有管線擱置核准的電子郵件。
檢閱核准並允許管線執行。

清除資源

如果您不打算繼續使用此應用程式，請使用下列步驟刪除 Azure 入口網站中的資源群組和 Azure DevOps 中的專案：

若要清除您的資源群組：

請前往 Azure 入口網站並登入。
從功能表列中，選取 [Cloud Shell]。當出現提示時，請選取 Bash 體驗。
執行下列 az group delete 命令，以刪除您使用的資源群組 tailspin-space-game-rg。
```
az group delete --name tailspin-space-game-rg
```

若要刪除您的 Azure DevOps 專案，包括組建管線：

在 Azure DevOps 中，瀏覽至您的專案。
選取 [專案設定]。
在 [ 項目詳細數據] 中，選取 [ 刪除]。

教學課程：使用 Azure DevOps 建立多階段管線

必要條件

派生專案

建立 App Service 執行個體

建立您的 Azure DevOps 專案和變數

新增建置階段

新增實例變數

新增開發階段

新增預備階段

建立預備環境

將新階段新增至管線

清除資源

意見反應

意見反應

其他資源

教學課程：使用 Azure DevOps 建立多階段管線

必要條件

派生專案

建立 App Service 執行個體

建立您的 Azure DevOps 專案和變數

新增建置階段

新增實例變數

新增開發階段

新增預備階段

建立預備環境

將新階段新增至管線

清除資源

相關內容

意見反應

意見反應

其他資源