Latihan - Membangun beberapa konfigurasi menggunakan template

Selesai

Dalam latihan sebelumnya, Anda menerapkan alur yang membangun situs web Space Game. Anda mulai dengan skrip yang menjalankan setiap tindakan build dan memetakan setiap tindakan ke tugas alur yang sesuai. Output alur adalah file .zip yang berisi aplikasi web yang dikompilasi.

Dalam latihan ini, Anda akan menggunakan template untuk menentukan tugas build yang dapat membangun konfigurasi apa pun yang ditentukan dalam file proyek. Template memungkinkan Anda menentukan logika cukup sekali, lalu menggunakannya kembali beberapa kali. Template menggabungkan konten beberapa file YAML ke dalam satu alur.

Tip

Langkah dalam modul ini bersifat opsional. Jika Anda tidak ingin mempelajari tentang templat saat ini, lanjutkan ke langkah berikutnya, Bersihkan lingkungan Azure DevOps Anda. Untuk informasi selengkapnya tentang templat, lihat Jenis templat &penggunaan.

Mari kita mulai cek masuk dengan Mara dan Amita.

Demo

Karena tidak sabar untuk membagikan hasilnya, Mara melacak Amita untuk menunjukkan kepadanya alur build.

Amita: Saya terkesan Anda menyelesaikannya begitu cepat. Bahkan, saya hanya datang untuk melihat-lihat karena saya mendapat email yang mengatakan bahwa build sudah siap. Terima kasih! Saya perhatikan bahwa alur hanya membangun konfigurasi Rilis. Kami juga menggunakan build Debug sehingga kami bisa mengambil informasi tambahan jika aplikasi mengalami crash. Bisakah kita menambahkannya?

Mara: Tentu saja. Saya lupa mempertimbangkan build Debug saat menyiapkan ini. Bagaimana kalau bekerja sama dan menambahkannya?

Amita: Anda menunjukkan file YAML yang menentukan langkah-langkah build, tetapi saya tidak yakin saya tahu cara memodifikasinya.

Mara: Tidak apa-apa. Anda bisa menonton saat saya mengetik. Kita bisa memikirkannya bersama-sama.

Bagaimana Anda dapat menentukan kedua konfigurasi build?

Pertimbangkan tugas berikut yang membangun dan menerbitkan konfigurasi Rilis proyek web Space Game. (Jangan tambahkan kode ini ke file azure-pipelines.yml Anda.)

- 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

Untuk membangun konfigurasi Debug, Anda mungkin mengulangi dua tugas ini, tetapi mengganti Release dengan Debug.

Melakukannya akan memberi Anda hasil yang Anda inginkan, tetapi apa yang terjadi ketika build Anda menjadi lebih kompleks atau persyaratan Anda berubah? Anda harus menemukan dan mengubah kedua variasi setiap tugas build secara manual. Setelah menambahkan persyaratan build tambahan, Anda juga perlu membuat dua tugas, satu untuk konfigurasi Debug dan satu untuk Rilis, guna memenuhi persyaratan tersebut.

Solusi yang lebih baik adalah menggunakan template.

Apa itu templat?

Sebuah template memungkinkan Anda menentukan tugas build umum cukup sekali dan menggunakan kembali tugas tersebut beberapa kali.

Anda akan memanggil template dari alur induk sebagai langkah build. Anda dapat meneruskan parameter ke dalam template dari alur induk.

Mara dapat menentukan tugas untuk membangun dan menerbitkan aplikasi sebagai template, lalu menerapkan template tersebut ke setiap konfigurasi yang dibutuhkan.

Menentukan template

Ingat bahwa template memungkinkan Anda menentukan tugas build umum satu kali dan menggunakan kembali tugas tersebut beberapa kali. Anda memanggil template dari template induknya sebagai langkah build dan meneruskan parameter ke dalam template dari alur induk.

Sekarang Anda akan membuat template yang dapat membangun konfigurasi apa pun yang ditentukan dalam file proyek.

  1. Dari konsol terintegrasi Visual Studio Code, di akar proyek Anda, buat direktori template.

    mkdir templates
    

    Dalam praktiknya, Anda dapat meletakkan file template di lokasi mana pun. Anda tidak perlu memasukkannya ke direktori template.

  2. Di Visual Studio Code, pilih File > File Baru. Selanjutnya, untuk menyimpan file kosong sebagai build.yml di direktori template proyek Anda, pilih File > Simpan. Contohnya adalah ~/mslearn-tailspin-spacegame-web/templates.

    Penting

    Seperti sebelumnya, di Windows, di daftar Simpan sebagai jenis, pilih YAML.

  3. Di Visual Studio Code, tambahkan kode ini ke build.yml:

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

    Tugas-tugas ini terlihat seperti tugas yang Anda tentukan sebelumnya untuk membangun dan menerbitkan aplikasi; tetapi dalam templat, Anda bekerja dengan parameter input secara berbeda dari yang Anda gunakan dengan variabel normal. Berikut adalah dua perbedaan:

    • Dalam file template, gunakan bagian parameters, bukan variables untuk menentukan input.
    • Dalam file template, gunakan sintaks${{ }}, bukan $() untuk membaca nilai parameter. Saat Anda membaca nilai parameter, Anda akan menyertakan bagian parameters dalam namanya. Contohnya,${{ parameters.buildConfiguration }}.

Memanggil template dari alur

Sekarang Anda akan memanggil template yang baru saja Anda buat dari alur. Anda akan melakukannya satu kali untuk konfigurasi Debug, lalu mengulangi proses untuk konfigurasi Rilis.

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

    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'
    
    - template: templates/build.yml
      parameters:
        buildConfiguration: 'Debug'
    
    - template: templates/build.yml
      parameters:
        buildConfiguration: 'Release'
    
    - task: PublishBuildArtifacts@1
      displayName: 'Publish Artifact: drop'
      condition: succeeded()
    
    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'
    
    - template: templates/build.yml
      parameters:
        buildConfiguration: 'Debug'
    
    - template: templates/build.yml
      parameters:
        buildConfiguration: 'Release'
    
    - task: PublishBuildArtifacts@1
      displayName: 'Publish Artifact: drop'
      condition: succeeded()
    

    File ini terlihat seperti aslinya, kecuali mengganti tugas build dan terbitkan dengan panggilan ke templat yang melakukan tugas yang sama.

    Anda akan melihat bahwa template dipanggil satu kali untuk setiap konfigurasi. Untuk meneruskan nama konfigurasi ke template, setiap tugas template menggunakan argumen parameters.

Menjalankan alur

Sekarang Anda akan mendorong perubahan ke GitHub dan melihat alur dijalankan.

  1. Di terminal terintegrasi, tambahkan azure-pipelines.yml dan templates/build.yml ke indeks, terapkan perubahan, dan dorong perubahan ini hingga ke GitHub.

    git add azure-pipelines.yml templates/build.yml
    git commit -m "Support build configurations"
    git push origin build-pipeline
    
  2. Dari Azure Pipelines, lacak build melalui setiap langkah seperti yang Anda lakukan sebelumnya.

    Saat alur berjalan, Anda akan melihat bahwa proses memperluas tugas dalam template. Tugas yang membangun dan menerbitkan proyek dijalankan dua kali, sekali untuk setiap konfigurasi build.

    Cuplikan layar Azure Pipelines memperlihatkan tugas templat yang diperluas. Termasuk tugas bangun dan terbitkan untuk konfigurasi Debug dan Rilis.

  3. Setelah build selesai, kembali ke halaman ringkasan dan pilih artefak yang diterbitkan seperti yang Anda lakukan sebelumnya. Perluas folder drop.

    Anda akan melihat bahwa alur menghasilkan file .zip untuk konfigurasi Debug dan konfigurasi Rilis.

    Cuplikan layar Azure Pipelines yang memperlihatkan aplikasi paket untuk konfigurasi Debug dan Rilis.

Gabungkan cabang ke dalam utama

Pada titik ini, Anda memiliki alur build yang berfungsi dan mencapai semua yang dibutuhkan Mara saat ini.

Dalam praktiknya, Anda akan mengirimkan permintaan pull yang menggabungkan cabang build-pipeline Anda ke cabang main.

Kita akan melewati langkah itu untuk saat ini. Dalam modul berikutnya, Anda akan mempelajari beberapa cara untuk berkolaborasi dengan tim Anda di GitHub, termasuk cara mengirimkan, meninjau, dan menggabungkan permintaan pull.