MÓDULO 4.1 / 4 DE 4
Vercel e Supabase: a visão
Saber o que a Vercel e o Supabase fazem e como o seu repositório se liga a eles quando o projeto crescer.
1O que a Vercel faz
git add .
git commit -m "nova versão"
git push
Você vê: Depois de ligada, cada push gera uma publicação nova na Vercel, com um endereço próprio.
O que é
A Vercel publica sites e aplicativos direto do seu repositório do GitHub. É o passo seguinte ao Pages quando o projeto passa de uma página simples.
Por que aprender
Ela roda código no servidor, aceita domínio próprio e mostra uma prévia de cada mudança antes de ir ao ar.
Conceitos-chave
Hospedagem: onde o site fica no ar. Deploy: a publicação de uma versão. Prévia (preview): um endereço temporário para conferir a mudança.
2Ligue o repositório na Vercel
gh repo view --web
Você vê: O repositório abre no navegador; na Vercel, Add New → Project → Import mostra a lista dos seus repositórios.
O que é
Entre em vercel.com com a conta do GitHub, clique em Add New → Project e importe o repositório. A Vercel detecta o tipo de projeto e publica.
Por que aprender
A ligação é feita uma vez. Depois disso você não abre mais a Vercel para publicar.
Conceitos-chave
Importar: dar à Vercel acesso de leitura ao repositório. Framework: o tipo de projeto (página simples, Next.js e outros), que a Vercel reconhece sozinha.
3Cada push publica
git push
Você vê: Na Vercel, a lista de Deployments ganha uma linha nova a cada push.
O que é
Com o repositório ligado, você continua com a mesma rotina da parte 2: add, commit, push. A Vercel publica sozinha.
Por que aprender
Você não aprende uma ferramenta nova para publicar: o Git continua sendo a porta.
Conceitos-chave
Publicação automática: o serviço observa o repositório e publica quando chega versão nova. Branch main: a que vai para o endereço oficial.
4Domínio próprio
nslookup seudominio.com.br
Você vê: O endereço IP para onde o seu domínio aponta.
O que é
Em Settings → Domains da Vercel você adiciona o seu domínio, e ela mostra o registro DNS que você cadastra onde comprou o domínio.
Por que aprender
Troca o endereço .vercel.app pelo nome da sua marca.
Conceitos-chave
Domínio: o nome do site (seunegocio.com.br). DNS: a lista que diz para onde cada domínio aponta. nslookup: consulta para onde um domínio aponta agora.
5O que o Supabase faz
type .gitignore
Você vê: O conteúdo do .gitignore do projeto (se não existir, o próximo passo cria).
O que é
O Supabase dá ao seu projeto um banco de dados, login de usuários e armazenamento de arquivos, sem você instalar servidor.
Por que aprender
É o que transforma uma página em sistema: guardar contatos, pedidos, cadastros.
Conceitos-chave
Banco de dados: onde os registros ficam guardados. Login (autenticação): saber quem é o usuário. Chave do projeto: a senha que o seu código usa para falar com o Supabase.
6Chaves fora do repositório
echo .env>>.gitignore
type .gitignore
Você vê: .env aparece na lista do .gitignore. Depois peça ao agente: Crie um formulário de contato que salva no Supabase; leia as chaves do arquivo .env e nunca escreva as chaves no código.
O que é
As chaves do Supabase vão num arquivo .env, e o .gitignore impede que o Git envie esse arquivo para o GitHub.
Por que aprender
Chave publicada é chave vazada: qualquer pessoa pode usar o seu banco. Em repositório público isso acontece em minutos.
Conceitos-chave
.env: arquivo com as chaves e senhas do projeto. .gitignore: lista do que o Git não envia. Variável de ambiente: o jeito de passar a chave ao programa sem escrevê-la no código.
MÃO NA MASSA / ~10 MIN
Seu mapa do próximo passo
Marque cada item quando ele funcionar de verdade na sua máquina, não quando terminar de ler.
Cola da parte 4
git add .
git commit -m "nova versão"
git push
gh repo view --web
git push
nslookup seudominio.com.br
type .gitignore
echo .env>>.gitignore
type .gitignore
Critério de pronto
Saber o que a Vercel e o Supabase fazem e como o seu repositório se liga a eles quando o projeto crescer.
Confira o que ficou
Você quer um formulário que guarda os contatos recebidos. GitHub Pages resolve sozinho?
Ver resposta comentada
Não. Pages só mostra páginas. Guardar dados precisa de um banco, como o Supabase, e normalmente de uma hospedagem como a Vercel.