{"id":62382,"date":"2023-11-17T09:01:01","date_gmt":"2023-11-17T12:01:01","guid":{"rendered":"https:\/\/kinsta.com\/pt\/?p=62382&preview=true&preview_id=62382"},"modified":"2023-11-20T09:49:04","modified_gmt":"2023-11-20T12:49:04","slug":"implantacao-continua-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/pt\/blog\/implantacao-continua-react\/","title":{"rendered":"Implanta\u00e7\u00e3o Cont\u00ednua de Aplicativos React com CircleCI e a API da Kinsta"},"content":{"rendered":"

A implanta\u00e7\u00e3o cont\u00ednua se tornou crucial no cen\u00e1rio em r\u00e1pida evolu\u00e7\u00e3o do desenvolvimento de software<\/a>. Ela promete ciclos de lan\u00e7amento mais r\u00e1pidos, redu\u00e7\u00e3o de erros humanos e, por fim, uma melhor experi\u00eancia do usu\u00e1rio.<\/p>\n

O desenvolvimento de software envolve a solu\u00e7\u00e3o de problemas do mundo real por meio de c\u00f3digo. A jornada do software desde a cria\u00e7\u00e3o at\u00e9 o cliente envolve v\u00e1rios est\u00e1gios, exigindo velocidade, seguran\u00e7a e confiabilidade. \u00c9 a\u00ed que a implanta\u00e7\u00e3o cont\u00ednua se destaca.<\/p>\n

Este artigo explica como integrar a plataforma CircleCI<\/a> para criar um fluxo de trabalho de integra\u00e7\u00e3o cont\u00ednua e entrega\/implanta\u00e7\u00e3o cont\u00ednuas (CI\/CD<\/a>), aproveitando o poder da API da Kinsta<\/a> para a implanta\u00e7\u00e3o cont\u00ednua de aplicativos \u2014 como no nosso exemplo aqui, o React. Essa combina\u00e7\u00e3o pode pavimentar um caminho suave do desenvolvimento \u00e0 produ\u00e7\u00e3o.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Entendendo a implanta\u00e7\u00e3o cont\u00ednua<\/h2>\n

A implanta\u00e7\u00e3o cont\u00ednua \u00e9 mais do que uma palavra da moda: \u00e9 uma mudan\u00e7a de paradigma no desenvolvimento de software. Envolve a automa\u00e7\u00e3o do processo de build, teste e implanta\u00e7\u00e3o de altera\u00e7\u00f5es de c\u00f3digo em servidores de produ\u00e7\u00e3o.<\/p>\n

O pipeline CI\/CD<\/a>, um componente fundamental da implanta\u00e7\u00e3o cont\u00ednua, orquestra todo o processo. Inclui controle de vers\u00e3o, teste automatizado e implanta\u00e7\u00e3o automatizada. Cada est\u00e1gio \u00e9 crucial para garantir que somente c\u00f3digos confi\u00e1veis e testados cheguem \u00e0 produ\u00e7\u00e3o.<\/p>\n

O que \u00e9 o CircleCI?<\/h2>\n

O CircleCI \u00e9 uma ferramenta popular para a implanta\u00e7\u00e3o de CI\/CD, que se integra a sistemas de controle de vers\u00e3o como GitHub<\/a>, GitLab<\/a> e Bitbucket<\/a>, permitindo que os desenvolvedores automatizem todo o pipeline de CI\/CD. Sua escalabilidade, extensibilidade e suporte a v\u00e1rias linguagens de programa\u00e7\u00e3o<\/a> fazem dela uma ferramenta vers\u00e1til para projetos de todos os tamanhos.<\/p>\n

Os desenvolvedores<\/a> do CircleCI definem fluxos de trabalho que s\u00e3o acionados automaticamente ap\u00f3s a confirma\u00e7\u00e3o do c\u00f3digo. Isso inicia os processos de build e teste, e, ap\u00f3s a conclus\u00e3o bem-sucedida, implanta o c\u00f3digo no ambiente de destino. Essa abordagem pr\u00e1tica n\u00e3o apenas economiza tempo, mas tamb\u00e9m reduz o risco de erros humanos durante a implanta\u00e7\u00e3o.<\/p>\n

Entendendo a API da Kinsta<\/h2>\n

A API da Kinsta<\/a> permite que voc\u00ea interaja com os servi\u00e7os hospedados pela Kinsta de forma program\u00e1tica, com a implanta\u00e7\u00e3o de aplicativos como parte da sua funcionalidade. Ao trabalhar com fluxos de trabalho de CI\/CD, voc\u00ea usar\u00e1 o comando cURL para interagir com a API da Kinsta a partir do fluxo de trabalho.<\/p>\n

Para acessar a API, \u00e9 necess\u00e1rio ter uma conta ativa em pelo menos um dos seguintes servi\u00e7os no MyKinsta: hospedagem de aplicativos<\/a>, hospedagem de banco de dados<\/a> ou hospedagem de WordPress<\/a>. Ap\u00f3s configurar sua conta, voc\u00ea pode gerar uma chave API, que ser\u00e1 usada para autenticar seu acesso \u00e0 API.<\/p>\n

Para gerar uma chave API:<\/p>\n

    \n
  1. V\u00e1 ao painel MyKinsta.<\/li>\n
  2. Navegue at\u00e9 a p\u00e1gina Chaves API <\/strong>(Seu nome<\/strong> > Configura\u00e7\u00f5es da empresa<\/strong> > Chaves API<\/strong>).<\/li>\n
  3. Clique em Criar chave API<\/strong>.<\/li>\n
  4. Escolha uma expira\u00e7\u00e3o ou defina uma data de in\u00edcio personalizada e o n\u00famero de horas para a chave expirar.<\/li>\n
  5. D\u00ea \u00e0 chave um nome exclusivo.<\/li>\n
  6. Clique em Gerar<\/strong>.<\/li>\n<\/ol>\n

    Ap\u00f3s criar uma chave de API, copie e salve em um local seguro (recomendamos que voc\u00ea use um gerenciador de senhas<\/a>). Lembre-se de que esta chave s\u00f3 ser\u00e1 mostrada uma \u00fanica vez no MyKinsta<\/strong>, ent\u00e3o \u00e9 essencial guard\u00e1-la cuidadosamente.<\/p>\n

    Como iniciar a implanta\u00e7\u00e3o com a API da Kinsta<\/h3>\n

    Para iniciar a implanta\u00e7\u00e3o de um aplicativo na Kinsta atrav\u00e9s da API, \u00e9 necess\u00e1rio ter o ID do aplicativo e o nome da branch que voc\u00ea deseja implantar no seu reposit\u00f3rio Git. Para encontrar o ID do seu aplicativo, comece acessando a lista dos seus aplicativos na Kinsta<\/a>, que fornecer\u00e1 detalhes sobre cada aplicativo, incluindo o ID.<\/p>\n

    A seguir voc\u00ea pode fazer uma solicita\u00e7\u00e3o POST<\/a> para o endpoint \/applications\/deployments<\/a><\/code> da API com um comando cURL:<\/p>\n

    curl -i -X POST \n  https:\/\/api.kinsta.com\/v2\/applications\/deployments \n  -H 'Authorization: Bearer <YOUR_TOKEN_HERE>' \n  -H 'Content-Type: application\/json' \n  -d '{\n    \"app_id\": \"<YOUR_APP_ID>\",\n    \"branch\": \"main\"\n  }'<\/code><\/pre>\n
    Esse comando cURL ser\u00e1 usado no fluxo de trabalho.<\/p>\n
    Como come\u00e7ar a usar o CircleCI<\/h2>\n
    Voc\u00ea precisar\u00e1 do c\u00f3digo-fonte hospedado em seu provedor Git preferido para come\u00e7ar a usar o CircleCI. Para este tutorial, vamos usar o aplicativo construtor de sites<\/a> desenvolvido para o tutorial Como Criar um Site WordPress com a API da Kinsta<\/a>. Sinta-se \u00e0 vontade para usar o reposit\u00f3rio navegando at\u00e9 ele no GitHub e selecionando: Usar este template<\/strong> > Criar um novo reposit\u00f3rio<\/strong>.<\/p>\n
    No aplicativo React<\/a>, s\u00e3o criados testes de unidade para testar cada componente. O ESLint<\/a> tamb\u00e9m \u00e9 usado para garantir que a sintaxe e a formata\u00e7\u00e3o do c\u00f3digo estejam perfeitas. Vamos configurar um fluxo de trabalho de CI\/CD que cria, testa e assegura que a sintaxe do nosso c\u00f3digo esteja correta, e por fim faz a implanta\u00e7\u00e3o na Kinsta usando a API.<\/p>\n
    Para come\u00e7ar, vamos explorar alguns conceitos-chave:<\/p>\n
      \n
    1. Fluxos de trabalho:<\/strong> O CircleCI \u00e9 baseado em fluxos de trabalho \u2014 sequ\u00eancias definidas de jobs que descrevem os est\u00e1gios do seu pipeline de CI\/CD. Os fluxos de trabalho podem incluir v\u00e1rias etapas, como cria\u00e7\u00e3o, teste, implanta\u00e7\u00e3o, e outras.<\/li>\n
    2. Jobs:<\/strong> Os jobs s\u00e3o unidades individuais de trabalho em um fluxo de trabalho. Cada job executa uma tarefa espec\u00edfica, como a build de c\u00f3digo, a execu\u00e7\u00e3o de testes ou a implanta\u00e7\u00e3o em um servidor. Esses jobs tamb\u00e9m podem incluir v\u00e1rias etapas executadas em sequ\u00eancia (execu\u00e7\u00e3o paralela), de modo que, quando uma delas falha, o job inteiro falha.<\/li>\n<\/ol>\n
      Etapa 1: Crie uma conta CircleCI<\/h3>\n
      Visite o site do CircleCI e crie uma conta se voc\u00ea ainda n\u00e3o tiver uma. Voc\u00ea pode se inscrever usando seu provedor Git preferido. Isso facilita o acesso a seus reposit\u00f3rios sem configura\u00e7\u00e3o adicional.<\/p>\n
      Etapa 2: Crie o arquivo de configura\u00e7\u00e3o<\/h3>\n
      No diret\u00f3rio raiz do seu projeto, crie uma pasta .circleci<\/strong>, se ela ainda n\u00e3o existir, e dentro dessa pasta crie um arquivo config.yml<\/strong>. Esse arquivo abrigar\u00e1 a configura\u00e7\u00e3o do seu fluxo de trabalho.<\/p>\n
      Etapa 3: Configure seu reposit\u00f3rio<\/h3>\n
      Ap\u00f3s fazer o login, navegue at\u00e9 o painel do CircleCI<\/a>, clique em Projects <\/strong>na barra lateral esquerda para ver uma lista de reposit\u00f3rios, e clique no bot\u00e3o Set Up Project <\/strong>(Configurar Projeto) para o reposit\u00f3rio que voc\u00ea deseja configurar.<\/p>\n
      \"Configure
      Configure seu reposit\u00f3rio.<\/figcaption><\/figure>\n
      Isso carregar\u00e1 uma caixa de di\u00e1logo em que o CircleCI detecta automaticamente o arquivo de configura\u00e7\u00e3o que voc\u00ea tem. Em seguida, clique no bot\u00e3o Set Up Project<\/strong>. Agora o CircleCI pode acessar sua base de c\u00f3digo e executar os fluxos de trabalho definidos nas altera\u00e7\u00f5es de c\u00f3digo.<\/p>\n
      Etapa 4: Defina o job do seu fluxo de trabalho<\/h3>\n
      No centro da configura\u00e7\u00e3o do seu pipeline CircleCI est\u00e1 esta etapa crucial: definir seu fluxo de trabalho dentro do arquivo config.yml<\/strong>. \u00c9 aqui que voc\u00ea gerencia a sequ\u00eancia de a\u00e7\u00f5es que o pipeline executar\u00e1. \u00c9 como se voc\u00ea estivesse delineando o plano para sua jornada do desenvolvimento \u00e0 produ\u00e7\u00e3o.<\/p>\n
      Isso come\u00e7a com a defini\u00e7\u00e3o da vers\u00e3o do CircleCI, que atualmente \u00e9 2.1<\/code>:<\/p>\n
      version: 2.1<\/code><\/pre>\n
      Voc\u00ea precisar\u00e1 de um job build<\/code> para cada projeto React. Esse job lida com as tarefas fundamentais que tornam seu c\u00f3digo pronto para a implanta\u00e7\u00e3o. Essas tarefas abrangem a instala\u00e7\u00e3o das depend\u00eancias necess\u00e1rias, a compila\u00e7\u00e3o do c\u00f3digo, a execu\u00e7\u00e3o de testes para garantir que tudo esteja funcionando sem problemas, a verifica\u00e7\u00e3o da qualidade do c\u00f3digo e, por fim, o envio do c\u00f3digo para o destino.<\/p>\n
      Como os projetos React geralmente precisam de ferramentas como o Node.js<\/a> para realizar o job, o CircleCI simplifica o acesso a essas ferramentas, oferecendo-as como imagens pr\u00e9-empacotadas<\/a>. Neste tutorial, especifique a vers\u00e3o do Node.js que voc\u00ea deseja usar. Vamos usar o Node.js v20<\/a>.<\/p>\n
      jobs:\n  build:\n    docker:\n      - image: cimg\/node:20.5.0<\/code><\/pre>\n
      Esse job executar\u00e1 v\u00e1rias etapas; portanto, vamos cri\u00e1-las. A primeira etapa \u00e9 checkout<\/code>, que busca a vers\u00e3o mais recente do seu c\u00f3digo no reposit\u00f3rio, para que todas as a\u00e7\u00f5es subsequentes funcionem com o c\u00f3digo mais recente.<\/p>\n
      steps:\n  - checkout<\/code><\/pre>\n
      Agora vamos \u00e0 verdadeira ess\u00eancia do job: fazer as coisas acontecerem. As etapas posteriores a checkout<\/code> abrangem as principais tarefas: instala\u00e7\u00e3o de depend\u00eancias, build do c\u00f3digo-fonte, execu\u00e7\u00e3o de testes de unidade e uso do ESLint para inspecionar seu c\u00f3digo em busca de sinais de alerta.<\/p>\n
      steps:\n  - checkout\n  - run:\n      name: Install Dependencies\n      command: npm install\n  - run:\n      name: Compile Source Code\n      command: npm run build\n  - run:\n      name: Run Unit Tests\n      command: npm test\n  - run:\n      name: Run ESLint\n      command: npm run lint<\/code><\/pre>\n
      Cada etapa, assim como as placas de sinaliza\u00e7\u00e3o em uma viagem, \u00e9 nomeada para ajudar voc\u00ea a acompanhar o que acontece quando o fluxo de trabalho est\u00e1 em pleno andamento. Essa clareza facilita a solu\u00e7\u00e3o de problemas e garante que tudo esteja no caminho certo \u00e0 medida que o fluxo de trabalho avan\u00e7a.<\/p>\n
      Acionando a implanta\u00e7\u00e3o cont\u00ednua na Kinsta<\/h4>\n
      A etapa final do job build<\/code> \u00e9 iniciar a implanta\u00e7\u00e3o na Kinsta por meio da API. Isso requer dois valores: sua chave API<\/strong> e o ID do aplicativo<\/strong>, que n\u00e3o devem ser p\u00fablicos. Esses valores ser\u00e3o mantidos como vari\u00e1veis de ambiente<\/a> no CircleCI. Por ora, vamos definir o est\u00e1gio de implanta\u00e7\u00e3o no fluxo de trabalho:<\/p>\n
      - run:\n    name: Deploy to Kinsta\n    command: |\n      curl -i -X POST \n        https:\/\/api.kinsta.com\/v2\/applications\/deployments \n        -H \"Authorization: Bearer $API_KEY\" \n        -H \"Content-Type: application\/json\" \n        -d '{\n          \"app_id\": \"'\"$APP_ID\"'\",\n          \"branch\": \"main\"\n        }'<\/code><\/pre>\n
      No c\u00f3digo fornecido, voc\u00ea executa o comando cURL para acionar a implanta\u00e7\u00e3o usando o ID do aplicativo armazenado em suas vari\u00e1veis de ambiente. Lembre-se: as vari\u00e1veis de ambiente s\u00e3o acessadas usando a sintaxe:<\/p>\n
      \"$VARIABLE_NAME\"<\/code><\/pre>\n
      Armazenando vari\u00e1veis de ambiente com o CircleCI<\/h4>\n
      As vari\u00e1veis de ambiente s\u00e3o cruciais para manter a seguran\u00e7a e a flexibilidade de seus fluxos de trabalho de integra\u00e7\u00e3o e implanta\u00e7\u00e3o cont\u00ednuas. Para armazenar vari\u00e1veis de ambiente no CircleCI, siga estas etapas:<\/p>\n
        \n
      1. Abra seu projeto para ver todos os detalhes sobre seu pipeline e clique no bot\u00e3o Project Settings<\/strong> (Configura\u00e7\u00f5es de Projeto).<\/li>\n
      2. Clique na aba Environment Variables <\/strong>(Vari\u00e1veis de Ambiente) na barra lateral e adicione suas vari\u00e1veis de ambiente.<\/li>\n<\/ol>\n
        \"Armazene
        Armazene as vari\u00e1veis de ambiente.<\/figcaption><\/figure>\n
        Etapa 5: Configura\u00e7\u00e3o do fluxo de trabalho<\/h3>\n
        Com o(s) job(s) configurado(s) e estruturado(s) em etapas organizadas, a pr\u00f3xima fase envolve a configura\u00e7\u00e3o do fluxo de trabalho<\/a>. O fluxo de trabalho atua como um orquestrador, orientando a sequ\u00eancia de jobs e incorporando filtros espec\u00edficos<\/a> e regras para determinar como esses jobs s\u00e3o executados.<\/p>\n
        Neste tutorial, criaremos um fluxo de trabalho que aciona o job build exclusivamente quando h\u00e1 um push ou altera\u00e7\u00f5es no c\u00f3digo do branch main<\/code> do reposit\u00f3rio:<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main<\/code><\/pre>\n
        Essa configura\u00e7\u00e3o \u00e9 obtida com o uso de filtros que permitem que voc\u00ea controle quando um job \u00e9 executado com base em determinadas condi\u00e7\u00f5es. Voc\u00ea tamb\u00e9m pode incorporar triggers para programar quando o fluxo de trabalho deve ser executado (exemplo: diariamente \u00e0 0h UTC):<\/p>\n
        workflows:\n  version: 2\n  build-test-lint:\n    jobs:\n      - build:\n          filters:\n            branches:\n              only:\n                - main\n    triggers:\n      - schedule:\n          cron: \"0 0 * * *\"<\/code><\/pre>\n
        O fluxo de trabalho acima apresenta um trigger<\/code> definido com a palavra-chave schedule<\/code>. A express\u00e3o cron \"0 0 * * *\"<\/code> corresponde ao agendamento do fluxo de trabalho para a meia-noite UTC todos os dias.<\/p>\n
        Em uma express\u00e3o do cron, h\u00e1 cinco campos separados por espa\u00e7os, cada um representando uma unidade de tempo diferente:<\/p>\n
          \n
        1. Minuto (0-59):<\/strong> O primeiro campo representa o minuto da hora, definido como 0<\/code> para ser acionado no in\u00edcio da hora.<\/li>\n
        2. Hora (0-23):<\/strong> O segundo campo indica a hora do dia, definida como 0<\/code> para a meia-noite.<\/li>\n
        3. Dia do m\u00eas (1-31):<\/strong> O terceiro campo significa o dia, indicado por um asterisco (*<\/code>) para qualquer dia.<\/li>\n
        4. M\u00eas (1-12):<\/strong> O quarto campo representa o m\u00eas, marcado com um asterisco (*<\/code>) para qualquer m\u00eas.<\/li>\n
        5. Dia da semana (0-6, em que 0 \u00e9 domingo):<\/strong> O quinto campo significa o dia da semana, tamb\u00e9m marcado com um asterisco (*<\/code>) para qualquer dia.<\/li>\n<\/ol>\n
          Com essa configura\u00e7\u00e3o do fluxo de trabalho, voc\u00ea pode gerenciar eficazmente quando e sob quais condi\u00e7\u00f5es os jobs definidos s\u00e3o executados, mantendo um pipeline de CI\/CD eficiente e simplificado.<\/p>\n
          Etapa 6: Confirme e observe<\/h3>\n
          Depois que o fluxo de trabalho for configurado com \u00eaxito, confirme as altera\u00e7\u00f5es no reposit\u00f3rio de controle de vers\u00e3o. O CircleCI detectar\u00e1 automaticamente a presen\u00e7a do arquivo de configura\u00e7\u00e3o e acionar\u00e1 os fluxos de trabalho definidos quando voc\u00ea alterar o c\u00f3digo.<\/p>\n
          \"Detalhes
          Detalhes do job CircleCI.<\/figcaption><\/figure>\n
          Clique no job build para revisar os detalhes. Se voc\u00ea tiver mais de um job, todos ser\u00e3o listados. Quando clicar em um job, a aba STEPS<\/strong> mostrar\u00e1 todas as etapas que o job executou, e se foram bem-sucedidas ou falharam.<\/p>\n
          \"Etapas
          Etapas do job.<\/figcaption><\/figure>\n
          Voc\u00ea tamb\u00e9m pode clicar em cada etapa para ver mais detalhes. Ao clicar na etapa Deploy to Kinsta<\/strong>, voc\u00ea ver\u00e1 mais detalhes sobre a solicita\u00e7\u00e3o de API e saber\u00e1 se ela foi bem-sucedida:<\/p>\n
          \"Informa\u00e7\u00f5es
          Informa\u00e7\u00f5es da etapa.<\/figcaption><\/figure>\n