Exercício - Implantar o aplicativo Web no Serviço de Aplicativo do Azure

13 minutos

Neste módulo, você cria um pipeline de vários estágios para criar e implantar seu aplicativo no Serviço de Aplicativo do Azure. Sabe como:

Crie uma instância do Serviço de Aplicativo para hospedar seu aplicativo Web.
Crie um pipeline de vários estágios.
Implante no Serviço de Aplicativo do Azure.

Criar a instância do Serviço de Aplicativo

Inicie sessão no portal do Azure.
Selecione Serviços de Aplicativo no painel esquerdo.
Selecione Criar>aplicativo Web para criar um novo aplicativo Web.

Na guia Noções básicas, insira os seguintes valores.

Definição	Value
Detalhes do Projeto
Subscrição	a sua subscrição
Grupo de Recursos	Selecione Criar novo e, em seguida, insira tailspin-space-game-rg e selecione OK.
Detalhes da instância
Nome	Forneça um nome exclusivo, como tailspin-space-game-web-1234. Este nome tem de ser exclusivo em todo o Azure. Torna-se parte do nome de domínio. Na prática, escolha um nome que descreva o seu serviço. Anote o nome para mais tarde.
Publicar	Código
Pilha de runtime	.NET 6 (LTS)
Sistema operativo	Linux
País/Região	Selecione uma região, de preferência uma perto de si.
Planos de preços
Plano do Linux	Aceite o padrão.
Plano de preços	Selecione o nível de preço B1 básico no menu suspenso.

Selecione Rever + criar, reveja o formulário e, em seguida, selecione Criar. A implantação leva alguns minutos para ser concluída.
Quando a implantação estiver concluída, selecione Ir para recurso. O App Service Essentials exibe detalhes relacionados à sua implantação.
Selecione a URL para verificar o status do seu Serviço de Aplicativo.

Importante

A página Limpar seu ambiente de DevOps do Azure neste módulo explica como derrubar sua instância do Serviço de Aplicativo depois de terminá-la. A limpeza ajuda a garantir que você não seja cobrado pelos recursos do Azure depois de concluir este módulo. Certifique-se de seguir as etapas de limpeza, mesmo que não conclua este módulo.

Criar uma conexão de serviço

Importante

Certifique-se de que tem sessão iniciada no Azure e no Azure DevOps na mesma conta Microsoft.

No Azure DevOps, vá para o seu projeto Space Game - Web - Release .
No canto inferior esquerdo da página, selecione Configurações do projeto.
Em Pipelines, selecione Ligações do serviço.
Selecione Nova conexão de serviço e, em seguida, selecione Azure Resource Manager e selecione Avançar.
Selecione Entidade de serviço (automática) e, em seguida, selecione Seguinte.

Preencha os campos obrigatórios da seguinte forma: Se solicitado, inicie sessão na sua conta Microsoft.

Campo	Value
Nível de âmbito	Subscrição
Subscrição	a subscrição do Azure
Grupo de Recursos	tailspin-espaço-jogo-rg
Nome da conexão de serviço	Gestor de Recursos - Tailspin - Jogo Espacial

Verifique se a opção Conceder permissão de acesso a todos os pipelines está selecionada.
Selecione Guardar.

Adicione o estágio Build ao seu pipeline

Um pipeline de vários estágios permite que você defina fases distintas pelas quais sua alteração passa à medida que é promovida pelo pipeline. Cada estágio define o agente, as variáveis e as etapas necessárias para realizar essa fase do pipeline. Nesta seção, você define um estágio para executar a compilação. Você define um segundo estágio para implantar o aplicativo Web no Serviço de Aplicativo.

Para converter sua configuração de compilação existente em um pipeline de vários estágios, adicione uma stages seção à sua configuração e, em seguida, adicione uma ou mais stage seções para cada fase do pipeline. Os estágios se dividem em trabalhos, que são uma série de etapas que são executadas sequencialmente como uma unidade.

A partir do seu projeto no Visual Studio Code, abra azure-pipelines.yml e substitua seu conteúdo por este código:

trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      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

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

A partir do terminal integrado, execute os seguintes comandos para preparar, confirmar e, em seguida, enviar as alterações para a ramificação remota.
```
git add azure-pipelines.yml
git commit -m "Add a build stage"
git push origin release-pipeline
```
No Azure Pipelines, navegue até o pipeline para exibir os logs.
Após a conclusão da compilação, selecione o botão Voltar para retornar à página de resumo e verificar o status do pipeline e do artefato publicado.

Criar o ambiente de desenvolvimento

Um ambiente é uma representação abstrata do seu ambiente de implantação. Os ambientes podem ser usados para definir critérios específicos para sua versão, como qual pipeline está autorizado a implantar no ambiente. Os ambientes também podem ser usados para configurar aprovações manuais para usuários/grupos específicos a serem aprovados antes que a implantação seja retomada.

Em Azure Pipelines, selecione Environments.
Selecione Criar ambiente.
Em Nome, insira dev.
Deixe os campos restantes em seus valores padrão.
Selecione Criar.

Armazenar o nome do aplicativo Web em uma variável de pipeline

O estágio Implantar que estamos criando usa o nome para identificar em qual instância do Serviço de Aplicativo implantar, por exemplo: tailspin-space-game-web-1234.

Embora você possa codificar esse nome em sua configuração de pipeline, defini-lo como uma variável torna sua configuração mais reutilizável.

No Azure DevOps, selecione Pipelines e, em seguida, selecione Biblioteca.
Selecione + Grupo de variáveis para criar um novo grupo de variáveis.
Insira Release para o nome do grupo de variáveis.
Selecione Adicionar em Variáveis para adicionar uma nova variável.
Digite WebAppName para o nome da variável e o nome da instância do Serviço de Aplicativo para seu valor: por exemplo, tailspin-space-game-web-1234.
Selecione Guardar.

Adicionar o estágio de implantação ao seu pipeline

Estendemos nosso pipeline adicionando um estágio de implantação para implantar o Jogo Espacial no Serviço de Aplicativo usando as tarefas e AzureWebApp@1 para baixar o artefato de compilação e, em seguida, download implantá-lo.

No Visual Studio Code, substitua o conteúdo do azure-pipelines.yml pelo seguinte yaml:

trigger:
- '*'

variables:
  buildConfiguration: 'Release'

stages:
- stage: 'Build'
  displayName: 'Build the web application'
  jobs: 
  - job: 'Build'
    displayName: 'Build job'
    pool:
      vmImage: 'ubuntu-20.04'
      demands:
      - npm

    variables:
      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

    - publish: '$(Build.ArtifactStagingDirectory)'
      artifact: drop

- stage: 'Deploy'
  displayName: 'Deploy the web application'
  dependsOn: Build
  jobs:
  - deployment: Deploy
    pool:
      vmImage: 'ubuntu-20.04'
    environment: dev
    variables:
    - group: Release
    strategy:
      runOnce:
        deploy:
          steps:
          - download: current
            artifact: drop
          - task: AzureWebApp@1
            displayName: 'Azure App Service Deploy: website'
            inputs:
              azureSubscription: 'Resource Manager - Tailspin - Space Game'
              appName: '$(WebAppName)'
              package: '$(Pipeline.Workspace)/drop/$(buildConfiguration)/*.zip'

Observe a seção destacada e como estamos usando as download tarefas e AzureWebApp@1 . O pipeline busca o $(WebAppName) do grupo de variáveis que criamos anteriormente.

Observe também como estamos usando environment para implantar no ambiente de desenvolvimento .

A partir do terminal integrado, adicione azure-pipelines.yml ao índice. Em seguida, confirme a alteração e envie-a para o GitHub.
```
git add azure-pipelines.yml
git commit -m "Add a deployment stage"
git push origin release-pipeline
```
No Azure Pipelines, navegue até o pipeline para exibir os logs.
Após a conclusão da compilação, selecione o botão Voltar para retornar à página de resumo e verificar o status de seus estágios. Ambas as etapas terminaram com sucesso no nosso caso.

Exibir o site implantado no Serviço de Aplicativo

Se você ainda tiver a guia Serviço de Aplicativo aberta, atualize a página. Caso contrário, navegue até o Serviço de Aplicativo do Azure no portal do Azure e selecione a URL da instância: por exemplo,https://tailspin-space-game-web-1234.azurewebsites.net
O site Space Game é implantado com êxito no Serviço de Aplicativo do Azure.

Parabéns! Você implantou com êxito o site do Jogo Espacial no Serviço de Aplicativo do Azure usando o Azure Pipelines.