Modulo 5 / Arquitetura Web e Deploy

Deploy com Vercel

Deploy de projetos front-end e back-end com a Vercel.

school Aula 24 schedule 2 horas

Plataforma

O que é a Vercel?

rocket_launch Plataforma de deploy

▸ Criada pela mesma equipe do Next.js
▸ Deploy automático integrado com GitHub
▸ Plano gratuito generoso para projetos pessoais
▸ CDN global (seu site carrega rápido no mundo todo)
▸ HTTPS automático e domínio .vercel.app gratuito

auto_awesome O que suporta

description Sites estáticos (HTML/CSS/JS)

code Frameworks (React, Next.js, Vue, Angular)

functions Serverless Functions (API back-end)

preview Preview Deployments (por Pull Request)

key Variáveis de ambiente seguras

Primeiros passos

Criando sua conta

person_add Cadastro

1 Acesse vercel.com

2 Clique em Sign Up

3 Escolha Continue with GitHub

4 Autorize o acesso ao seu GitHub

5 Escolha o plano Hobby (gratuito)

check_circle Vantagens do plano Hobby

▸ Deploys ilimitados
▸ HTTPS automático
▸ 100 GB de bandwidth/mês
▸ Serverless Functions inclusas
▸ Preview deployments em PRs
▸ Analytics básico

lightbulb O plano Hobby é mais do que suficiente para projetos acadêmicos e pessoais.

Front-end

Deploy de site estático

cloud_upload Pelo painel web

1 No dashboard, clique em Add New Project

2 Selecione o repositório do GitHub

3 A Vercel detecta automaticamente o tipo de projeto

4 Clique em Deploy

5 Aguarde o build e acesse sua URL!

terminal Pela CLI (Vercel CLI)

# Instalar a CLI globalmente
$ npm install -g vercel

# Na pasta do projeto, fazer deploy
$ cd meu-site
$ vercel

# A CLI pergunta algumas configurações
# e faz o deploy automaticamente

# Deploy para produção
$ vercel --prod

lightbulb A CLI é útil para quem prefere o terminal. O painel web é mais visual e recomendado para iniciantes.

Automação

Deploy automático

sync Como funciona

1 Você faz git push para o GitHub

2 A Vercel detecta o push automaticamente

3 Faz o build do projeto (se necessário)

4 Publica a nova versão automaticamente

preview Preview Deployments

▸ Cada Pull Request ganha uma URL de preview única
▸ Permite testar mudanças antes de ir para produção
▸ A URL aparece automaticamente no PR do GitHub
▸ Útil para revisão de código em equipe

Produção: meu-site.vercel.app

Preview: meu-site-abc123-user.vercel.app

Configuração

Variáveis de ambiente

key No painel da Vercel

1 Acesse o projeto na Vercel

2 Vá em Settings > Environment Variables

3 Adicione chave e valor

4 Escolha os ambientes (Production, Preview, Development)

code Usando no código

// No back-end (Node.js / Serverless)
const dbUrl = process.env.DATABASE_URL;

// No front-end (framework com build)
// Variáveis devem começar com
// NEXT_PUBLIC_ (Next.js) ou
// VITE_ (Vite)
const apiKey = process.env.NEXT_PUBLIC_API_KEY;

warning Variáveis de ambiente no front-end ficam expostas no código do navegador. Use apenas para dados nao sensíveis.

Back-end

Serverless Functions

functions O que sao

▸ Funções que rodam no servidor sem precisar configurar um
▸ Executam sob demanda (nao ficam rodando o tempo todo)
▸ Ideais para APIs simples, processamento e integrações
▸ Escalam automaticamente

code Exemplo

// api/hello.js
export default function handler(req, res) {
  res.status(200).json({
    message: "Olá, Vercel!",
    hora: new Date().toLocaleString()
  });
}

Acessível em:

https://meu-site.vercel.app/api/hello

lightbulb Basta criar arquivos na pasta api/ do projeto. Cada arquivo vira um endpoint automaticamente.

Alternativa

Conhecendo a Netlify

language Similariedades com Vercel

▸ Deploy automático via GitHub
▸ HTTPS e CDN incluídos
▸ Plano gratuito generoso
▸ Preview por Pull Request
▸ Serverless Functions

compare_arrows Vercel vs Netlify

Next.js Vercel (melhor suporte)

Formulários Netlify (built-in)

CMS Netlify (Netlify CMS)

Performance Ambos excelentes

Facilidade Ambos muito simples

Troubleshooting

Erros comuns

error Build failed

▸ Verifique os logs de build no painel
▸ Teste o build localmente antes do push
▸ Certifique-se que o package.json está correto

visibility_off Página em branco

▸ Verifique se o index.html está na raiz
▸ Use caminhos relativos (nao absolutos)
▸ Confira o console (F12) por erros JS

vpn_key_off API nao funciona

▸ Variáveis de ambiente configuradas na Vercel?
▸ A API usa HTTPS?
▸ CORS configurado corretamente?

Hora de praticar

Exercício prático

rocket_launch Deploy na Vercel

Crie uma conta na Vercel conectada ao seu GitHub
Importe um dos seus repositórios (projeto do Módulo 2 ou 3)
Faça o deploy e acesse a URL gerada
Faça uma alteração no código, push, e veja o deploy automático
Crie um Pull Request e observe a URL de preview
Adicione uma Serverless Function em api/hello.js

lightbulb Desafio extra: faça deploy do mesmo projeto na Netlify e compare o processo.

Próxima aula

Aula 25

Domínios, SSL/TLS e boas práticas de segurança.

task_alt O que aprendemos hoje

check_circle O que é a Vercel e como criar uma conta
check_circle Deploy de front-end (painel web e CLI)
check_circle Deploy automático e preview deployments
check_circle Variáveis de ambiente e Serverless Functions
check_circle Netlify como alternativa e troubleshooting

Próxima aula

auto_stories Referência: Vercel Docs