O Que e Deploy e Por Que Vercel
Deploy e o ato de publicar seu projeto na internet, para que qualquer pessoa possa acessar. Ate agora, seu codigo vivia so no seu computador (e talvez no GitHub). Fazer deploy e pegar esse codigo e coloca-lo num servidor sempre ligado, com um endereco que o mundo inteiro pode digitar no navegador. A Vercel e uma plataforma que faz esse trabalho pesado por voce, de graca, em poucos segundos.
🧠 Analogia: Deploy e Abrir a Loja Pro Publico
Imagine que voce montou uma loja inteira dentro da sua casa: prateleiras prontas, produtos arrumados, vitrine linda. Mas a porta esta trancada e ninguem de fora sabe que ela existe. Fazer deploy e abrir essa porta e colocar uma placa na rua. De repente, qualquer pessoa que passar pode entrar.
- •Sua casa = seu computador (so voce ve)
- •A placa na rua = a URL publica (o endereco)
- •Abrir a porta = o deploy (publicar)
- •A Vercel = o shopping que cuida de tudo isso pra voce
💡 Por que Vercel e nao um servidor proprio?
No jeito tradicional, voce precisaria alugar um servidor, instalar sistema operacional, configurar um web server (Nginx), cuidar de certificado de seguranca (HTTPS) e atualizar tudo manualmente. A Vercel faz isso por voce em segundos: HTTPS automatico, atualizacao a cada git push, e plano gratuito generoso para projetos pessoais. E o caminho mais rapido do codigo ate o site no ar. (Servidor proprio voce aprende na Trilha 3 - tem seu lugar tambem.)
Criar Conta e Conectar o GitHub
Antes de publicar qualquer coisa, voce precisa de uma conta na Vercel e conecta-la ao seu GitHub. A boa noticia: voce nem cria senha. Voce entra com a propria conta do GitHub, e a Vercel passa a "enxergar" seus repositorios. Esse e o passo que liga as duas ferramentas.
Acesse o site da Vercel
Abra o navegador e va para o endereco oficial.
# No navegador, digite:
https://vercel.com
# Clique no botao "Sign Up" (Criar conta)
Escolha "Continue with GitHub"
Voce nao precisa criar senha nova. Use o login do GitHub.
Ao clicar, o GitHub abre uma tela pedindo para voce autorizar a Vercel. Isso da permissao para a Vercel ver seus repositorios. Clique em Authorize.
Escolha quais repositorios liberar
Voce decide: todos os repositorios ou so os que escolher.
O GitHub pergunta se a Vercel pode acessar todos os repos ou apenas alguns (Only select repositories). Para comecar, liberar so o projeto que voce quer publicar e mais seguro. Sempre da para adicionar mais depois.
👁 O que voce vai ver na tela
Depois de autorizar, a Vercel te leva para o Dashboard. E uma tela escura com o titulo "Overview" e, no centro, um botao grande:
# Dashboard da Vercel (primeira vez)
[ + Add New... ] [ Import Project ]
Let's build something new.
Import a Git Repository to get started.
Esse e o ponto de partida. No proximo topico, voce vai clicar em Import e fazer o primeiro deploy.
⚠️ Erro Comum
Problema: "Conectei, mas meu repositorio nao aparece na lista da Vercel."
Solucao: Quase sempre e porque, ao autorizar, voce escolheu "Only select repositories" e nao incluiu esse repo. Va em Vercel → Settings → Git (ou direto no GitHub: Settings → Applications → Vercel) e adicione o repositorio na lista de permitidos. Atualize a pagina e ele aparece.
Primeiro Deploy Automatico
Agora a parte que da gosto: importar o repositorio e ver o site no ar. Voce vai apertar pouquissimos botoes. A Vercel le seu codigo, descobre como construir (build), e em segundos te entrega uma URL funcionando. E ai vem o melhor: a partir de agora, todo git push atualiza o site sozinho.
Passo 1: Importe o repositorio
No Dashboard, clique em Add New → Project. A Vercel lista seus repos do GitHub. Encontre o seu e clique em Import.
# Lista de repositorios na Vercel
meu-portfolio [ Import ]
landing-page [ Import ]
Passo 2: Confira as configuracoes (geralmente automaticas)
A Vercel detecta sozinha o tipo de projeto. Para um site HTML/CSS simples, voce nem mexe em nada. Para frameworks (React, Next.js), ela ja preenche o build correto.
# Detectado automaticamente:
Framework Preset: Other (site estatico)
Build Command: (vazio - nao precisa)
Output Directory: ./
Passo 3: Clique em Deploy
Aperte o botao azul Deploy e assista. A Vercel mostra os logs do build em tempo real.
Running build...
Cloning github.com/voce/meu-portfolio
Installing dependencies...
Build completed in 8s
✓ Deployment Ready
Production: https://meu-portfolio.vercel.app
Passo 4: Abra sua URL
A Vercel mostra uma tela de comemoracao ("Congratulations!") com um botao Visit. Clique nele. Seu site esta no ar, acessivel de qualquer lugar do mundo. Mande o link pra alguem testar.
🧠 Analogia: A Esteira Automatica
Pense numa esteira de fabrica. Voce coloca a materia-prima (seu codigo) num ponto, e no outro ponto sai o produto pronto (o site no ar). Voce nao precisa montar nada manualmente: a esteira faz tudo. Depois de configurada uma unica vez, ela trabalha sozinha: cada vez que voce envia codigo novo (git push), a esteira liga, monta a nova versao e publica. Isso se chama deploy continuo.
💡 Dica: O deploy seguinte e ainda mais facil
Esse passo a passo todo so acontece na primeira vez. Depois de importado, voce nunca mais entra na Vercel para publicar. Basta editar seu codigo localmente e rodar:
$ git add .
$ git commit -m "novo texto na home"
$ git push
# A Vercel detecta o push e atualiza o site sozinha
Preview Deploys: Cada Branch Ganha uma URL
Aqui mora um dos recursos mais uteis da Vercel. Quando voce cria uma branch nova e abre um Pull Request, a Vercel publica automaticamente uma versao separada do site, com sua propria URL temporaria. Assim voce ve a mudanca rodando de verdade antes de mexer no site oficial. A producao continua intacta enquanto voce testa.
👁 O que voce vai ver no Pull Request
Voce cria a branch, faz push e abre o PR no GitHub. Em segundos, um robo da Vercel comenta no proprio PR com o link do preview:
# Comentario automatico no Pull Request
✓ Vercel
Latest commit deployed to Preview.
Preview: meu-portfolio-git-feature-novo-botao.vercel.app
Inspect: vercel.com/voce/.../deployments
Esse link e exclusivo daquela branch. A URL de producao nem fica sabendo.
🌐 URL de Producao
- •Vem da branch
main - •Endereco fixo:
meu-app.vercel.app - •E a versao que o publico ve
- •So muda quando voce faz merge na main
🧪 URL de Preview
- •Vem de qualquer branch / PR
- •Endereco unico com o nome da branch
- •So voce e quem revisa o PR veem
- •Atualiza a cada novo push na branch
✓ O que FAZER
- ✓Testar mudancas grandes numa branch separada
- ✓Mandar o link do preview pra alguem revisar
- ✓Abrir o preview no celular antes do merge
✗ O que NAO fazer
- ✗Testar tudo direto na branch
main(vai pro ar) - ✗Mandar o link de preview como se fosse o site final
- ✗Esquecer de fechar/mergear PRs antigos abertos
Configuracoes de Projeto: Build, Env e Framework
Na maioria dos projetos simples, a Vercel acerta tudo sozinha. Mas vale entender tres ajustes que voce vai encontrar em Settings: o comando de build, as variaveis de ambiente e o framework. Saber onde eles ficam te tira de muitos apuros quando um deploy nao funciona como esperado.
Build Command - Como montar o site
E o comando que a Vercel roda para transformar seu codigo no site final. Sites HTML puros nao precisam. Projetos com framework precisam.
# Site HTML/CSS simples:
(deixe vazio - nao ha build)
# Projeto React / Vite:
npm run build
# Onde o resultado fica (Output Directory):
dist
Environment Variables - Segredos do projeto
Sao valores secretos (chaves de API, senhas, tokens) que voce NAO coloca no codigo. Voce cadastra em Settings → Environment Variables, e a Vercel injeta na hora do build, sem expor o segredo no repositorio.
# Exemplo de variavel cadastrada na Vercel:
Name: API_KEY
Value: sk-xxxx... (fica oculto)
Env: Production, Preview, Development
Voce vai mergulhar fundo nisso no Modulo 2.4 - Variaveis de Ambiente.
Framework Preset - O tipo do projeto
A Vercel reconhece dezenas de frameworks e ja preenche build e output corretos para cada um. Voce so confirma.
Next.js → build automatico, zero config
Vite → npm run build, output dist/
Other → site estatico, sem build
⚠️ Erro Comum
Problema: "O deploy falhou com 'Build failed' / a pagina abre em branco."
Solucao: Quase sempre o Output Directory esta errado (a Vercel procura o site numa pasta que nao existe) ou faltou cadastrar uma Environment Variable. Abra os logs do deploy (botao View Build Logs), leia a ultima linha vermelha, e ajuste em Settings. Depois, em Deployments, clique nos tres pontinhos → Redeploy.
Dominios Customizados
A URL meu-app.vercel.app funciona perfeitamente, mas para algo profissional voce vai querer um endereco proprio, tipo www.seunome.com. Isso e o dominio customizado. Voce compra o dominio num registrador (Registro.br, Namecheap, GoDaddy) e o conecta a Vercel.
Passo 1: Adicione o dominio na Vercel
Va em Settings → Domains, digite seu dominio e clique em Add.
# Em Settings → Domains:
seunome.com [ Add ]
Passo 2: A Vercel te da os registros DNS
Ela mostra valores que voce precisa colar no painel do seu registrador (onde voce comprou o dominio).
# Copie esses registros:
Type: A Name: @ Value: 76.76.21.21
Type: CNAME Name: www Value: cname.vercel-dns.com
Passo 3: Cole no painel do registrador e aguarde
No site onde comprou o dominio, va em "Gerenciar DNS" e adicione os registros. Depois e so esperar: a propagacao do DNS leva de alguns minutos a algumas horas. A Vercel ainda gera o certificado HTTPS de graca, automaticamente.
🧠 Analogia: DNS e a Lista Telefonica
O DNS e como uma lista telefonica gigante da internet. Quando alguem digita seunome.com, o navegador consulta essa lista para descobrir o "numero" (o servidor) onde o site mora. Ao colar os registros DNS, voce esta basicamente escrevendo na lista: "quem procurar por seunome.com, mande para a Vercel". A propagacao e o tempo que essa nova entrada leva pra chegar em todas as listas do mundo.
💡 Dica: Comece sem comprar dominio
Voce nao precisa de dominio proprio para aprender nem para projetos pessoais. A URL .vercel.app e gratuita, tem HTTPS e funciona pra sempre. Compre um dominio so quando o projeto for de verdade (portfolio, negocio). E sempre da pra adicionar depois, sem refazer o deploy.
🎉 Voce conseguiu!
Se voce chegou ate aqui, ja sabe pegar um projeto do GitHub e coloca-lo no ar com URL propria, previews por branch e ate dominio customizado. Isso e deploy moderno de verdade. No proximo modulo, voce vai aprender o Supabase, para dar um banco de dados e backend ao seu site.
📚 Resumo do Modulo
Proximo Modulo:
2.2 - Supabase: Banco de Dados em Minutos (de a seu site um backend de verdade)