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

Neste início rápido, vai criar uma aplicação Web progressiva (PWA) NodeJS com o GatsbyJS e a experiência de criação simplificada do Azure DevOps Starter. Quando terminar, tem um pipeline de integração contínua (CI) e entrega contínua (CD) para o seu PWA nos Pipelines do Azure. O Azure DevOps Starter configura o que precisa para desenvolver, implementar e monitorizar.

Pré-requisitos

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

Iniciar sessão no portal do Azure

O DevOps Starter cria um pipeline CI/CD nos Pipelines do Azure. Pode criar uma nova organização do Azure DevOps ou utilizar uma organização existente. O DevOps Starter também cria recursos do Azure na subscrição do Azure à sua escolha.

1. Inicie sessão no portal do Azure e, no painel esquerdo, selecione Criar um recurso.

   

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

   

Selecione um exemplo de aplicação e serviço do Azure

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

   

2. A arquitetura de exemplo predefinida é Express.js. Altere a seleção para Simple Node.js App e, em seguida, selecione Seguinte.

   

3. Os destinos de implementação disponíveis neste passo são ditados pela arquitetura de aplicação selecionada no passo 2. Neste exemplo, o Windows Web App é o destino de implementação predefinido. Deixe a Aplicação Web para Contentores definida e selecione Seguinte.

   

Configurar um nome de projeto e uma subscrição do Azure

1. No passo final do fluxo de trabalho de criação do DevOps Starter, atribua um nome de projeto, selecione uma subscrição do Azure e selecione Concluído.

   

2. É apresentada uma página de resumo enquanto o projeto é criado e a sua aplicação é implementada no Azure. Após um breve período, é criado um projeto na sua organização do Azure DevOps que inclui um repositório git, um quadro Kanban, um pipeline de implementação, planos de teste e os artefactos exigidos pela sua aplicação.

Gerir o seu projeto

1. Navegue para Todos os Recursos e localize o Seu DevOps Starter. Selecione o Seu DevOps Starter.

   

2. É direcionado para um dashboard que fornece visibilidade para a home page do projeto, o repositório de código, o pipeline CI/CD e uma ligação para a sua aplicação em execução. Selecione a Home page do Project para ver a sua aplicação no Azure DevOps e, noutro separador do browser, selecione o Ponto Final da Aplicação para ver a aplicação de exemplo em direto. Alteramos este exemplo mais tarde para utilizar o PWA gerado pelo GatsbyJS.

   

3. A partir do seu projeto do Azure DevOps, pode convidar membros da equipa para colaborar e estabelecer um quadro Kanban para começar a controlar o seu trabalho. Para obter mais informações, veja aqui.

Clonar o repositório e instalar o seu Gatsby PWA

O DevOps Starter cria um repositório git nos Repositórios do Azure 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 Repositórios no Projeto de DevOps e, em seguida, clique em Clonar. Existem vários mecanismos para clonar o repositório git para o seu ambiente de trabalho. Escolha a que se adequa à sua experiência de desenvolvimento.

   

2. Depois de clonar o repositório para o ambiente de trabalho, faça algumas alterações ao modelo inicial. Comece por instalar a CLI do GatsbyJS a partir do terminal.

    npm install -g gatsby
   

3. No terminal, navegue para a raiz do seu repositório. Deve conter três pastas com o seguinte aspeto:

   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 ficheiros na pasta Aplicação porque vamos substituí-los por um iniciador do Gatsby. Execute os seguintes comandos, em sequência, para o reduzir.

   cp .\Application\Dockerfile .
   rmdir Application
   

5. Utilize a CLI do Gatsby para gerar um PWA de exemplo. Execute gatsby new a partir do terminal para iniciar o assistente do PWA e selecione gatsby-starter-blog para 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. Tem agora uma pasta com o nome my-gatsby-project. Mude o nome para e copie-o para Application o Dockerfile mesmo.

   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. Esta alteração garante que o contentor está a utilizar Node.js versão 12.x em vez da versão 8.x. O GatsbyJS requer versões mais modernas do Node.js.

8. Em seguida, abra o ficheiro package.json na pasta Aplicação e edite o campo scripts para garantir que os servidores de desenvolvimento e produção escutam em todas as interfaces de rede disponíveis (por exemplo, 0.0.0.0) e na porta 80. Sem estas definições, o serviço de aplicações de contentor não consegue encaminhar o tráfego para a sua aplicação Node.js em execução no seu contentor. O scripts campo deve assemelhar-se ao que está abaixo. Especificamente, pretende alterar os developdestinos , servee start das respetivas predefiniçõ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"
     }
   

Editar os pipelines de CI/CD

1. Antes de consolidar o código na secção anterior, faça algumas alterações aos pipelines de compilação e versão. Edite o seu "Pipeline de Compilação" e atualize a tarefa Node para utilizar Node.js versão 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 a criar testes de unidades e estamos a desativar esses passos no nosso pipeline de compilação. Quando escreve testes, pode reativar estes passos. Clique com o botão direito do rato para selecionar as tarefas identificadas como Instalar dependências de teste e Executar testes de unidades e desativá-las.

   

3. Edite o pipeline de versão.

   

4. Tal como acontece com o pipeline de compilação, altere a tarefa Node para utilizar 12.x e desative as duas tarefas de teste. A sua versão deve assemelhar-se a esta captura de ecrã.

   

5. No lado esquerdo do browser, aceda ao ficheiro views/index.pug .

6. Selecione Editar e, em seguida, faça uma alteração ao cabeçalho h2. Por exemplo, introduza Introdução imediatamente com o Azure DevOps Starter ou faça outra alteração.

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

8. No browser, aceda ao dashboard DevOps Starter.
   Deverá agora ver uma compilação em curso. As alterações efetuadas são automaticamente criadas e implementadas através de um pipeline CI/CD.

Consolidar as alterações e examinar o pipeline de CI/CD do Azure

Nos dois passos anteriores, adicionou um PWA gerado pelo Gatsby ao seu repositório git e editou os pipelines para compilar e implementar o código. Podemos consolidar o código e vê-lo progredir através do pipeline de compilação e versão.

1. Na raiz do repositório git do projeto num terminal, execute os seguintes comandos para enviar o código para o projeto do Azure DevOps:

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

2. Uma compilação é iniciada assim git push que for concluída. Pode seguir o progresso a partir do Dashboard do Azure DevOps.

3. Após alguns minutos, os pipelines de compilação e versão devem ser concluídos e o PWA deve ser implementado num contentor. Clique na ligação Ponto final da aplicação a partir do dashboard acima e deverá ver um projeto inicial do Gatsby para blogues.

Limpar os recursos

Pode eliminar Serviço de Aplicações do Azure e outros recursos relacionados que criou quando já não precisa dos recursos. Utilize a funcionalidade Eliminar no dashboard DevOps Starter.

Passos seguintes

Quando configura o seu processo de CI/CD, os pipelines de compilação e versão são criados automaticamente. Pode alterar estes pipelines de compilação e versão para satisfazer as necessidades da sua equipa. Para saber mais sobre o pipeline CI/CD, consulte:

Personalizar o processo de CD