Ferramentas de IA para Código

Deploy de apps com Claude Code na Vercel e Cloudflare (2026)

20 de ago. de 202615 min de leitura

Fazer o deploy de um app com o Claude Code significa que você pede para ele rodar vercel ou wrangler ali mesmo no seu terminal: ele instala a CLI, faz login, builda, publica em produção e depois lê os logs e corrige os erros para você. Você ainda precisa de uma conta na Vercel ou na Cloudflare e ainda faz o login por conta própria - a IA conduz os comandos, ela não passa a ser dona da hospedagem por mágica. Escolha a Vercel para um app Next.js/SSR rápido e tranquilo; escolha a Cloudflare para sites estáticos, a edge ou Workers full-stack baratos.

O que significa fazer deploy com o Claude Code? Ele consegue fazer sozinho?

Se você acabou de usar o Claude Code para criar um app Next.js ou um site estático e agora quer colocá-lo no ar, tenho uma boa notícia: você nunca precisa sair do terminal. Fazer deploy com o Claude Code é simplesmente deixar que ele rode os comandos do shell para você - instalar a CLI da plataforma, fazer login, rodar o build, enviar o código e então ler os logs para pegar e corrigir erros em loop.

O ponto principal: o Claude Code roda comandos de terminal de verdade. Ele não simula. Quando você diz "faça o deploy deste projeto na Vercel", ele realmente chama vercel --prod, espera o resultado e, se o build falhar, lê a mensagem de erro e propõe uma correção. É exatamente isso que torna tudo diferente de copiar e colar comandos de um post de blog. Se a ferramenta é novidade para você, dê uma olhada primeiro em o que é o Claude Code para entender como ele roda comandos em uma sandbox.

Mas ele NÃO "faz deploy por mágica". Três coisas que um humano ainda precisa fazer:

  • Você precisa de uma conta na Vercel ou na Cloudflare (o plano gratuito já serve para começar).
  • Na primeira vez, o passo de login geralmente abre um navegador para você confirmar - o Claude Code não entra na sua conta por você.
  • Você decide a plataforma, o domínio e as variáveis de ambiente - a IA pode sugerir, mas a palavra final é sua.

Resumindo: a IA cuida do trabalho repetitivo de comandos e da chata leitura de logs; você cuida das decisões e das contas. Ter essa divisão clara mantém suas expectativas no lugar.

Por que vale a pena fazer assim em vez de fazer o deploy na mão? Três motivos práticos. Primeiro, você não precisa decorar os comandos de cada plataforma - vercel e wrangler têm sintaxes diferentes, e as duas mudam bem rápido. Segundo, o loop de correção fica mais curto: quando um build falha, a IA lê o log ali mesmo, em vez de você copiar o erro e sair pesquisando na web. Terceiro, o contexto se mantém intacto - o Claude Code está na mesma pasta que acabou de buildar o app, então ele conhece a estrutura do projeto, qual framework você usou e onde fica a saída. Isso faz uma baita diferença em relação a colar comandos de um guia que não sabe nada sobre o seu código.

Antes de fazer o deploy (checklist)

Se um deploy vai correr bem é decidido, na maior parte, durante o preparo. Antes de pedir ao Claude Code para enviar o app para produção, confirme tudo isto:

  • Repositório git limpo: tudo commitado, sem alterações soltas. Se essa parte é novidade para você, veja o fluxo de trabalho com git no Claude Code.
  • O npm run build passa na sua máquina. Essa é a condição número um. Se o build falha localmente, ele com certeza vai falhar no servidor - não faça deploy "só para ver o que acontece".
  • Conheça o seu framework: Next.js, Vite/React ou HTML estático. A plataforma e o comando de deploy mudam conforme o tipo.
  • Tenha uma conta na Vercel ou na Cloudflare.
  • O .gitignore já bloqueia o .env e os arquivos de lock. Confira essa linha com atenção.

Aviso de segurança: não deixe o Claude Code commitar o .env ou chaves de API no git. Antes de deixá-lo rodar git add -A, garanta que o .gitignore contém .env e .env.local. Segredos ficam no painel da plataforma ou no wrangler secret, não no seu código.

Se o seu app tem um lado servidor (rotas de API, um banco de dados), também vale a pena ler como criar back-ends e APIs com o Claude Code para saber de quais variáveis de ambiente o app precisa antes de ir para produção. Acerte essa lista e os passos de deploy abaixo costumam levar só alguns minutos.

Método 1 - Deploy na Vercel com o Claude Code

A Vercel é a escolha mais tranquila para apps Next.js e SSR: boa parte é quase "clicar e pronto". Aqui está o fluxo de CLI que você pode pedir ao Claude Code para rodar passo a passo:

  1. Instale a CLI da Vercel: npm i -g vercel
  2. Faça login: vercel login - isso abre um navegador para você se autenticar (o passo que você faz sozinho).
  3. Vincule o projeto: vercel link - conecta a pasta atual a um projeto na Vercel.
  4. Crie um preview: rode vercel (sem flags) para buildar uma URL de preview e conferir primeiro.
  5. Defina as variáveis de ambiente: pelo painel da Vercel ou com vercel env add VAR_NAME.
  6. Publique em produção: vercel --prod.

No Claude Code você não precisa digitar cada comando acima. Um prompt assim já basta:

Deploy this project to Vercel. Run vercel link first,
create a preview for me to check, then ask me before
running vercel --prod. If the build fails, read the
log and suggest a fix.

O Claude Code vai rodar a sequência de comandos, parar no preview para você olhar e só publicar em produção depois que você aprovar. Se o build falhar, ele lê a saída de erro e corrige - é aqui que "a IA lê o log" economiza um tempo bem óbvio.

Novidade em 2026: a Vercel tem um plugin oficial para o Claude Code e um conector Vercel MCP que deixam o Claude Code trabalhar com a Vercel de forma mais limpa (gerenciar projetos, ler deployments). Se você faz deploy na Vercel com frequência, vale a pena testar os dois.

Para Next.js/SSR, a grande vantagem da Vercel é que você quase não configura o runtime - o framework é detectado automaticamente e você "só faz o deploy". Server Components, rotas de API e middleware rodam todos sem adaptador. O custo dessa troca: as despesas podem subir rápido com muito tráfego (veja a tabela comparativa abaixo).

Use os previews do jeito certo: sempre rode vercel (o preview) antes de --prod. Um preview ganha a própria URL e usa exatamente o código que você está prestes a publicar, mas sem afetar usuários reais. Abra essa URL, clique por alguns fluxos principais e só então deixe o Claude Code enviar para produção. É um hábito barato que evita você publicar um build quebrado no seu domínio principal.

Método 2 - Deploy na Cloudflare com o Claude Code (Pages e Workers)

A Cloudflare combina quando você quer algo barato, rodando na edge ou full-stack com Workers (KV, D1, R2). A ferramenta principal é o wrangler. Os passos:

  1. Instale o Wrangler: npm i -g wrangler (ou use npx wrangler para uma vez rápida).
  2. Faça login: wrangler login - abre um navegador para autenticar.
  3. Builde o app: npm run build para gerar a pasta de saída.
  4. Faça deploy no Pages: wrangler pages deploy <build-folder> (por exemplo dist com Vite, ou a pasta de build do seu framework).
  5. Defina os segredos: wrangler secret put SECRET_NAME ou pelo painel - nunca deixe fixos no código.
  6. Conecte um domínio + SSL: adicione um domínio personalizado no painel; a Cloudflare provisiona o SSL automaticamente.

Um prompt de exemplo para o Claude Code:

Build this app and deploy it to Cloudflare Pages with wrangler.
After it deploys, show me the .pages.dev URL so I can check it.
Remind me which secrets I need to set with wrangler secret put.

A cilada do Next.js na Cloudflare (leia com atenção): o Next.js não roda diretamente no Cloudflare Pages/Workers como roda na Vercel. Você precisa de uma camada de adaptador:

  • @cloudflare/next-on-pages - um adaptador que builda o Next.js para o Cloudflare Pages, rodando no runtime de edge.
  • OpenNext (@opennextjs/cloudflare) - a direção mais nova, com melhor suporte ao runtime Node dos Workers para apps Next.js complexos. Veja a documentação do OpenNext para Cloudflare.

Os dois normalmente exigem habilitar a flag de compatibilidade com o Node (nodejs_compat) na sua config. Pule esse passo e você vai bater em erros de runtime enigmáticos - é justamente isso que os guias só de Vercel deixam de fora. Você pode dizer ao Claude Code: "este app é Next.js, use o OpenNext para fazer o deploy na Cloudflare e ligue o nodejs_compat para mim".

A Cloudflare também tem uma documentação de agent-setup para o Claude Code que descreve como conectar um agente de IA à infraestrutura da Cloudflare. Para lógica dinâmica (banco de dados, cache, armazenamento de arquivos), use Workers junto com KV/D1/R2 em vez de espremer tudo em Pages estáticos: KV para chave-valor rápido, D1 para um banco SQL, R2 para armazenamento de objetos no estilo S3 sem taxas de egress. Você pode pedir ao Claude Code para criar os bindings desses serviços no wrangler.toml e depois escrever o código de leitura/escrita correspondente.

Comparada à Vercel, a troca com a Cloudflare é um pouco mais de configuração em troca de mais flexibilidade e menor custo em escala. Se o seu app é só estático/SPA, quase não há troca - o Pages pega a pasta de build e já serve na edge na hora. É só quando você chega no SSR do Next.js que a complexidade do adaptador realmente aparece.

Vercel ou Cloudflare? Uma tabela para escolher a plataforma

Não existe "melhor plataforma", só a que combina com o seu tipo de app. A tabela abaixo ajuda você a escolher rápido conforme o tipo de projeto que o Claude Code gerou:

Tipo de appEscolhaPor quêCusto inicial
Estático / SPA (Vite, React puro, HTML)Cloudflare PagesRede de edge ampla, banda generosa, deploys super-rápidosPlano gratuito disponível
Next.js / SSRVercelDetecção automática de framework, a DX mais tranquila, quase sem configPlano gratuito (Hobby)
API / funções na edgeCloudflare WorkersBaixa latência global, barato em escalaPlano gratuito disponível
Full-stack que precisa de BD/cache/armazenamentoCloudflare Workers + D1/KV/R2Banco de dados, chave-valor e armazenamento de objetos embutidosPlano gratuito disponível
Next.js, mas você quer bem baratoCloudflare + OpenNextMais barato com tráfego alto, em troca de mais configPlano gratuito disponível

Veredito rápido: a Vercel entrega a experiência Next.js mais tranquila com o mínimo de esforço mental; a Cloudflare entrega baixo custo, a edge e full-stack com Workers. As duas têm um plano gratuito de sobra para um app pessoal ou projeto paralelo. Se estiver na dúvida, comece nos dois planos gratuitos, deixe o Claude Code fazer o deploy em cada um e compare.

Lidando com erros comuns de deploy

Deploys raramente passam limpos na primeira tentativa. A força do Claude Code aqui é ler o log de deploy e corrigir em loop - você cola o erro ou simplesmente pede "leia essa saída e corrija". Aqui estão os erros que você mais vai encontrar e como lidar com eles:

  • O build falha na primeira vez. Normalmente uma dependência faltando ou um script de build errado. Diga ao Claude Code: "leia o log do build que acabou de falhar, encontre a dependência faltando ou o script errado no package.json e corrija". Esse é o erro mais comum e também o mais fácil de resolver.
  • Variáveis de ambiente faltando → o app faz deploy, mas mostra uma página em branco ou um 500. Verifique se as variáveis estão definidas no painel; lembre que as variáveis locais no .env NÃO vão sozinhas para o servidor.
  • Erro de edge-runtime do Next.js na Cloudflare. Sinais: "module not found" ou uma API do Node que não existe. Correção: use @cloudflare/next-on-pages ou OpenNext e habilite o nodejs_compat (veja a seção da Cloudflare acima).
  • Versão do Node incompatível. O local usa Node 20, mas o servidor tem outro padrão → resultados de build diferentes. Declare a versão na config do projeto ou no package.json (engines).
  • Commitou um segredo sem querer. Se uma chave de API foi parar no git, rotacione (revogue e gere de novo) a chave imediatamente - apagar o commit não basta, porque a chave já está exposta no histórico. Depois mova o segredo para o painel/wrangler secret, onde é o lugar dele.

Se você bater em um erro dentro da própria sessão do Claude Code (e não do lado da plataforma), veja os erros comuns do Claude Code. Dica geral: não refaça o deploy no escuro - sempre deixe a IA ler o log específico antes de corrigir qualquer coisa.

Automatize: git push → no ar (CI/CD e previews)

Deploys manuais pela CLI são ótimos na primeira vez, mas a longo prazo você quer que todo git push vá para o ar automaticamente. Tanto a Vercel quanto o Cloudflare Pages permitem conectar direto a um repositório do GitHub:

  • Conecte o repositório no painel da plataforma → todo push na branch principal faz deploy automático em produção.
  • Deploys de preview = QA de verdade. Todo pull request ganha a própria URL de preview para você (ou um revisor) conferir antes do merge. É praticamente QA de graça, então não pule.
  • Rollback com um comando. Se um build novo quebra, volte para o anterior quase na hora pelo painel - sem pânico.

Você também pode pedir ao Claude Code para escrever o arquivo de config: vercel.json para a Vercel, wrangler.toml para a Cloudflare, ou um workflow do GitHub Actions se você quer controle fino do pipeline. Combinado com o fluxo de trabalho com git no Claude Code, você ganha um ciclo de desenvolvimento enxuto: código → push → preview → merge → no ar.

Faça deploy mais rápido com uma skill pronta (ak-deploy)

Em vez de lembrar e digitar cada comando vercel/wrangler, você pode usar uma skill de deploy pronta. A ak-deploy detecta automaticamente o destino do deploy pela config do seu projeto ou por um arquivo docs/deployment.md - ela suporta Vercel, Cloudflare, Netlify, Railway, Fly.io e muitos outros - então normalmente uma frase como "faça o deploy deste app" já basta para ela escolher o fluxo certo. Para infraestrutura mais pesada (Cloudflare Workers/R2/D1, Docker, Kubernetes), a ak-devops cuida desse lado.

Essas skills ficam no Engineer Kit (que inclui a skill ak-deploy) - parte do bundle AgentKit para o Claude Code — agora $149 (de $198) (agentkit.best, usando a CLI ak). Para deixar claro e evitar confusão: este é o AgentKit, um pacote de skills/agentes para o Claude Code, que é completamente diferente do AgentKit da OpenAI. O Engineer Kit custa $99 (a página não lista nenhuma taxa recorrente), com atualizações vitalícias e garantia de reembolso. Se você quer primeiro entender como as skills funcionam no Claude Code, veja o que são as skills no Claude Code.

Perguntas frequentes (FAQ)

O Claude Code consegue fazer deploy sozinho?

Sim - o Claude Code roda comandos de terminal de verdade, então ele executa vercel/wrangler para você: instala a CLI, builda, faz o deploy e lê os logs para corrigir erros. Mas você ainda precisa de uma conta na Vercel/Cloudflare e ainda faz o primeiro login por conta própria.

Vercel ou Cloudflare é mais barato, e dá para usar de graça?

As duas têm um plano gratuito de sobra para um app pessoal ou projeto paralelo. A Cloudflare tende a ser mais barata com tráfego alto e para apps estáticos/de edge; a Vercel é mais tranquila para Next.js/SSR. Confira a página de preços para os limites exatos antes de escalar.

O que eu preciso para fazer deploy de Next.js na Cloudflare?

O Next.js não roda diretamente na Cloudflare. Você precisa do adaptador @cloudflare/next-on-pages ou do OpenNext (@opennextjs/cloudflare), e normalmente tem que habilitar a flag de compatibilidade com o Node (nodejs_compat). Na Vercel você não precisa desse passo.

O Claude Code pode vazar meus segredos?

Só se você deixá-lo commitar o .env/chaves de API no git. Previna: adicione o .env ao .gitignore e carregue os segredos pelo painel ou com wrangler secret put. Se uma chave vazar, rotacione (gere de novo) na hora, porque ela já está no histórico do git.

Qual é o jeito mais rápido de fazer deploy de HTML estático?

Para um site estático, o caminho mais rápido é wrangler pages deploy <folder> no Cloudflare Pages, ou rodar vercel na pasta do projeto. Peça ao Claude Code para rodar o comando e te entregar a URL no ar para conferir.

Como faço rollback quando um build novo quebra?

Tanto a Vercel quanto o Cloudflare Pages deixam você voltar para o deployment anterior direto no painel, quase na hora. Como cada deploy é um build imutável próprio, o rollback é bem seguro - sem precisar rebuildar.

Conclusão e próximos passos

Fazer deploy com o Claude Code se resume a um princípio: deixe a IA rodar os comandos e ler os logs, enquanto você decide a plataforma e as contas. Escolha a Vercel para Next.js e uma DX tranquila, escolha a Cloudflare para algo barato, na edge e full-stack com Workers. Tenha um repositório limpo, um build que roda localmente e segredos fora do git, e você já desviou de 80% dos problemas.

Próximo passo: se o seu app tem um lado servidor, veja como criar back-ends e APIs com o Claude Code; para automatizar o push-para-o-ar, veja o fluxo de trabalho com git no Claude Code.

Quer que o Claude Code faça o deploy com um único comando? A skill ak-deploy do Engineer Kit detecta a sua plataforma automaticamente e cuida do CI/CD também - prático quando você faz deploy de muitos projetos e prefere não decorar os comandos de cada plataforma.

Conheça o AgentKit (20% de desconto pelo link) →

J

Jasmine

Autora · Jasmine Daily

A autora por trás do Jasmine Daily - anotando pensamentos, experiências e momentos do dia a dia. Honesta, sem pressa, imperfeita.

Jasmine Daily

Tem mais coisa esperando para ser lida.

Se este texto falou com você, explore mais algumas páginas do diário.

Leia a seguir

Posts relacionados