Criar um pipeline de CI/CD no Azure Pipelines para Node.js com o Azure DevOps Starter

Neste início rápido, você criará um PWA (aplicativo Web progressivo) nodeJS usando GatsbyJS e a experiência de criação simplificada do Azure DevOps Starter. Quando terminar, você terá um pipeline de integração contínua (CI) e entrega contínua (CD) para o seu PWA no Azure Pipelines. O Azure DevOps Starter configura o que você precisa para desenvolver, implantar e monitorar.

Pré-requisitos

• Uma conta do Azure com uma assinatura ativa. Crie uma conta gratuitamente.
• Uma organização do Azure DevOps .

Entre no Portal do Azure

O DevOps Starter cria um pipeline de CI/CD no Azure Pipelines. Você pode criar uma nova organização do Azure DevOps ou usar uma organização existente. O DevOps Starter também cria recursos do Azure na assinatura do Azure de sua escolha.

1. Entre no portal do Azure e, no painel esquerdo, selecione Criar um recurso.

   

2. Na caixa de pesquisa, digite DevOps Starter e selecione. Clique em Adicionar para criar um novo.

   O painel do DevOps Starter

Selecionar um aplicativo de exemplo e um serviço do Azure

1. Selecione o aplicativo de exemplo Node.js.

   

2. A estrutura de exemplo padrão é Express.js. Altere a seleção para Simple Node.js App e selecione Avançar.

   

3. Os destinos de implantação disponíveis nesta etapa são determinados pela estrutura do aplicativo selecionada na etapa 2. Neste exemplo, o Windows Web App é o destino de implantação padrão. Deixe o Aplicativo Web para Contêineres definido e selecione Avançar.

   

Configurar um nome de projeto e uma assinatura do Azure

1. Na etapa final do fluxo de trabalho de criação do DevOps Starter, você atribui um nome de projeto, seleciona uma assinatura do Azure e seleciona Concluído.

   

2. Uma página de resumo é exibida enquanto o projeto é criado e seu aplicativo é implantado no Azure. Após um breve período, um projeto é criado em sua organização do Azure DevOps que inclui um repositório git, um quadro Kanban, um pipeline de implantação, planos de teste e os artefatos exigidos pelo seu aplicativo.

Gerenciando seu projeto

1. Navegue até Todos os Recursos e localize o DevOps Starter. Selecione o DevOps Starter.

   

2. Você é direcionado para um painel que fornece visibilidade da home page do projeto, do repositório de código, do pipeline de CI/CD e de um link para o aplicativo em execução. Selecione a Página Inicial do Projeto para exibir seu aplicativo no Azure DevOps e, em outra guia do navegador, selecione o Ponto de Extremidade do Aplicativo para exibir o aplicativo de exemplo dinâmico. Alteramos este exemplo mais tarde para usar o PWA gerado pelo GatsbyJS.

   

3. No seu projeto do Azure DevOps, você pode convidar os membros da equipe para colaborar e estabelecer um quadro kanban para começar a acompanhar seu trabalho. Para obter mais informações, consulte aqui.

Clonar o repositório e instalar o PWA do Gatsby

O DevOps Starter cria um repositório git no Azure Repos ou no GitHub. Este exemplo criou um repositório do Azure. A próxima etapa é clonar o repositório e fazer alterações.

1. Selecione Repos em seu Projeto DevOps e clique em Clonar. Há vários mecanismos para clonar o repositório git para sua área de trabalho. Escolha aquele que se ajuste à sua experiência de desenvolvimento.

   

2. Depois que o repositório for clonado para sua área de trabalho, faça algumas alterações no modelo inicial. Comece instalando a interface de linha de comando (CLI) do GatsbyJS no seu terminal.

    npm install -g gatsby
   

3. No terminal de comandos, navegue até a raiz do repositório. Ele deve conter três pastas com esta aparência:

   Mode                LastWriteTime         Length Name
   ----                -------------         ------ ----
   d-----        2/23/2020  10:42 PM                Application
   d-----        2/23/2020   3:05 PM                ArmTemplates
   d-----        2/23/2020   3:05 PM                Tests
   

4. Não queremos todos os arquivos na pasta Aplicativo porque vamos substituí-los por um iniciador do Gatsby. Rode os comandos a seguir, em sequência, para apará-lo.

   cp .\Application\Dockerfile .
   rmdir Application
   

5. Use a CLI do Gatsby para gerar um PWA de exemplo. Execute gatsby new no terminal para iniciar o assistente de PWA e selecione gatsby-starter-blog para seu modelo de início. Ele deve ser semelhante a este exemplo:

   c:\myproject> gatsby new
   √ What is your project called? ... my-gatsby-project
   ? What starter would you like to use? » - Use arrow-keys. Return to submit.
       gatsby-starter-default
       gatsby-starter-hello-world
   >   gatsby-starter-blog
       (Use a different starter)
   

6. Agora você tem uma pasta chamada my-gatsby-project. Renomeie para Application e copie o Dockerfile para ele.

   mv my-gatsby-project Application
   mv Dockerfile Application
   

7. No editor favorito, abra o Dockerfile e altere a primeira linha de FROM node:8 para FROM node:12. Essa alteração garante que o contêiner esteja usando Node.js versão 12.x em vez da versão 8.x. GatsbyJS requer versões mais modernas do Node.js.

8. Em seguida, abra o arquivo package.json na pasta Aplicativo e edite o campo scripts para garantir que os servidores de desenvolvimento e produção ouçam em todas as interfaces de rede disponíveis (por exemplo, 0.0.0.0) e na porta 80. Sem essas configurações, o serviço de aplicativo de contêiner não pode rotear o tráfego para seu aplicativo Node.js em execução dentro do contêiner. O scripts campo deve ser semelhante ao que está abaixo. Especificamente, você deseja alterar os destinos develop, serve e start de suas configurações padrão.

     "scripts": {
       "build": "gatsby build",
       "develop": "gatsby develop  -H 0.0.0.0 -p 80",
       "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
       "start": "npm run serve",
       "serve": "npm run build && gatsby serve -H 0.0.0.0 -p 80",
       "clean": "gatsby clean",
       "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
     }
   

Editar seus pipelines de CI/CD

1. Antes de confirmar o código na seção anterior, faça algumas alterações nos pipelines de build e lançamento. Edite o 'Pipeline de Construção' e atualize a tarefa do Node para usar a versão Node.js 12.x. Defina o campo De versão da Tarefa como 1.x e o campo Versão como 12.x.

   

2. Neste início rápido, não estamos criando testes de unidade e estamos desabilitando essas etapas em nosso pipeline de build. Ao escrever testes, você pode ativar novamente essas etapas. Clique com o botão direito do mouse para selecionar as tarefas rotuladas Instalar dependências de teste e executar testes de unidade e desabilitá-las .

   

3. Edite seu fluxo de liberação.

   

4. Assim como no pipeline de build, altere a tarefa do Node.js para usar a versão 12.x e desative as duas tarefas de teste. Sua versão deve ser semelhante a esta captura de tela.

   

5. No lado esquerdo do navegador, vá para o arquivo views/index.pug .

6. Selecione Editar e faça uma alteração no título h2. Por exemplo, insira Comece agora mesmo com o Azure DevOps Starter ou faça alguma outra alteração.

7. Selecione Confirmar e salve as alterações.

8. No navegador, vá para o painel do DevOps Starter.
   Agora você verá uma compilação em andamento. As alterações feitas são criadas e implantadas automaticamente por meio de um pipeline de CI/CD.

Confirme suas alterações e examine o pipeline de CI/CD do Azure

Nas duas etapas anteriores, você adicionou um PWA gerado pelo Gatsby ao repositório git e editou seus pipelines para compilar e implantar o código. Podemos submeter o código e vê-lo progredir por meio do fluxo de compilação e lançamento.

1. Na raiz do repositório git do seu projeto em um terminal, execute os seguintes comandos para push do seu código para o projeto no Azure DevOps:

   git add .
   git commit -m "My first Gatsby PWA"
   git push
   

2. Um build é iniciado assim que git push é concluído. Você pode acompanhar o progresso no Painel do Azure DevOps.

3. Após alguns minutos, seus pipelines de compilação e lançamento devem ser concluídos e seu PWA deve ser implantado em um contêiner. Clique no link do endpoint do aplicativo no painel acima e você deverá ver um projeto inicial para blogs do Gatsby.

Limpar os recursos

Você pode excluir o Serviço de Aplicativo do Azure e outros recursos relacionados criados quando não precisar mais dos recursos. Utilize a funcionalidade Excluir no painel do DevOps Starter.

Próximas etapas

Quando você configura o processo de CI/CD, os pipelines de build e lançamento são criados automaticamente. Você pode alterar esses pipelines de compilação e implementação para atender às necessidades da sua equipe. Para obter mais informações sobre o pipeline de CI/CD, consulte: