Tutorial: Membuat alur multi-panggung dengan Azure DevOps

Artikel
03/25/2024

Layanan Azure DevOps | Azure DevOps Server 2022 - Azure DevOps Server 2019

Anda dapat menggunakan alur multitahap Azure DevOps untuk membagi proses CI/CD Anda menjadi tahapan yang mewakili berbagai bagian siklus pengembangan Anda. Menggunakan alur multitahap memberi Anda lebih banyak visibilitas ke dalam proses penyebaran Anda dan membuatnya lebih mudah untuk mengintegrasikan persetujuan dan pemeriksaan.

Dalam artikel ini, Anda akan membuat dua instans App Service dan membangun alur YAML dengan tiga tahap:

Build: membangun kode sumber dan menghasilkan paket
Dev: sebarkan paket Anda ke situs pengembangan untuk pengujian
Penahapan: menyebarkan ke instans Azure App Service penahapan dengan pemeriksaan persetujuan manual

Dalam skenario dunia nyata, Anda mungkin memiliki tahap lain untuk menyebarkan ke produksi tergantung pada proses DevOps Anda.

Contoh kode dalam latihan ini adalah untuk aplikasi web .NET untuk permainan ruang berpura-pura yang menyertakan papan peringkat untuk menunjukkan skor tinggi. Anda akan menyebarkan ke instans pengembangan dan penahapan Azure Web App untuk Linux.

Prasyarat

Akun GitHub tempat Anda dapat membuat repositori. Buat akun gratis.
Akun Azure dengan langganan aktif. Buat akun secara gratis.
Organisasi dan proyek Azure DevOps. Buat akun gratis.
Kemampuan untuk menjalankan jaringan alur pada agen yang dihosting Microsoft. Anda dapat membeli pekerjaan paralel atau Anda dapat meminta tingkat gratis.

Fork proyek

Fork repositori sampel berikut di GitHub.

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

Membuat instans App Service

Sebelum dapat menyebarkan alur, Anda harus terlebih dahulu membuat instans App Service untuk disebarkan. Anda akan menggunakan Azure CLI untuk membuat instans.

Masuk ke portal Azure.
Dari menu, pilih Cloud Shell dan pengalaman Bash .
Buat angka acak yang membuat nama domain aplikasi web Anda unik. Keuntungan memiliki nilai unik adalah instans App Service Anda tidak akan memiliki nama yang bertentangan dengan pelajar lain yang menyelesaikan tutorial ini.
```
webappsuffix=$RANDOM    
```
Buka perintah dan gunakan az group create perintah untuk membuat grup sumber daya bernama tailspin-space-game-rg yang berisi semua instans App Service Anda. location Perbarui nilai untuk menggunakan wilayah terdekat Anda.
```
az group create --location eastus --name tailspin-space-game-rg
```

Gunakan perintah untuk membuat paket App Service.

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

Di prompt perintah, buat dua instans App Service, satu untuk setiap instans (Dev dan Staging) dengan az webapp create perintah .

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"

Dengan prompt perintah, cantumkan kedua instans App Service untuk memverifikasi bahwa instans tersebut berjalan dengan az webapp list perintah .
```
az webapp list \
  --resource-group tailspin-space-game-rg \
  --query "[].{hostName: defaultHostName, state: state}" \
  --output table
```
Salin nama instans App Service untuk digunakan sebagai variabel di bagian berikutnya.

Membuat proyek dan variabel Azure DevOps Anda

Siapkan proyek Azure DevOps dan alur build Anda. Anda juga akan menambahkan variabel untuk instans pengembangan dan penahapan Anda.

Alur build Anda:

Menyertakan pemicu yang berjalan saat ada perubahan kode ke cabang
Mendefinisikan dua variabel, buildConfiguration dan releaseBranchName
Menyertakan tahap bernama Build yang membangun aplikasi web
Menerbitkan artefak yang akan Anda gunakan di tahap selanjutnya

Menambahkan tahap Build

Masuk ke organisasi Azure DevOps Anda dan buka proyek Anda.
Buka Alur, lalu pilih Alur baru atau Buat alur jika membuat alur pertama Anda.
Lakukan langkah-langkah wizard dengan terlebih dahulu memilih GitHub sebagai lokasi kode sumber Anda.
Anda dapat diarahkan ke GitHub untuk masuk. Jika demikian, masukkan informasi masuk GitHub Anda.
Saat Anda melihat daftar repositori, pilih repositori Anda.
Anda mungkin diarahkan ke GitHub untuk menginstal aplikasi Azure Pipelines. Jika demikian, pilih Setujui & instal.

Saat tab Konfigurasi muncul, pilih Alur pemula.

Ganti isi azure-pipelines.yml dengan kode ini.

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

Saat Anda siap, pilih Simpan dan jalankan.

Menambahkan variabel instans

Di Azure DevOps, buka Pustaka Alur>.
Pilih + Grup variabel.
Di bawah Properti, tambahkan Rilis untuk nama grup variabel.
Buat dua variabel untuk merujuk ke nama host pengembangan dan penahapan Anda. Ganti nilai 1234 dengan nilai yang benar untuk instans Anda.

Nama variabel Contoh nilai

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

WebAppNameStaging tailspin-space-game-web-staging-1234
Pilih Simpan untuk menyimpan variabel Anda.

Nama variabel	Contoh nilai
WebAppNameDev	tailspin-space-game-web-dev-1234
WebAppNameStaging	tailspin-space-game-web-staging-1234

Menambahkan tahap Dev

Selanjutnya, Anda akan memperbarui alur untuk mempromosikan build Anda ke tahap Dev .

Di Alur Azure, buka Alur Alur>.
Pilih Edit di menu kontekstual untuk mengedit alur Anda.

Perbarui azure-pipelines.yml untuk menyertakan tahap Dev. Pada tahap Dev, alur Anda akan:

Jalankan saat tahap Build berhasil karena kondisi
Mengunduh artefak dari drop

Menyebarkan ke Azure App Service dengan koneksi layanan Azure Resource Manager

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 Ubah tugas untuk menggunakan langganan Anda.
1. Pilih Pengaturan untuk tugas tersebut.
2. your-subscription Perbarui nilai untuk Langganan Azure untuk menggunakan langganan Anda sendiri. Anda mungkin perlu mengotorisasi akses sebagai bagian dari proses ini. Jika Anda mengalami masalah saat mengotorisasi sumber daya Anda dalam editor YAML, pendekatan alternatif adalah membuat koneksi layanan.
3. Atur Jenis aplikasi ke Aplikasi Web di Linux.
4. Pilih Tambahkan untuk memperbarui tugas.
Simpan dan jalankan alur Anda.

Menambahkan tahap Pentahapan

Terakhir, Anda akan mempromosikan tahap Dev ke Penahapan. Tidak seperti lingkungan Dev, Anda ingin memiliki lebih banyak kontrol di lingkungan penahapan, Anda akan menambahkan persetujuan manual.

Membuat lingkungan penahapan

Dari Azure Pipelines, pilih Lingkungan.
Pilih Lingkungan baru.
Buat lingkungan baru dengan penahapan nama dan Sumber Daya diatur ke Tidak Ada.
Pada halaman lingkungan penahapan, pilih Persetujuan dan pemeriksaan.
Pilih Persetujuan.
Di Pemberi Persetujuan, pilih Tambahkan pengguna dan grup, lalu pilih akun Anda.
Di Instruksi untuk pemberi persetujuan, tulis Setujui perubahan ini saat siap untuk penahapan.
Pilih Simpan.

Menambahkan tahap baru ke alur

Anda akan menambahkan tahap baru, Staging ke alur yang menyertakan persetujuan manual.

Edit file alur Anda dan tambahkan bagian 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 Ubah tugas di tahap Penahapan untuk menggunakan langganan Anda.
1. Pilih Pengaturan untuk tugas tersebut.
2. your-subscription Perbarui nilai untuk Langganan Azure untuk menggunakan langganan Anda sendiri. Anda mungkin perlu mengotorisasi akses sebagai bagian dari proses ini.
3. Atur Jenis aplikasi ke Aplikasi Web di Linux.
4. Pilih Tambahkan untuk memperbarui tugas.
Buka eksekusi alur. Tonton build saat berjalan. Ketika mencapai Staging, alur menunggu persetujuan rilis manual. Anda juga akan menerima email bahwa Anda memiliki persetujuan yang menunggu alur.
Tinjau persetujuan dan izinkan alur berjalan.

Membersihkan sumber daya

Jika Anda tidak akan terus menggunakan aplikasi ini, hapus grup sumber daya di portal Azure dan proyek di Azure DevOps dengan langkah-langkah berikut:

Untuk membersihkan grup sumber daya Anda:

Buka portal Microsoft Azure dan masuk.
Dari bilah menu, pilih Cloud Shell. Jika diminta, pilih pengalaman Bash.
Jalankan perintah az group delete berikut untuk menghapus grup sumber daya yang Anda gunakan, tailspin-space-game-rg.
```
az group delete --name tailspin-space-game-rg
```

Untuk menghapus proyek Azure DevOps Anda, termasuk alur build:

Di Azure DevOps, buka proyek Anda.
Pilih Pengaturan proyek.
Di detail Proyek, pilih Hapus.

Tutorial: Membuat alur multi-panggung dengan Azure DevOps

Prasyarat

Fork proyek

Membuat instans App Service

Membuat proyek dan variabel Azure DevOps Anda

Menambahkan tahap Build

Menambahkan variabel instans

Menambahkan tahap Dev

Menambahkan tahap Pentahapan

Membuat lingkungan penahapan

Menambahkan tahap baru ke alur

Membersihkan sumber daya

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan:

Tutorial: Membuat alur multi-panggung dengan Azure DevOps

Prasyarat

Fork proyek

Membuat instans App Service

Membuat proyek dan variabel Azure DevOps Anda

Menambahkan tahap Build

Menambahkan variabel instans

Menambahkan tahap Dev

Menambahkan tahap Pentahapan

Membuat lingkungan penahapan

Menambahkan tahap baru ke alur

Membersihkan sumber daya

Konten terkait

Saran dan Komentar

Saran dan Komentar

Sumber Daya Tambahan: