A integração Vercel-Github é deslumbrante. Dar os primeiros passos no Vercel a partir de um repositório do Github é tão simples que, antes mesmo de você pesquisar como fazer o deploy, sua aplicação já está no ar.

Essa experiência inicial é simplesmente admirável! Não tenho dúvidas de que este foi um ponto crucial para eu continuar escolhendo hospedar no Vercel toda nova API que começo a desenvolver. Mas, caso você esteja desenvolvendo um projeto sozinho e esteja fazendo commits diretamente na branch principal, talvez não demore muito para você se sentir desconfortável com uma coisa: magia demais atrapalha.

Um dos primeiríssimos passos que costumo dar quando estou iniciando um novo projeto é completar o chamado "esqueleto" da aplicação. Se não fosse o esqueleto, nosso corpo dificilmente continuaria de pé. No caso de uma aplicação web, não creio que seja diferente. Sem Integração e Entrega Contínuas, em algum momento as coisas vão começar a desmoronar. E é neste ponto que o excesso de facilidade do Vercel atrapalha. Ainda que você tenha um serviço de Integração Contínua configurado no seu repositório e validando cada commit que você faz, o Vercel pouco se importa com isso. Um novo deployment é feito imediatamente a cada novo commit que a branch principal do repositório recebe, ignorando completamente as validações da Integração Contínua.

Para resolver este inconveniente você vai precisar desfazer esta facilidade de integração oferecida pelo Vercel e passar o controle do deployment para o serviço de Integração Contínua — CircleCI, no meu caso.

Considerando que seu repositório já foi importado no Vercel, você precisará efetuar os seguintes passos para desfazer o deployment automático e dispará-lo só no sucesso da integração contínua:

1. Desabilite o deploy automático no vercel.json do seu projeto
2. Crie um Deploy Hook para o seu projeto no Vercel
3. Adicione um novo job na configuração do CircleCI do seu projeto

Vercel JSON

É neste arquivo de configuração que você vai optar por desligar o deployment automático a partir de cada novo commit feito na branch principal

{
  // demais configurações

+  "git": {
+    "deploymentEnabled": false
+  }
}

Deploy Hook

Faça login no Vercel e acesse a tela de configurações do seu projeto. Em seguida, clique no item Git do menu vertical que fica à esquerda da tela. Role a tela até a seção Deploy Hooks. Preencha o formulário definindo um nome para o hook e o nome da branch a ser deployada.

Assim que o hook for criado, uma URL única será gerada. Trate essa URL como um segredo e jamais use ela de forma estática em qualquer parte do código do seu projeto.

Tela de configurações Git de um projeto Vercel

CircleCI

Por fim, você precisará adicionar um novo job no arquivo de configuração do CircleCI:

  deploy:
    <<: *default_env

    steps:
      - attach_workspace:
          at: ~/app
      - run:
          name: Deploy to Vercel
          command: curl -X POST $VERCEL_DEPLOYMENT_URL

Este job executa apenas um POST para a URL que irá disparar o deploy do seu projeto no Vercel. Essa URL é exatamente aquela gerada no passo anterior (Deploy Hook). Por isso ela foi definida como uma variável de ambiente do CircleCI.

Na seção workflows do arquivo de configuração do CircleCI, você precisará condicionar o novo job às etapas que deverão obrigatoriamente ter passado antes do novo job ser executado. Além disso, você deverá restringir este job à branch principal para que o fluxo de integração contínua não dispare o deploy quando estiver rodando sobre uma branch que não seja a principal.

workflows:
  version: 2

  branch-workflow:
    jobs:
      # ...existing jobs
      - deploy:
          requires:
            - format
            - test
          filters:
            branches:
              only:
                - main

Job de deploy no CircleCI

Neste repositório do GitHub você encontra um projeto base contendo apenas um endpoint e com todo o esqueleto da API propriamente configurado usando o CircleCI e Vercel como descrito neste post. Se alguma parte do texto não ficou clara o suficiente, você pode acessar o repositório e verificar em detalhes qualquer que seja a parte que não tenha ficado clara o suficiente.

Saiba mais: Se você gostou deste post, talvez possa se interessar também pelas minhas lições aprendidas ao construir uma API NodeJS Serverless usando Vercel, Neon e Prisma ORM.