🖥️ O que é deploy
Deploy é o processo de mover seu projeto da sua máquina local para um servidor que fica acessível na internet, 24 horas por dia, para qualquer pessoa com o link. É o momento em que seu projeto deixa de existir apenas para você e passa a existir para o mundo. Em 2025, deploy ficou tão simples quanto um push no git.
🗺️ O caminho do código ao usuário
📊 Como o deploy evoluiu
- 2010: Deploy = configurar servidor manualmente via SSH, instalar dependências, configurar nginx
- 2015: Heroku populariza o deploy via git push — ainda complexo mas menos
- 2020: Vercel e Netlify tornam front-end deploy em 30 segundos
- 2025: Deploy completo (front + back + banco) em menos de 5 minutos com Railway ou Render
▲ Vercel — deploy em 1 clique para Next.js
A Vercel criou o Next.js e é a plataforma de deploy mais otimizada para projetos React/Next.js. O fluxo é literalmente: conecte seu GitHub, selecione o repositório, clique em Deploy. Em 60 segundos você tem uma URL pública com HTTPS automático e deploy contínuo.
Conecte o GitHub em vercel.com
Menos de 30 segundos
Crie conta gratuita, autorize acesso ao GitHub. A Vercel vai listar todos os seus repositórios automaticamente.
Selecione o repositório e configure
~1 minuto
A Vercel detecta automaticamente o framework (Next.js, Vite, etc.) e configura o build command correto. Você só precisa adicionar as variáveis de ambiente.
Deploy automático a cada push
Todo git push na main = novo deploy
Depois do primeiro deploy, toda vez que você fizer push para a branch main, a Vercel detecta automaticamente e faz um novo deploy. Branches diferentes geram preview URLs separadas.
📊 Vercel — o que está incluso gratuitamente
- Domínio *.vercel.app com HTTPS automático e certificado SSL
- 100GB de bandwidth por mês — suficiente para milhares de usuários
- Preview deployments — toda branch tem sua própria URL de preview
- Analytics básico — visitantes, páginas mais acessadas
- Funções serverless — API routes do Next.js funcionam sem configuração adicional
🎨 Render — backends e APIs
Quando seu projeto tem um backend Node.js, Python, Go ou Ruby que precisa ficar rodando 24/7 (não apenas quando recebe requests), o Render é uma das melhores opções. É o Heroku moderno — simples, confiável e com plano gratuito funcional para desenvolvimento.
🔧 O que o Render oferece
💡 Render vs. Vercel — quando usar cada um
Use Vercel para: front-ends React/Next.js, sites estáticos, APIs leves (serverless functions)
Use Render para: servidores Node.js/Python que precisam ficar rodando, WebSockets, processamento em background, workers de fila
🚂 Railway — banco + backend com setup mínimo
O Railway resolve o problema mais comum de quem está começando: como rodar backend + banco de dados juntos de forma simples. Com alguns cliques, você provisiona um Postgres, um Redis e um serviço Node.js, todos conectados automaticamente e com variáveis de ambiente injetadas.
⚡ Setup Railway em 5 passos
💡 Stack recomendada para iniciantes
Front-end na Vercel + Back-end + Banco no Railway. Essa combinação cobre 95% dos projetos de aprendizado e MVPs. É gratuita até um certo ponto e escala facilmente quando necessário.
🌐 Configurando domínio — DNS e SSL
Seu projeto merece um domínio próprio. Domínios custam ~R$50/ano e transformam "projeto" em "produto". A configuração que parece complexa (DNS, SSL, HTTPS) foi simplificada ao ponto de levar menos de 10 minutos nas plataformas modernas.
🔧 Como configurar domínio na Vercel
Use Registro.br (domínios .com.br), Cloudflare (domínios internacionais mais baratos) ou Google Domains. Cloudflare tem os melhores preços sem taxas de renovação surpreendentes.
Settings → Domains → Add Domain. A Vercel mostra exatamente quais registros DNS você precisa adicionar no painel do seu registrador.
No painel do registrador, adicione os registros A e CNAME que a Vercel indicou. Propagação leva entre 5 minutos e 48 horas (geralmente menos de 1 hora).
A Vercel provisiona e renova o certificado SSL automaticamente via Let's Encrypt. Você não precisa fazer nada — HTTPS funciona assim que o DNS propaga.
📊 O que são DNS e SSL em linguagem simples
- DNS (Domain Name System) — é a agenda telefônica da internet. Transforma "meuapp.com" no endereço IP do servidor da Vercel. Configurar DNS = dizer "quando alguém acessar meuapp.com, mande para o servidor X".
- SSL/HTTPS — é o cadeado que aparece no browser. Garante que a comunicação entre o usuário e seu servidor é criptografada. Sem SSL, dados trafegam em texto puro — qualquer rede pode interceptar.
🔑 Variáveis de ambiente no deploy
Suas variáveis de ambiente do arquivo .env local não vão para o servidor sozinhas. Você precisa configurá-las na plataforma de deploy antes de fazer o primeiro push. Esse é o passo que mais gera bugs de "funciona local, quebra em produção".
📋 Onde configurar em cada plataforma
✓ Boas práticas
- ✓Mantenha um .env.example no repositório com os nomes das variáveis (sem valores)
- ✓Use valores de produção apenas no painel da plataforma — nunca no código
- ✓Separe chaves de test de chaves de produção (ex: Stripe tem sk_test_ e sk_live_)
✗ Erros comuns
- ✗Committar o .env com valores reais no repositório
- ✗Usar chaves de produção em ambiente de desenvolvimento
- ✗Esquecer de configurar as variáveis na plataforma antes do deploy
📊 Monitoramento básico
Colocar no ar é o começo — saber quando algo quebra é o que mantém o projeto de pé. Monitoramento básico não precisa ser caro ou complexo. Com três ferramentas gratuitas, você tem visibilidade suficiente para a maioria dos projetos iniciais.
Uptime monitoring — Uptime Robot
Gratuito para até 50 monitores
Verifica seu site a cada 5 minutos e manda email/SMS se ficar offline. Cria um histórico de uptime — útil para mostrar confiabilidade para usuários e investidores. Setup em 2 minutos.
Logs da plataforma
Nativo em Vercel, Render e Railway
Todas as plataformas têm um painel de logs em tempo real. Quando algo quebra em produção, esses logs são o primeiro lugar para investigar. Crie o hábito de verificar os logs após cada deploy.
Sentry — tracking de erros
Freemium — 5.000 erros/mês gratuito
Quando um erro ocorre para um usuário real, o Sentry captura o stack trace completo, o contexto do usuário e notifica você por email. É a diferença entre saber que um usuário teve problema e descobrir na hora que aconteceu.
💡 Integrar Sentry em 5 minutos
Para projetos Next.js, peça ao agente: "Integre o Sentry ao projeto seguindo a documentação oficial. Configure para capturar erros de front-end e back-end. Use a variável de ambiente SENTRY_DSN."
O agente vai instalar o pacote, configurar o arquivo de inicialização e criar os handlers de erro — tudo automaticamente.
✅ Resumo do Módulo 1.8 — e da Trilha 1
🎉 Trilha 1 Concluída!
Você percorreu todos os 8 módulos da Trilha de Fundamentos. Você agora tem o mapa completo do vibe coding: conceitos, mentalidade, ferramentas, primeiro projeto, prompts, workflow, segurança e deploy.
A Trilha 2: Leigos aprofunda os conceitos práticos com exemplos de casos de uso do mundo real, projetos guiados passo a passo e técnicas avançadas de construção de produtos.