A implantação contínua se tornou crucial no cenário em rápida evolução do desenvolvimento de software. Ela promete ciclos de lançamento mais rápidos, redução de erros humanos e, por fim, uma melhor experiência do usuário.

O desenvolvimento de software envolve a solução de problemas do mundo real por meio de código. A jornada do software desde a criação até o cliente envolve vários estágios, exigindo velocidade, segurança e confiabilidade. É aí que a implantação contínua se destaca.

Este artigo explica como integrar a plataforma CircleCI para criar um fluxo de trabalho de integração contínua e entrega/implantação contínuas (CI/CD), aproveitando o poder da API da Kinsta para a implantação contínua de aplicativos — como no nosso exemplo aqui, o React. Essa combinação pode pavimentar um caminho suave do desenvolvimento à produção.

Entendendo a implantação contínua

A implantação contínua é mais do que uma palavra da moda: é uma mudança de paradigma no desenvolvimento de software. Envolve a automação do processo de build, teste e implantação de alterações de código em servidores de produção.

O pipeline CI/CD, um componente fundamental da implantação contínua, orquestra todo o processo. Inclui controle de versão, teste automatizado e implantação automatizada. Cada estágio é crucial para garantir que somente códigos confiáveis e testados cheguem à produção.

O que é o CircleCI?

O CircleCI é uma ferramenta popular para a implantação de CI/CD, que se integra a sistemas de controle de versão como GitHub, GitLab e Bitbucket, permitindo que os desenvolvedores automatizem todo o pipeline de CI/CD. Sua escalabilidade, extensibilidade e suporte a várias linguagens de programação fazem dela uma ferramenta versátil para projetos de todos os tamanhos.

Os desenvolvedores do CircleCI definem fluxos de trabalho que são acionados automaticamente após a confirmação do código. Isso inicia os processos de build e teste, e, após a conclusão bem-sucedida, implanta o código no ambiente de destino. Essa abordagem prática não apenas economiza tempo, mas também reduz o risco de erros humanos durante a implantação.

Entendendo a API da Kinsta

A API da Kinsta permite que você interaja com os serviços hospedados pela Kinsta de forma programática, com a implantação de aplicativos como parte da sua funcionalidade. Ao trabalhar com fluxos de trabalho de CI/CD, você usará o comando cURL para interagir com a API da Kinsta a partir do fluxo de trabalho.

Para acessar a API, é necessário ter uma conta ativa em pelo menos um dos seguintes serviços no MyKinsta: hospedagem de aplicativos, hospedagem de banco de dados ou hospedagem de WordPress. Após configurar sua conta, você pode gerar uma chave API, que será usada para autenticar seu acesso à API.

Para gerar uma chave API:

  1. Vá ao painel MyKinsta.
  2. Navegue até a página Chaves API (Seu nome > Configurações da empresa > Chaves API).
  3. Clique em Criar chave API.
  4. Escolha uma expiração ou defina uma data de início personalizada e o número de horas para a chave expirar.
  5. Dê à chave um nome exclusivo.
  6. Clique em Gerar.

Após criar uma chave de API, copie e salve em um local seguro (recomendamos que você use um gerenciador de senhas). Lembre-se de que esta chave só será mostrada uma única vez no MyKinsta, então é essencial guardá-la cuidadosamente.

Como iniciar a implantação com a API da Kinsta

Para iniciar a implantação de um aplicativo na Kinsta através da API, é necessário ter o ID do aplicativo e o nome da branch que você deseja implantar no seu repositório Git. Para encontrar o ID do seu aplicativo, comece acessando a lista dos seus aplicativos na Kinsta, que fornecerá detalhes sobre cada aplicativo, incluindo o ID.

A seguir você pode fazer uma solicitação POST para o endpoint /applications/deployments da API com um comando cURL:

curl -i -X POST 
  https://api.kinsta.com/v2/applications/deployments 
  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>' 
  -H 'Content-Type: application/json' 
  -d '{
    "app_id": "<YOUR_APP_ID>",
    "branch": "main"
  }'

Esse comando cURL será usado no fluxo de trabalho.

Como começar a usar o CircleCI

Você precisará do código-fonte hospedado em seu provedor Git preferido para começar a usar o CircleCI. Para este tutorial, vamos usar o aplicativo construtor de sites desenvolvido para o tutorial Como Criar um Site WordPress com a API da Kinsta. Sinta-se à vontade para usar o repositório navegando até ele no GitHub e selecionando: Usar este template > Criar um novo repositório.

No aplicativo React, são criados testes de unidade para testar cada componente. O ESLint também é usado para garantir que a sintaxe e a formatação do código estejam perfeitas. Vamos configurar um fluxo de trabalho de CI/CD que cria, testa e assegura que a sintaxe do nosso código esteja correta, e por fim faz a implantação na Kinsta usando a API.

Para começar, vamos explorar alguns conceitos-chave:

  1. Fluxos de trabalho: O CircleCI é baseado em fluxos de trabalho — sequências definidas de jobs que descrevem os estágios do seu pipeline de CI/CD. Os fluxos de trabalho podem incluir várias etapas, como criação, teste, implantação, e outras.
  2. Jobs: Os jobs são unidades individuais de trabalho em um fluxo de trabalho. Cada job executa uma tarefa específica, como a build de código, a execução de testes ou a implantação em um servidor. Esses jobs também podem incluir várias etapas executadas em sequência (execução paralela), de modo que, quando uma delas falha, o job inteiro falha.

Etapa 1: Crie uma conta CircleCI

Visite o site do CircleCI e crie uma conta se você ainda não tiver uma. Você pode se inscrever usando seu provedor Git preferido. Isso facilita o acesso a seus repositórios sem configuração adicional.

Etapa 2: Crie o arquivo de configuração

No diretório raiz do seu projeto, crie uma pasta .circleci, se ela ainda não existir, e dentro dessa pasta crie um arquivo config.yml. Esse arquivo abrigará a configuração do seu fluxo de trabalho.

Etapa 3: Configure seu repositório

Após fazer o login, navegue até o painel do CircleCI, clique em Projects na barra lateral esquerda para ver uma lista de repositórios, e clique no botão Set Up Project (Configurar Projeto) para o repositório que você deseja configurar.

Configure seu repositório.
Configure seu repositório.

Isso carregará uma caixa de diálogo em que o CircleCI detecta automaticamente o arquivo de configuração que você tem. Em seguida, clique no botão Set Up Project. Agora o CircleCI pode acessar sua base de código e executar os fluxos de trabalho definidos nas alterações de código.

Etapa 4: Defina o job do seu fluxo de trabalho

No centro da configuração do seu pipeline CircleCI está esta etapa crucial: definir seu fluxo de trabalho dentro do arquivo config.yml. É aqui que você gerencia a sequência de ações que o pipeline executará. É como se você estivesse delineando o plano para sua jornada do desenvolvimento à produção.

Isso começa com a definição da versão do CircleCI, que atualmente é 2.1:

version: 2.1

Você precisará de um job build para cada projeto React. Esse job lida com as tarefas fundamentais que tornam seu código pronto para a implantação. Essas tarefas abrangem a instalação das dependências necessárias, a compilação do código, a execução de testes para garantir que tudo esteja funcionando sem problemas, a verificação da qualidade do código e, por fim, o envio do código para o destino.

Como os projetos React geralmente precisam de ferramentas como o Node.js para realizar o job, o CircleCI simplifica o acesso a essas ferramentas, oferecendo-as como imagens pré-empacotadas. Neste tutorial, especifique a versão do Node.js que você deseja usar. Vamos usar o Node.js v20.

jobs:
  build:
    docker:
      - image: cimg/node:20.5.0

Esse job executará várias etapas; portanto, vamos criá-las. A primeira etapa é checkout, que busca a versão mais recente do seu código no repositório, para que todas as ações subsequentes funcionem com o código mais recente.

steps:
  - checkout

Agora vamos à verdadeira essência do job: fazer as coisas acontecerem. As etapas posteriores a checkout abrangem as principais tarefas: instalação de dependências, build do código-fonte, execução de testes de unidade e uso do ESLint para inspecionar seu código em busca de sinais de alerta.

steps:
  - checkout
  - run:
      name: Install Dependencies
      command: npm install
  - run:
      name: Compile Source Code
      command: npm run build
  - run:
      name: Run Unit Tests
      command: npm test
  - run:
      name: Run ESLint
      command: npm run lint

Cada etapa, assim como as placas de sinalização em uma viagem, é nomeada para ajudar você a acompanhar o que acontece quando o fluxo de trabalho está em pleno andamento. Essa clareza facilita a solução de problemas e garante que tudo esteja no caminho certo à medida que o fluxo de trabalho avança.

Acionando a implantação contínua na Kinsta

A etapa final do job build é iniciar a implantação na Kinsta por meio da API. Isso requer dois valores: sua chave API e o ID do aplicativo, que não devem ser públicos. Esses valores serão mantidos como variáveis de ambiente no CircleCI. Por ora, vamos definir o estágio de implantação no fluxo de trabalho:

- run:
    name: Deploy to Kinsta
    command: |
      curl -i -X POST 
        https://api.kinsta.com/v2/applications/deployments 
        -H "Authorization: Bearer $API_KEY" 
        -H "Content-Type: application/json" 
        -d '{
          "app_id": "'"$APP_ID"'",
          "branch": "main"
        }'

No código fornecido, você executa o comando cURL para acionar a implantação usando o ID do aplicativo armazenado em suas variáveis de ambiente. Lembre-se: as variáveis de ambiente são acessadas usando a sintaxe:

"$VARIABLE_NAME"

Armazenando variáveis de ambiente com o CircleCI

As variáveis de ambiente são cruciais para manter a segurança e a flexibilidade de seus fluxos de trabalho de integração e implantação contínuas. Para armazenar variáveis de ambiente no CircleCI, siga estas etapas:

  1. Abra seu projeto para ver todos os detalhes sobre seu pipeline e clique no botão Project Settings (Configurações de Projeto).
  2. Clique na aba Environment Variables (Variáveis de Ambiente) na barra lateral e adicione suas variáveis de ambiente.
Armazene as variáveis de ambiente.
Armazene as variáveis de ambiente.

Etapa 5: Configuração do fluxo de trabalho

Com o(s) job(s) configurado(s) e estruturado(s) em etapas organizadas, a próxima fase envolve a configuração do fluxo de trabalho. O fluxo de trabalho atua como um orquestrador, orientando a sequência de jobs e incorporando filtros específicos e regras para determinar como esses jobs são executados.

Neste tutorial, criaremos um fluxo de trabalho que aciona o job build exclusivamente quando há um push ou alterações no código do branch main do repositório:

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

Essa configuração é obtida com o uso de filtros que permitem que você controle quando um job é executado com base em determinadas condições. Você também pode incorporar triggers para programar quando o fluxo de trabalho deve ser executado (exemplo: diariamente à 0h UTC):

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
    triggers:
      - schedule:
          cron: "0 0 * * *"

O fluxo de trabalho acima apresenta um trigger definido com a palavra-chave schedule. A expressão cron "0 0 * * *" corresponde ao agendamento do fluxo de trabalho para a meia-noite UTC todos os dias.

Em uma expressão do cron, há cinco campos separados por espaços, cada um representando uma unidade de tempo diferente:

  1. Minuto (0-59): O primeiro campo representa o minuto da hora, definido como 0 para ser acionado no início da hora.
  2. Hora (0-23): O segundo campo indica a hora do dia, definida como 0 para a meia-noite.
  3. Dia do mês (1-31): O terceiro campo significa o dia, indicado por um asterisco (*) para qualquer dia.
  4. Mês (1-12): O quarto campo representa o mês, marcado com um asterisco (*) para qualquer mês.
  5. Dia da semana (0-6, em que 0 é domingo): O quinto campo significa o dia da semana, também marcado com um asterisco (*) para qualquer dia.

Com essa configuração do fluxo de trabalho, você pode gerenciar eficazmente quando e sob quais condições os jobs definidos são executados, mantendo um pipeline de CI/CD eficiente e simplificado.

Etapa 6: Confirme e observe

Depois que o fluxo de trabalho for configurado com êxito, confirme as alterações no repositório de controle de versão. O CircleCI detectará automaticamente a presença do arquivo de configuração e acionará os fluxos de trabalho definidos quando você alterar o código.

Detalhes do job CircleCI.
Detalhes do job CircleCI.

Clique no job build para revisar os detalhes. Se você tiver mais de um job, todos serão listados. Quando clicar em um job, a aba STEPS mostrará todas as etapas que o job executou, e se foram bem-sucedidas ou falharam.

Etapas do job.
Etapas do job.

Você também pode clicar em cada etapa para ver mais detalhes. Ao clicar na etapa Deploy to Kinsta, você verá mais detalhes sobre a solicitação de API e saberá se ela foi bem-sucedida:

Informações da etapa.
Informações da etapa.

Ao verificar o painel MyKinsta, você perceberá que o fluxo de trabalho aciona automaticamente a implantação. O fluxo de trabalho completo do CircleCI tem o seguinte aspecto:

version: 2.1
jobs:
  build:
    docker:
      - image: cimg/node:20.5.0
    steps:
      - checkout # Check out the code from the repository
      - run:
          name: Install Dependencies
          command: npm install
      - run:
          name: Compile Source Code
          command: npm run build
      - run:
          name: Run Unit Tests
          command: npm test
      - run:
          name: Run ESLint
          command: npm run lint
- run:
    name: Deploy to Kinsta
    command: |
      curl -i -X POST 
        https://api.kinsta.com/v2/applications/deployments 
        -H "Authorization: Bearer $API_KEY" 
        -H "Content-Type: application/json" 
        -d '{
          "app_id": "'"$APP_ID"'",
          "branch": "main"
        }'

workflows:
  version: 2
  build-test-lint:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main

Resumo

Agora você possui um processo personalizado de implantação do seu aplicativo React na Kinsta por meio do CircleCI. Essa abordagem permite que você tenha maior flexibilidade e autoridade sobre suas implantações, permitindo que sua equipe execute etapas especializadas no interior do processo.

Ao adotar o CircleCI, você está dando um passo substancial para aprimorar suas metodologias de desenvolvimento. A automação do seu pipeline de CI/CD não só garante a qualidade do código, mas também acelera os ciclos de lançamento.

Como você está usando a API da Kinsta? Quais endpoints você gostaria de ver adicionados à API? Que tutorial relacionado à API da Kinsta você gostaria de ler a seguir?

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.