Latihan - Menerbitkan hasil ke alur

Selesai

Pada titik ini, Anda dapat membangun proyek web Space Game melalui alur.

Tetapi ke mana hasil build pergi? Saat ini, output build tetap berada di server build sementara. Mara memerlukan cara untuk menyerahkan build ini kepada Amita sehingga dia dapat mulai menguji.

Anda dapat menyimpan artefak build di Azure Pipelines sehingga artefak tersebut tersedia untuk orang lain di tim Anda setelah build selesai, yang akan Anda lakukan di sini. Sebagai tambahan, Anda juga akan melakukan refaktor terhadap konfigurasi build untuk menggunakan variabel agar konfigurasi lebih mudah dibaca dan selalu diperbarui.

Catatan

Azure Pipelines memungkinkan Anda menyebarkan aplikasi bawaan secara otomatis ke lingkungan pengujian atau produksi yang berjalan di cloud atau di pusat data Anda. Kini, tujuan Mara hanya untuk menghasilkan build yang dapat dia serahkan ke QA menggunakan proses yang ada.

Menerbitkan build ke alur

Di .NET, Anda dapat mengemas aplikasi sebagai file .zip. Anda kemudian bisa menggunakan tugas PublishBuildArtifacts@1 bawaan untuk menerbitkan file .zip ke Azure Pipelines.

1. Di Visual Studio Code, ubah azure-pipelines.yml seperti yang Anda lihat di sini:

   trigger:
   - '*'
   
   pool:
     name: 'Default' #replace if needed with name of your agent pool
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     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: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Publish the project - Release'
     inputs:
       command: 'publish'
       projects: '**/*.csproj'
       publishWebProjects: false
       arguments: '--no-build --configuration Release --output $(Build.ArtifactStagingDirectory)/Release'
       zipAfterPublish: true
   
   - task: PublishBuildArtifacts@1
     displayName: 'Publish Artifact: drop'
     condition: succeeded()
   

   trigger:
   - '*'
   
   pool:
     vmImage: ubuntu-latest
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       version: '6.x'
   
   - task: Npm@1
     displayName: 'Run npm install'
     inputs:
       verbose: false
   
   - script: './node_modules/.bin/node-sass Tailspin.SpaceGame.Web/wwwroot --output Tailspin.SpaceGame.Web/wwwroot'
     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: Tailspin.SpaceGame.Web/wwwroot
   
   - task: DotNetCoreCLI@2
     displayName: 'Restore project dependencies'
     inputs:
       command: 'restore'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Build the project - Release'
     inputs:
       command: 'build'
       arguments: '--no-restore --configuration Release'
       projects: '**/*.csproj'
   
   - task: DotNetCoreCLI@2
     displayName: 'Publish the project - Release'
     inputs:
       command: 'publish'
       projects: '**/*.csproj'
       publishWebProjects: false
       arguments: '--no-build --configuration Release --output $(Build.ArtifactStagingDirectory)/Release'
       zipAfterPublish: true
   
   - task: PublishBuildArtifacts@1
     displayName: 'Publish Artifact: drop'
     condition: succeeded()
   

   Versi azure-pipelines.yml ini terlihat seperti versi sebelumnya, tetapi memiliki dua tugas tambahan.

   Tugas pertama menggunakan tugas DotNetCoreCLI@2 untuk memublikasikan atau mengemas hasil pembuatan aplikasi (termasuk dependensinya) ke dalam folder. Argumen zipAfterPublish menentukan untuk menambahkan hasil bawaan ke file .zip.

   Tugas kedua menggunakan tugas PublishBuildArtifacts@1 untuk menerbitkan file .zip ke Azure Pipelines. Argumen condition menentukan untuk menjalankan tugas hanya saat tugas sebelumnya berhasil. succeeded() adalah kondisi default, jadi Anda tidak perlu menentukannya, tetapi kami menunjukkannya di sini untuk menunjukkan penggunaannya.

2. Dari terminal terintegrasi, tambahkan azure-pipelines.yml ke indeks, terapkan perubahan, dan dorong perubahan ke GitHub.

   Tip

   Sebelum Anda menjalankan perintah Git ini, ingatlah untuk menyimpan azure-pipelines.yml.

   git add azure-pipelines.yml
   git commit -m "Add publish tasks"
   git push origin build-pipeline
   

3. Seperti yang Anda lakukan sebelumnya, dari Azure Pipelines, lacak build di setiap langkah.

4. Saat alur selesai, kembali ke ringkasan build.

5. Di bawah Terkait, ada 1 diterbitkan.

   

6. Pilih artefak.

7. Perluas folder drop.

   Anda akan melihat file .zip yang berisi aplikasi bawaan dan dependensinya:

   

   Jika ingin mencoba latihan opsional, Anda dapat mengunduh file .zip ini ke komputer Anda dan menjelajahi isinya.

Menentukan variabel untuk meningkatkan keterbacaan

Mara berhenti sejenak untuk memeriksa pekerjaannya. Konfigurasi build melakukan apa yang dia butuhkan, tetapi dia ingin memastikan Andy dan orang lain dapat dengan mudah membantu menjaganya tetap terbarui dan memperluasnya.

Variabel memungkinkan Anda untuk menentukan nilai satu kali dan merujuk ke nilai tersebut di seluruh jalur Anda. Azure Pipelines mengganti setiap variabel dengan nilainya saat ini saat alur berjalan.

Sama seperti dalam bahasa pemrograman lain, variabel memungkinkan Anda melakukan hal-hal seperti:

• Menentukan nilai yang mungkin berubah di antara eksekusi alur Anda.
• Menyimpan informasi yang diulang di seluruh alur Anda, seperti nomor versi atau jalur file, di satu tempat. Dengan begitu, Anda tidak perlu memperbarui semua kemunculan saat Anda perlu mengubahnya.

Azure Pipelines menyediakan banyak variabel bawaan. Variabel ini menjelaskan aspek proses build, seperti pengidentifikasi build dan nama direktori tempat perangkat lunak Anda dibangun dan ditahapkan.

Anda juga dapat menentukan variabel Anda sendiri. Berikut adalah contoh yang menunjukkan variabel bernama buildConfiguration yang mendefinisikan konfigurasi build Rilis:

variables:
  buildConfiguration: 'Release'

Gunakan variabel saat Anda mengulangi nilai yang sama beberapa kali atau ketika nilai, seperti versi dependensi, mungkin berubah.

Anda tidak perlu membuat variabel untuk setiap bagian konfigurasi build Anda. Bahkan, terlalu banyak variabel dapat membuat kode alur Anda lebih sulit untuk dibaca dan dimengerti orang lain.

Luangkan waktu sejenak untuk memeriksa azure-pipelines.yml. Perhatikan bahwa nilai-nilai berikut diulang:

• Konfigurasi bangun: Release.
• Lokasi direktori wwwroot: Tailspin.SpaceGame.Web/wwwroot.
• Versi .NET SDK: 6.x.

Anda sekarang menggunakan variabel untuk menentukan sekali nilai-nilai tersebut. Anda kemudian mereferensikan variabelnya di seluruh alur.

1. Di Visual Studio Code, ubah azure-pipelines.yml seperti yang Anda lihat di sini:

   trigger:
   - '*'
   
   pool:
     name: 'Default' #replace if needed with name of your agent pool
   
   variables:
     buildConfiguration: 'Release'
     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
   
   - task: PublishBuildArtifacts@1
     displayName: 'Publish Artifact: drop'
     condition: succeeded()
   

   trigger:
   - '*'
   
   pool:
     vmImage: ubuntu-latest
   
   variables:
     buildConfiguration: 'Release'
     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
   
   - task: PublishBuildArtifacts@1
     displayName: 'Publish Artifact: drop'
     condition: succeeded()
   

   Perhatikan bagian variables, yang mendefinisikan variabel ini:

   • buildConfiguration: Menentukan konfigurasi build.
   • wwwrootDir: Menentukan jalur ke direktori wwwroot.
   • dotnetSdkVersion: Menentukan versi SDK .NET yang akan digunakan.

   Untuk mereferensikan variabel ini, gunakan sintaks $() seperti yang Anda lakukan untuk variabel bawaan. Berikut adalah langkah yang menjalankan node-Sass untuk mengonversi file Sass ke CSS. Untuk mendapatkan jalur ke direktori wwwroot, ini merujuk pada variabel wwwrootDir.

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

   Perintah skrip menggunakan variabel tersebut untuk menentukan direktori sumber bagi file Sass dan direktori tempat menulis file CSS. Variabel tersebut juga digunakan untuk menentukan nama tugas yang ditampilkan di antarmuka pengguna.

2. Dari terminal terintegrasi, tambahkan azure-pipelines.yml ke indeks, terapkan perubahan, dan dorong perubahan ke GitHub.

   git add azure-pipelines.yml
   git commit -m "Refactor common variables"
   git push origin build-pipeline
   

3. Dari Azure Pipelines, lacak build di setiap langkah.

   Anda akan melihat bahwa variabel diganti dengan nilainya saat build berjalan. Misalnya, berikut adalah tugas UseDotNet@2 yang mengatur versi SDK .NET yang digunakan.

   

   Seperti sebelumnya, untuk melihat artefak saat build selesai, Anda dapat membuka ringkasan build.

Selamat! Anda sudah berhasil menggunakan Azure Pipelines dan membuat artefak build pertama Anda.