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

Neste início rápido, você cria um aplicativo Web progressivo (PWA) NodeJS usando o GatsbyJS e a experiência simplificada de criação do Azure DevOps Starter. Quando terminar, você terá um pipeline de integração contínua (CI) e entrega contínua (CD) para 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 Startere selecione. Clique em Adicionar para criar um novo.

   O painel do DevOps Starter

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

1. Selecione a aplicação de exemplo Node.js.

   

2. A estrutura de exemplo padrão é Express.js. Altere a seleção para Simple Node.js App e, em seguida, selecione Next.

   

3. Os destinos de implantação disponíveis nesta etapa são ditados 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 seu 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.

Gerir o seu projeto

1. Navegue até Todos os recursos e encontre seu DevOps Starter. Selecione seu DevOps Starter.

   

2. Você é direcionado para um painel que fornece visibilidade na página inicial do projeto, no repositório de código, no pipeline de CI/CD e em 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 ao vivo. Alteramos este exemplo posteriormente para usar o PWA gerado pelo GatsbyJS.

   

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

Clone o repositório e instale seu PWA Gatsby

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

1. Selecione Repos do seu projeto de DevOps e clique em Clonar. Existem vários mecanismos para clonar o repositório git para a sua área de trabalho. Escolha o que se adapta à 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 por instalar a CLI GatsbyJS a partir do seu terminal.

    npm install -g gatsby
   

3. A partir do terminal, navegue até a raiz do seu repositório. Ele deve conter três pastas que se parecem com isto:

   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 Application porque vamos substituí-lo por um iniciador Gatsby. Execute os seguintes comandos, em sequência, para cortá-lo.

   cp .\Application\Dockerfile .
   rmdir Application
   

5. Use a CLI de Gatsby para gerar um exemplo de PWA. Execute gatsby new a partir do terminal para iniciar o assistente do PWA e selecione gatsby-starter-blog o seu modelo inicial. Deve assemelhar-se 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-o para Application e copie o Dockerfile para ele.

   mv my-gatsby-project Application
   mv Dockerfile Application
   

7. No seu editor favorito, abra o Dockerfile e altere a primeira linha de FROM node:8 para FROM node:12. Essa alteração garante que seu 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 de package.json na pasta Aplicativo e edite o campo de scripts para garantir que seus servidores de desenvolvimento e produção escutem todas as interfaces de rede disponíveis (por exemplo, 0.0.0.0) e a porta 80. Sem essas configurações, o serviço de aplicativo de contêiner não consegue rotear o tráfego para o aplicativo Node.js em execução dentro do contêiner. O scripts campo deve assemelhar-se ao que está abaixo. Especificamente, você deseja alterar os alvos develop, serve, e start dos seus padrões.

     "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"
     }
   

Edite os seus pipelines de CI/CD

1. Antes de confirmar o código na seção anterior, faça algumas alterações em seus pipelines de compilação e lançamento. Edite o seu 'Pipeline de construção' e atualize a tarefa do Node para usar a versão Node.js 12.x. Defina o campo 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 construção. Ao escrever testes, você pode reativar 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 desativá-las.

   

3. Edite o seu pipeline de lançamento.

   

4. Assim como no pipeline de compilação, altere a tarefa Node para usar 12.x e desative as duas tarefas de teste. Sua versão deve se assemelhar a esta captura de tela.

   

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

6. Selecione Editare, em seguida, altere o cabeçalho h2. Por exemplo, introduza Comece imediatamente com o Azure DevOps Starter ou faça alguma outra alteração.

7. Selecione Confirmare, em seguida, guarde as alterações.

8. No navegador, acesse o painel do DevOps Starter.
   Agora deves ver uma construção em andamento. As alterações que você fez são geradas e implementadas 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 por Gatsby ao seu repositório git e editou seus pipelines para criar e implantar o código. Podemos confirmar o código e vê-lo progredir através do pipeline de compilação e lançamento.

1. A partir da raiz do repositório git do seu projeto em um terminal, execute os seguintes comandos para enviar seu código para seu projeto do Azure DevOps:

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

2. Uma compilação é iniciada assim que git push estiver concluído. Você pode acompanhar o progresso no Painel de DevOps do Azure.

3. Após alguns minutos, os seus pipelines de build e release devem ser concluídos e o seu PWA deve ser implantado num container. Clique no link endpoint da aplicação no painel acima e verá um projeto inicial do Gatsby para blogs.

Limpeza de 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 Eliminar no painel do DevOps Starter.

Próximos passos

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

Personalizar o processo de CD