Latihan - Membuat alurnya

Selesai

Pada titik ini, Mara telah menentukan konfigurasi build untuk situs web Space Game. Sekarang, giliran Anda; Anda akan membuat alur dan menghasilkan artefak build pertama Anda.

Seperti yang Anda lihat, Mara menggunakan file YAML untuk menentukan build. Saat Anda membuat alur, proses akan meminta file YAML Anda. Proyek belum memiliki file ini.

Saat Anda tidak menyediakan file YAML awal untuk proyek Anda, Azure Pipelines dapat membuatnya untuk Anda berdasarkan jenis aplikasi. Di sini, Anda akan membuat aplikasi ASP.NET Core, tetapi Azure Pipelines juga menyediakan konfigurasi build pemula untuk jenis proyek lain, termasuk Java, Go, dan lainnya.

Membuat alur

1. Di Azure DevOps, buka proyek Anda.

2. Entah dari halaman proyek atau dari panel kiri, pilih Pipelines.

3. Pilih Buat Alur (atau Alur baru jika ini bukan alur pertama dalam proyek).

4. Di tab Sambungkan, pilih GitHub.

   Jika diminta, masukkan kredensial GitHub Anda.

5. Di tab Pilih, pilih repositori mslearn-tailspin-spacegame-web Anda.

6. Untuk menginstal aplikasi Azure Pipelines, Anda mungkin diarahkan ke GitHub. Jika demikian, gulir ke bagian bawah, dan pilih Setujui & Instal.

7. Di tab Konfigurasi, pilih ASP.NET Core.

   Catatan

   Jika Anda tidak melihat opsi ini, pilih Tampilkan lebih banyak. Jangan pilih ASP.NET Core (.NET Framework).

   

8. Di tab Tinjau, perhatikan konfigurasi build awal.

   

   Ini adalah konfigurasi yang sangat dasar yang disediakan Azure DevOps untuk Anda berdasarkan jenis aplikasi Anda, ASP.NET Core. Konfigurasi default menggunakan agen yang dihosting Microsoft.

   Ganti teks vmImage: ubuntu-latest dengan name: Default (atau nama kumpulan agen Anda jika Anda menentukan kumpulan yang berbeda saat menyiapkan rahasia Repositori Codespaces).

9. Di tab Tinjau, pilih Simpan dan jalankan. Untuk menerapkan perubahan Anda ke GitHub dan memulai alur, pilih Terapkan langsung ke cabang utama dan pilih Simpan dan jalankan untuk kedua kalinya. Jika Anda diminta untuk memberikan izin dengan pesan seperti This pipeline needs permission to access a resource before this run can continue, pilih Tampilkan dan ikuti perintah untuk mengizinkan akses.

Tonton alur yang dijalankan

Di bagian Pekerjaan, pilih Pekerjaan. Berikutnya, lacak proses build melalui setiap langkah. Untuk melihat output pekerjaan sebagai file teks setelah build selesai, Anda juga dapat memilih Lihat log mentah.

Jika alur Anda tidak dimulai dengan cepat, verifikasi bahwa Codespace masih berjalan. Codespace akan dimatikan setelah 30 menit dan mungkin perlu dimulai ulang.

Jika status alur Anda tetap Antre dan tidak beralih ke Berjalan setelah beberapa saat, Periksa pekerjaan paralel Anda dan minta hibah gratis. Jika Anda tidak memiliki akses ke pekerjaan paralel, Anda dapat memulai modul dengan Codespaces.

Di sini, Anda akan melihat langkah-langkah yang dibuat definisi build. Langkah ini menyiapkan mesin virtual, mengambil kode sumber terbaru dari GitHub, lalu membangun aplikasi.

Konfigurasi ini adalah awal yang bagus, karena sekarang Anda memiliki tempat untuk menambahkan tugas build. Anda masih perlu memperbaruinya untuk memenuhi kebutuhan tim Tailspin, seperti untuk memangkas file JavaScript dan CSS.

Tip

Periksa email Anda. Anda mungkin telah menerima pemberitahuan build dengan hasil yang Anda jalankan. Anda dapat menggunakan pemberitahuan ini untuk memberi tahu anggota tim setelah build selesai, dan memberi tahu apakah setiap build lulus atau gagal.

Menambahkan tugas build

Sekarang setelah Anda memiliki proses build yang berfungsi, Anda dapat mulai menambahkan tugas build.

Ingatlah bahwa Anda bekerja dari cabang main. Untuk menyimpan pekerjaan, Anda akan membuat cabang bernama build-pipeline. Cabang ini memberi Anda tempat untuk bereksperimen dan membuat build Anda berfungsi sepenuhnya tanpa memengaruhi tim lainnya.

Anda juga dapat menambahkan tugas build ke azure-pipelines.yml langsung dari Azure Pipelines. Azure Pipelines menerapkan perubahan Anda langsung ke cabang Anda. Di sini, Anda akan mengubah azure-pipelines.yml secara lokal dan mendorong—atau mengunggah—perubahan Anda ke GitHub. Melakukannya dengan cara ini memungkinkan Anda mempraktikkan keterampilan Git Anda. Tonton alur secara otomatis membangun aplikasi saat Anda mendorong perubahan.

Dalam praktiknya, Anda dapat menambahkan tugas build satu per satu, mendorong perubahan, dan menonton build run. Di sini, Anda akan menambahkan semua tugas build yang kami identifikasi sebelumnya pada satu waktu.

Catatan

Anda akan menjalankan beberapa perintah Git. Jangan khawatir jika Anda baru menggunakan Git. Kami akan menunjukkan apa yang harus dilakukan. Kami juga akan membahas lebih detail tentang Git di modul mendatang.

1. Di Visual Studio Code, buka terminal terintegrasi. Pastikan Anda pergi ke cabang main di repo Anda dan kemudian ikuti langkah-langkahnya.

2. Untuk mengambil perubahan terbaru dari GitHub dan memperbarui cabang main, jalankan perintah git pull ini.

   git pull origin main
   

   Anda akan melihat dari output bahwa Git mengambil file bernama azure-pipelines.yml. Ini adalah konfigurasi alur awal yang dibuat Azure Pipelines untuk Anda. Saat Anda menyiapkan alur, Azure Pipelines menambahkan file ini ke repositori GitHub Anda.

3. Untuk membuat cabang bernama build-pipeline, jalankan perintah git checkout ini:

   git checkout -B build-pipeline
   

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

   trigger:
   - '*'
   
   pool:
     name: 'Default' # Replace Default with the name of your agent pool if you used a different pool
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       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'
   

   trigger:
   - '*'
   
   pool:
     vmImage: ubuntu-latest
   
   variables:
     buildConfiguration: 'Release'
   
   steps:
   - task: UseDotNet@2
     displayName: 'Use .NET SDK 6.x'
     inputs:
       packageType: sdk
       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'
   

   Di bawah bagian steps, Anda melihat tugas pembangunan yang dipetakan ke setiap perintah skrip yang kami identifikasi sebelumnya.

   Azure Pipelines menyediakan tugas build bawaan yang memetakan ke banyak aktivitas build umum. Misalnya, tugas DotNetCoreCLI@2 memetakan ke utilitas baris perintah dotnet. Alur menggunakan DotNetCoreCLI@2 dua kali: satu kali untuk memulihkan, atau menginstal dependensi proyek, dan satu kali untuk membangun proyek.

   Ingatlah bahwa tidak semua aktivitas build dipetakan ke tugas bawaan. Misalnya, tidak ada tugas bawaan yang menjalankan utilitas node-Sass, atau menulis info build ke file teks. Untuk menjalankan perintah sistem umum, gunakan tugas CmdLine@2 atau script. Alur ini menggunakan tugas script karena ini merupakan pintasan umum untuk CmdLine@2.

   Dalam langkah build yang menulis informasi tentang build ke file, perhatikan elemen-elemen ini:

   • $(Build.DefinitionName)
   • $(Build.BuildId)
   • $(Build.BuildNumber)

   Elemen-elemen ini adalah variabel bawaan yang disediakan sistem untuk digunakan dalam pipeline Anda:

   • $(Build.DefinitionName) adalah nama alur build. Misalnya, "SpaceGame-Web-CI."
   • $(Build.BuildId) adalah pengidentifikasi numerik untuk build yang telah selesai, seperti 115.
   • $(Build.BuildNumber) adalah nama dari build yang telah selesai. Anda dapat mengonfigurasi format, tetapi secara default, nomor build menyertakan tanggal saat ini yang diikuti dengan nomor build untuk hari itu. Contoh nomor build adalah "20190329.1."

   Anda juga dapat menentukan variabel Anda sendiri, yang akan Anda lakukan segera.

   Anda mungkin juga telah memperhatikan tugas UseDotNet@2, yang merupakan langkah build pertama. Mara mengingat bahwa skrip build tidak menginstal alat build yang diperlukan. Meskipun agen build dilengkapi dengan beberapa versi .NET SDK, tugas ini memungkinkan penulis alur dengan mudah menentukan versi yang perlu mereka gunakan pada agen build.

5. Dari terminal terintegrasi, jalankan perintah Git berikut untuk menambahkan azure-pipelines.yml ke indeks, menerapkan perubahan, dan mendorong perubahan ke GitHub. Langkah-langkah ini mirip dengan langkah-langkah yang Anda lakukan sebelumnya.

   Tip

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

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

   Saat ini, Anda mendorong cabang build-pipeline, bukan cabang main, ke GitHub.

   Mendorong cabang ke GitHub akan memicu proses build di Azure Pipelines.

6. Di Azure Pipelines, buka build Anda. Untuk melakukannya, di sisi halaman, pilih Alur, lalu pilih alur Anda. Anda akan melihat pesan komit Anda dan bahwa pembangunan berjalan menggunakan kode dari cabang build-pipeline.

   

   Tip

   Jika Anda tidak langsung melihat build, tunggu beberapa saat atau refresh halaman.

7. Pilih build Anda dan pilih Pekerjaan dan lacak tugas build saat dijalankan.

   Misalnya, inilah yang terjadi ketika tugas gulp@1 berjalan untuk melakukan tugas gulp yang mengecilkan aset JavaScript dan CSS:

   

   Jika ada langkah yang gagal, Anda akan melihat kesalahan pada output sehingga Anda dapat mendiagnosis dan memperbaiki kegagalan tersebut.

   Sebelumnya, Anda menjalankan konfigurasi build yang lebih sedikit. Kali ini, ketika build selesai, Anda akan melihat serangkaian tugas yang lebih lengkap yang diperlukan untuk membangun aplikasi.

   

8. Setelah build Anda selesai, pilih salah satu langkah untuk melihat perkembangan keseluruhan build. Dari sana, Anda dapat melompat ke log build atau perubahan terkait pada GitHub.