Alıştırma - İşlem hattını oluşturma

Tamamlandı

Bu noktada Mara, Space Game web sitesi için bir derleme yapılandırması tanımlamıştır. Şimdi sıra senin. bir işlem hattı oluşturacak ve ilk derleme yapıtınızı oluşturacaksınız.

Gördüğünüz gibi Mara, derlemeyi tanımlamak için bir YAML dosyası kullandı. İşlem hattı oluşturduğunuzda işlem sizden YAML dosyanızı ister. Projede henüz bu dosya yok.

Projeniz için ilk YAML dosyasını sağlamadığınızda Azure Pipelines, uygulama türünüz temelinde sizin için bir yaml dosyası oluşturabilir. Burada bir ASP.NET Core uygulaması oluşturacaksınız, ancak Azure Pipelines Java, Go ve daha fazlası gibi diğer proje türleri için başlangıç derleme yapılandırmaları da sağlar.

İşlem hattını oluşturma

  1. Azure DevOps'ta projenize gidin.

  2. Proje sayfasından veya sol bölmeden İşlem Hatları'nı seçin.

  3. İşlem Hattı Oluştur'u (veya projedeki ilk işlem hattı değilse Yeni işlem hattı)'ı seçin.

  4. Bağlan sekmesinde GitHub'ı seçin.

    İstendiğinde GitHub kimlik bilgilerinizi girin.

  5. Seç sekmesinde mslearn-tailspin-spacegame-web deponuzu seçin.

  6. Azure Pipelines uygulamasını yüklemek için GitHub'a yönlendirilebilirsiniz. Öyleyse, en alta kaydırın ve Onayla ve Yükle'yi seçin.

  7. Yapılandır sekmesinde ASP.NET Çekirdek'i seçin.

    Dekont

    Bu seçeneği görmüyorsanız Daha fazla göster'i seçin. ASP.NET Core (.NET Framework) öğesini seçmeyin.

    Screenshot of locating ASP.NET Core from the list of provided application types.

  8. Gözden Geçir sekmesinde ilk derleme yapılandırmasını not edin.

    Screenshot of Azure Pipelines showing the initial build configuration.

    Bu, Azure DevOps'un uygulama türünüz (ASP.NET Core) temelinde sizin için sağladığı çok temel bir yapılandırmadır. Varsayılan yapılandırma, Microsoft tarafından barındırılan bir aracı kullanır.

    Metni vmImage: ubuntu-latest ( name: Default veya Codespaces Deposu gizli dizilerini ayarlarken farklı bir havuz belirttiyseniz aracı havuzunuzun adıyla) değiştirin.

  9. Gözden Geçir sekmesinde Kaydet ve çalıştır'ı seçin. Değişikliklerinizi GitHub'a kaydetmek ve işlem hattını başlatmak için Doğrudan ana dala işle'yi seçin ve Kaydet'i seçip ikinci kez çalıştırın . gibi This pipeline needs permission to access a resource before this run can continuebir iletiyle izin vermeniz istenirse Görüntüle'yi seçin ve erişime izin vermek için istemleri izleyin.

İşlem hattının çalışmasını izleyin

İşler'in altında İş'i seçin. Ardından, adımların her biri aracılığıyla derleme işlemini izleyin. Derleme tamamlandığında iş çıkışını metin dosyası olarak görmek için Ham günlüğü görüntüle'yi de seçebilirsiniz.

İşlem hattınız hızlı bir şekilde başlatılmazsa Codespaces'ın çalışmaya devam ettiğini doğrulayın. Codespaces 30 dakika sonra kapanır ve yeniden başlatılması gerekebilir.

İşlem hattı durumunuz Kuyruğa alındı olarak kalırsa ve birkaç dakika sonra Çalışıyor durumuna geçmiyorsa paralel işlerinizi denetleyin ve ücretsiz bir izin isteyin. Paralel işlere erişiminiz yoksa Codespaces ile modülü baştan başlatabilirsiniz.

Burada, derleme tanımının oluşturduğu adımları görürsünüz. VM'yi hazırlar, GitHub'dan en son kaynak kodunu getirir ve ardından uygulamayı derler.

Screenshot of Azure Pipelines showing output from the initial build configuration.

Artık derleme görevleri eklemek için bir yeriniz olduğundan bu yapılandırma harika bir başlangıçtır. Ancak JavaScript ve CSS dosyalarını küçültmek gibi Tailspin ekibinin ihtiyaçlarını karşılayacak şekilde güncelleştirilmesi gerekir.

Bahşiş

E-postanızı denetleyin. Çalıştırmanızın sonuçlarını içeren bir derleme bildirimi almış olabilirsiniz. Derlemelerin ne zaman tamamlanıp tamamlanmadığını ve her derlemenin başarılı olup olmadığını ekip üyelerinize bildirmek için bu bildirimleri kullanabilirsiniz.

Derleme görevleri ekleme

Artık çalışan bir derleme işlemine sahip olduğunuza göre, derleme görevleri eklemeye başlayabilirsiniz.

Daldan main çalıştığınızı unutmayın. Çalışmanızı tutmak için artık adlı build-pipelinebir dal oluşturacaksınız. Dal size denemeler yapmak için bir yer sağlar ve ekibin geri kalanını etkilemeden derlemenizin tamamen çalışmasını sağlar.

Derleme görevlerini azure-pipelines.yml'ye doğrudan Azure Pipelines'dan ekleyebilirsiniz. Azure Pipelines değişikliklerinizi doğrudan dalınıza kaydeder. Burada azure-pipelines.yml dosyasını yerel olarak değiştirecek ve değişikliklerinizi GitHub'a gönderecek veya karşıya yükleyeceksiniz. Bu şekilde yapmak Git becerilerinizi geliştirmenizi sağlar. Değişiklikleri gönderdiğinizde işlem hattının uygulamayı otomatik olarak derlemesini izleyin.

Uygulamada, derleme görevlerini birer birer ekleyebilir, değişikliklerinizi gönderebilir ve derlemenin çalışmasını izleyebilirsiniz. Burada, daha önce belirlediğimiz tüm derleme görevlerini bir kerede ekleyeceksiniz.

Dekont

Birkaç Git komutu çalıştırmak üzeresiniz. Git'i yeni kullanıyorsanız endişelenmeyin. Sana ne yapacağını göstereceğiz. Ayrıca, gelecek modüllerde Git hakkında daha fazla ayrıntıya ineceğiz.

  1. Visual Studio Code'da tümleşik terminale gidin. Deponuzdaki main dala gidip adımları uyguladığınızdan emin olun.

  2. GitHub'dan en son değişiklikleri getirmek ve dalınızı main güncelleştirmek için bu git pull komutu çalıştırın.

    git pull origin main
    

    Çıkışta Git'in azure-pipelines.yml adlı bir dosya getirdiğini göreceksiniz. Bu, Azure Pipelines'ın sizin için oluşturduğu başlangıç işlem hattı yapılandırmasıdır. İşlem hattını ayarladığınızda Azure Pipelines bu dosyayı GitHub deponuza ekler.

  3. adlı build-pipelinebir dal oluşturmak için şu git checkout komutu çalıştırın:

    git checkout -B build-pipeline
    
  4. Visual Studio Code'da azure-pipelines.yml dosyasını burada gördüğünüz gibi değiştirin:

    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'
    

    steps bölümünün altında, daha önce tanımladığımız betik komutlarının her birine eşlenen derleme görevlerini görürsünüz.

    Azure Pipelines, birçok yaygın derleme etkinliğine eşlenen yerleşik derleme görevleri sağlar. Örneğin, DotNetCoreCLI@2 görev komut satırı yardımcı programıyla dotnet eşler. İşlem hattı iki kez kullanır DotNetCoreCLI@2 : projenin bağımlılıklarını geri yüklemek veya yüklemek için bir kez ve projeyi oluşturmak için bir kez.

    Tüm derleme etkinliklerinin yerleşik bir göreve eşlenmediğini unutmayın. Örneğin, node-Sass yardımcı programını çalıştıran veya derleme bilgilerini bir metin dosyasına yazan yerleşik bir görev yoktur. Genel sistem komutlarını çalıştırmak için veya script görevini kullanırsınızCmdLine@2. İşlem hattı, için ortak bir kısayol CmdLine@2olduğundan görevi kullanırscript.

    Derleme hakkındaki bilgileri bir dosyaya yazan derleme adımında şu öğelere dikkat edin:

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

    Bu öğeler, sistemin işlem hatlarınızda kullanmak üzere sağladığı yerleşik değişkenlerdir:

    • $(Build.DefinitionName) derleme işlem hattının adıdır. Örneğin, "SpaceGame-Web-CI."
    • $(Build.BuildId) tamamlanmış derleme için 115 gibi sayısal bir tanımlayıcıdır.
    • $(Build.BuildNumber) tamamlanmış derlemenin adıdır. Biçimi yapılandırabilirsiniz, ancak varsayılan olarak, derleme numarası geçerli tarihi ve ardından o günün derleme numarasını içerir. Örnek derleme numarası: "20190329.1."

    Ayrıca, yakında gerçekleştirebileceğiniz kendi değişkenlerinizi de tanımlayabilirsiniz.

    İlk derleme adımı olan görevi de fark UseDotNet@2 etmiş olabilirsiniz. Mara, derleme betiğinin gerekli derleme araçlarını yüklemediğini hatırladı. Derleme aracısı birkaç .NET SDK sürümüyle birlikte gelse de, bu görev işlem hattı yazarının derleme aracısı üzerinde kullanması gereken sürümü kolayca belirtmesini sağlar.

  5. Tümleşik terminalden azure-pipelines.yml dosyasını dizine eklemek, değişikliği işlemek ve değişikliği GitHub'a göndermek için aşağıdaki Git komutlarını çalıştırın. Bu adımlar, daha önce gerçekleştirdiğiniz adımlara benzer.

    Bahşiş

    Bu Git komutlarını çalıştırmadan önce azure-pipelines.yml dosyasını kaydetmeyi unutmayın.

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

    Bu kez dalı değil dalı GitHub'a main gönderebilirsinizbuild-pipeline.

    Dalın GitHub'a gönderilmesi, Azure Pipelines'da derleme işlemini tetikler.

  6. Azure Pipelines'da derlemenize gidin. Bunu yapmak için sayfanın yanında İşlem hatları'nı ve ardından işlem hattınızı seçin. İşleme iletinizi ve derlemenin daldaki build-pipeline kodu kullanarak çalıştığını görürsünüz.

    Screenshot of Azure Pipelines showing the run history, including the branch you recently pushed to GitHub.

    Bahşiş

    Derlemeyi hemen görmüyorsanız, birkaç dakika bekleyin veya sayfayı yenileyin.

  7. Derlemenizi seçin ve İşler'i seçin ve çalıştırılırken derleme görevlerini takip edin.

    Örneğin, görev JavaScript ve CSS varlıklarını simge durumuna küçülten gulp görevlerini gerçekleştirmek için çalıştırıldığında gulp@1 şunlar olur:

    Screenshot of tracing the gulp tasks in Azure Pipelines.

    Herhangi bir adım başarısız olursa, hatayı tanılamak ve düzeltmek için çıkışta hata görürsünüz.

    Daha önce daha az derleme yapılandırması çalıştırmıştınız. Bu kez, derleme tamamlandığında uygulamayı derlemek için gereken daha eksiksiz bir görev kümesi görürsünüz.

    Screenshot of Azure Pipelines showing the complete list of build tasks.

  8. Derlemeniz tamamlandıktan sonra, derlemenin genel ilerleme durumunu görmek için adımlardan birini seçin. Buradan, GitHub'da derleme günlüklerine veya ilişkili değişikliğe atlayabilirsiniz.

    Screenshot of Azure Pipelines showing the complete list of build tasks. The Run gulp task is selected.