Exercício - Publicar o resultado no pipeline

Concluído

Neste ponto, você pode construir o projeto web Space Game através do pipeline.

Mas para onde vão os resultados da construção? No momento, a saída da compilação permanece no servidor de compilação temporário. Mara precisa de uma maneira de entregar essa construção para Amita para que ela possa começar a testar.

Você pode armazenar artefatos de compilação no Azure Pipelines para que eles fiquem disponíveis para outras pessoas da sua equipe após a conclusão da compilação. É isso que você vai fazer aqui. Como bônus, você também refatorará a configuração de compilação para usar variáveis para tornar a configuração mais fácil de ler e manter atualizada.

Nota

O Azure Pipelines permite implantar automaticamente o aplicativo criado em um ambiente de teste ou produção em execução na nuvem ou em seu datacenter. Por enquanto, o objetivo de Mara é apenas produzir compilações que ela possa entregar ao QA usando seus processos existentes.

Publicar a compilação no pipeline

No .NET, você pode empacotar seu aplicativo como um arquivo .zip. Em seguida, você pode usar a tarefa interna PublishBuildArtifacts@1 para publicar o arquivo de .zip no Azure Pipelines.

  1. No Visual Studio Code, altere azure-pipelines.yml como você vê aqui:

    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()
    

    Esta versão do azure-pipelines.yml se parece com a versão anterior, mas adiciona duas tarefas adicionais.

    A primeira tarefa usa a DotNetCoreCLI@2 tarefa para publicar ou empacotar os resultados de compilação do aplicativo (incluindo suas dependências) em uma pasta. O zipAfterPublish argumento especifica para adicionar os resultados criados a um arquivo .zip.

    A segunda tarefa usa a PublishBuildArtifacts@1 tarefa para publicar o arquivo de .zip no Azure Pipelines. O condition argumento especifica para executar a tarefa somente quando a tarefa anterior for bem-sucedida. succeeded() é a condição padrão, portanto, você não precisa especificá-la. Mas mostramos aqui para mostrar o seu uso.

  2. A partir do terminal integrado, adicione azure-pipelines.yml ao índice, confirme a alteração e envie a alteração para o GitHub.

    Gorjeta

    Antes de executar esses comandos do Git, lembre-se de salvar azure-pipelines.yml.

    git add azure-pipelines.yml
    git commit -m "Add publish tasks"
    git push origin build-pipeline
    
  3. Como você fez anteriormente, no Azure Pipelines, rastreie a compilação através de cada uma das etapas.

  4. Quando o pipeline for concluído, volte para o resumo da compilação.

  5. Em Relacionado, há 1 publicado.

    Screenshot of the build summary. Details include the repository and version, the time started and elapsed, and a link to the published build artifact.

  6. Selecione o artefato.

  7. Expanda a pasta suspensa.

    Você verá um arquivo de .zip que contém seu aplicativo criado e suas dependências:

    Screenshot of the packaged web application in the Artifacts explorer.

    Se quiser experimentar um exercício opcional, pode transferir este ficheiro .zip para o seu computador e explorar o seu conteúdo.

Definir variáveis para melhorar a legibilidade

Mara recua para examinar o seu trabalho. A configuração de construção faz o que ela precisa, mas ela quer garantir que Andy e outros possam facilmente ajudar a mantê-la atualizada e estendê-la.

As variáveis permitem que você defina valores uma vez e faça referência a esses valores em todo o pipeline. O Azure Pipelines substitui cada variável pelo seu valor atual quando o pipeline é executado.

Assim como em outras linguagens de programação, as variáveis permitem que você faça coisas como:

  • Defina valores que podem mudar entre execuções do seu pipeline.
  • Armazene informações repetidas em todo o pipeline, como um número de versão ou um caminho de arquivo, em um só lugar. Dessa forma, você não precisa atualizar todas as ocorrências quando a sua precisa ser alterada.

O Azure Pipelines fornece muitas variáveis internas. Essas variáveis descrevem aspetos do processo de compilação, como o identificador de compilação e os nomes de diretório onde o software é criado e preparado.

Você também pode definir suas próprias variáveis. Aqui está um exemplo que mostra uma variável chamada buildConfiguration que define a configuração de compilação de versão:

variables:
  buildConfiguration: 'Release'

Use variáveis quando repetir o mesmo valor várias vezes ou quando um valor, como uma versão de dependência, puder ser alterado.

Você não precisa criar uma variável para cada parte da sua configuração de compilação. Na verdade, muitas variáveis podem tornar seu código de pipeline mais difícil para outras pessoas lerem e entenderem.

Reserve um momento para examinar azure-pipelines.yml. Observe que esses valores são repetidos:

  • Configuração de construção: Release.
  • Localização do diretório wwwroot : Tailspin.SpaceGame.Web/wwwroot.
  • Versão do SDK do .NET: 6.x.

Agora você usa variáveis para definir esses valores uma vez. Em seguida, você faz referência às variáveis em todo o pipeline.

  1. No Visual Studio Code, altere azure-pipelines.yml como você vê aqui:

    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()
    

    Observe a variables seção, que define estas variáveis:

    • buildConfiguration: Especifica a configuração de compilação.
    • wwwrootDir: Especifica o caminho para o diretório wwwroot .
    • dotnetSdkVersion: Especifica a versão do SDK do .NET a ser usada.

    Para fazer referência a essas variáveis, use a $() sintaxe da mesma forma que faz para as variáveis internas. Aqui está a etapa que executa o node-Sass para converter arquivos Sass em CSS. Para obter o caminho para o diretório wwwroot , ele faz referência à wwwrootDir variável.

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

    O comando script usa a variável para definir o diretório de origem para arquivos Sass e o diretório no qual escrever arquivos CSS. Ele também usa a variável para definir o nome da tarefa que é mostrado na interface do usuário.

  2. A partir do terminal integrado, adicione azure-pipelines.yml ao índice, confirme a alteração e envie a alteração para o GitHub.

    git add azure-pipelines.yml
    git commit -m "Refactor common variables"
    git push origin build-pipeline
    
  3. A partir dos Pipelines do Azure, rastreie a compilação através de cada uma das etapas.

    Você verá que as variáveis são substituídas por seus valores quando a compilação é executada. Por exemplo, aqui está a tarefa que define a versão do SDK do .NET a UseDotNet@2 ser usada.

    Screenshot of Azure Pipelines showing the .NET SDK task running in the pipeline.

    Como antes, para ver o artefato quando a compilação for concluída, você pode navegar até o resumo da compilação.

Parabéns! Você usou com êxito o Azure Pipelines e criou seu primeiro artefato de compilação.