Integração continua com Azure DevOps e Angular

Rodolfo dos Santos Pinto
Training Center
Published in
5 min readApr 22, 2019

Introdução

No artigo de hoje, vamos demonstrar como fazer a integração contínua do seu aplicativo Angular 6 com o Azure DevOps. Vamos montar uma pipeline para o build (onde serão gerados os artefatos) e uma pipeline para o release (onde iremos publicar nosso artefato em um serviço de aplicativo no Azure).

Mão na Massa

Pipeline de Build

No DevOps, vamos acessar o menu Pipelines e criar nossa receita para buildar a aplicação.

Clique em New Pipeline. Iremos utilizar a visão clássica.

Vamos selecionar nosso repositório. É pré-requisito seu código fonte estar em um repositório de versionamento de código. No nosso caso, o repositório está no GitHub.

Clique em Empty Job para criarmos nossa pipeline.

Vamos clicar no “+” para adicionar os steps.

Com o DevOps é possível instalar e publicar pacotes npm ou rodar os comando do npm.

Na primeira etapa da nossa pipeline, vamos fazer a instalação das dependências do nosso projeto que são encontradas no package.json que está na raiz do projeto.

Na segunda etapa da nossa pipeline, vamos executar o build para gerar os artefatos que serão publicados.

Note que na opção “Command and arguments” estamos executando o seguinte comando — Run Build.

Seu arquivo packages.json contém algumas instruções. Uma delas é a Scripts.

Nessa etapa, estou falando para o NPM rodar o comando que está definido dentro da propriedade build.

Na terceira etapa, vamos gerar o arquivo .zip do build executado.

Note que estamos selecionando a pasta dist. Nela, são encontradas as DLLs que foram geradas.

E, por fim, vamos gerar os artefatos de publicação.

Agora vamos salvar e rodar nosso build para ver se está tudo certo.

Podemos acompanhar cada etapa do log de build do nosso app e visualizar os artefatos gerados. Para isso, basta clicar em Artifacts no canto superior direito em azul.

Nessa etapa estamos prontos para criar uma pipeline de release e publicarmos nosso App.

Pipeline de Release

Vamos criar agora nossa pipeline de release. Clique em Release no submenu de pipelines.

Em seguida, selecione a opção New Release Pipeline.

Como vamos publicar no Azure, vamos utilizar a opção Azure App Services deployment.

Em Artefacts, vamos adicionar os artefatos que foram gerados da pipeline de Build.

Após adicionar os artefatos, vamos configurar para que toda vez que um build for realizado com sucesso executar a pipeline de release.

Ativando trigger de Deploy Contínuo.

Após configurarmos e autorizarmos nossa pipeline apublicar em nosso serviço de aplicativo, vamos clicar em release e ver a “mágica” acontecer.

Se tudo der certo, teremos essa visão.

Visualizando os logs, conseguimos ver onde nossa App foi publicada.

Integração Contínua

Agora, para a brincadeira ficar mais legal, vamos ativar a integração continua para toda vez que for realizado um commit ser feito o build automático da nossa aplicação.

Em build, vamos editar nossa pipeline.

Vamos selecionar o menu Triggers.

Ativar a entrega contínua definindo que qualquer inclusão na branch master será realizado o build.

Vamos Testar?

Editei o cabeçalho da nossa aplicação e, se tudo der certo, após eu commitar o build dessa alteração será realizado.

Commit realizado com sucesso.

Build startado com com sucesso.

Release startado com sucesso.

Alteração realizada com sucesso.

Observação

Caso deseje aprender como fazer a entrega continua em seu aplicativo .Net Core, acesse:

https://medium.com/@rodolfostopinto97/configurando-uma-aplica%C3%A7%C3%A3o-net-core-2-2-no-azuredevops-b3b87216bb66

--

--

Rodolfo dos Santos Pinto
Training Center

.NET Foundation | .Net Developer | Writer | Technology for Love | #Core #DevOps #Azure #NetCore