Frontend Academy · Aula

Implementação no Vercel, Netlify e Cloudflare Pages

Ligar o seu repositório a cada plataforma, configurar comandos de compilação e diretórios de saída e compreender as implementações de pré-visualização para branches.

Implementação no Vercel, Netlify e Cloudflare Pages é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

O trio moderno de hospedagem de front-end

Vercel, Netlify e Cloudflare Pages são as principais plataformas para implantar aplicativos de front-end. Todas oferecem: implantações baseadas em Git, ramificações de pré-visualização, domínios personalizados, CDN de borda e funções sem servidor. Escolha uma e mantenha-a.

Vercel — criada para Next.js

Criada pela equipe do Next.js. Integração de primeira linha com Next.js: otimização de imagens sem configuração, ISR, funções de borda e Speed Insights. Também oferece suporte a Vite, Nuxt, Astro e à maioria dos frameworks estáticos.

Implantação na Vercel

Conecte um repositório do GitHub, GitLab ou Bitbucket. A Vercel detecta automaticamente o framework, executa build e faz a implantação.

# Manual deploy (any project):
npm install -g vercel
vercel login
vercel       # preview deploy
vercel --prod  # production deploy

# Or push to main — auto-deploys via Git integration.

Configuração de vercel.json

Substitua os padrões (comandos de compilação, redirecionamentos, cabeçalhos e reescritas).

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": "vite",
  "headers": [{
    "source": "/(.*)",
    "headers": [{ "key": "X-Frame-Options", "value": "DENY" }]
  }],
  "redirects": [{ "source": "/old", "destination": "/new", "permanent": true }]
}

Netlify — a original

Foi pioneira nas implantações estáticas modernas. Oferece excelente suporte a formulários, identidade e análises. As funções da Netlify e as funções de borda permitem executar código sem servidor. Oferece ótimo suporte a Vite, Hugo e Eleventy.

Implantação na Netlify

Conecte um repositório ou arraste e solte uma pasta compilada. Configure pelo painel ou por meio de netlify.toml.

# netlify.toml
[build]
  command = "npm run build"
  publish = "dist"

[build.environment]
  NODE_VERSION = "20"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200   # SPA fallback

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "DENY"

CLI da Netlify

Desenvolvimento local com funções sem servidor.

npm install -g netlify-cli
netlify login
netlify init
netlify dev       # local server with functions
netlify deploy    # preview
netlify deploy --prod

Cloudflare Pages

Implanta na rede de borda global da Cloudflare. As funções do Pages permitem executar código sem servidor no ambiente de execução do Workers. Oferece um nível gratuito generoso. É excelente para Astro, Hono e Remix.

Implantação no Cloudflare Pages

Conecte um repositório pelo painel da Cloudflare. Ou use a CLI wrangler.

# Direct upload via wrangler:
npm install -g wrangler
wrangler login
wrangler pages deploy ./dist --project-name=my-site

# Or push to GitHub — auto-deploys.

wrangler.toml para Pages

O Cloudflare Pages usa wrangler.toml para a configuração de Workers e funções.

# wrangler.toml
name = "my-site"
compatibility_date = "2024-01-01"
pages_build_output_dir = "dist"

[vars]
API_URL = "https://api.example.com"

[[d1_databases]]
binding = "DB"
database_name = "my-db"
database_id = "..."

Implantações de pré-visualização

As três plataformas criam uma URL exclusiva para cada ramificação de PR. Os revisores podem clicar nela e testar as alterações de forma isolada. Esse agora é o fluxo de trabalho padrão das equipes.

Variáveis de ambiente

As três oferecem variáveis específicas para cada ambiente (produção, pré-visualização e desenvolvimento) pelo painel ou pela CLI. As variáveis de front-end devem ter um prefixo (Vite: VITE_, Next: NEXT_PUBLIC_) para serem enviadas ao navegador.

# Vercel:
vercel env add API_URL production

# Netlify:
netlify env:set API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

Domínios personalizados e SSL

As três gerenciam certificados SSL automaticamente (Let's Encrypt). Aponte seu registro DNS A/CNAME para o destino delas — elas emitem e renovam os certificados. Os domínios personalizados são gratuitos em todos os níveis pagos.

Escolhendo entre as três

Vercel: melhor para Next.js, DX refinada e um pouco mais cara. Netlify: melhores formulários e identidade, com um ecossistema maduro de plug-ins. Cloudflare Pages: melhor desempenho de borda, menor custo em escala e ótima integração com Workers. As três são excelentes.

Verificação rápida

Qual é a maneira padrão de criar uma URL de pré-visualização implantável para uma solicitação de pull na Vercel, Netlify ou Cloudflare Pages?

Recapitulação: hospedagem de front-end

Vercel: melhor integração com Next.js. Netlify: formulários, identidade e plug-ins. Cloudflare Pages: desempenho de borda e menor custo. As três oferecem: implantações automáticas baseadas em Git, URLs de pré-visualização por PR, variáveis de ambiente por ambiente, SSL automático e domínios personalizados. Configure pelo painel ou pelo arquivo de configuração da plataforma (vercel.json, netlify.toml, wrangler.toml).

Perguntas Frequentes

A aula “Implementação no Vercel, Netlify e Cloudflare Pages” é grátis?

Sim — o texto completo de “Implementação no Vercel, Netlify e Cloudflare Pages” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Implementação no Vercel, Netlify e Cloudflare Pages”?

Ligar o seu repositório a cada plataforma, configurar comandos de compilação e diretórios de saída e compreender as implementações de pré-visualização para branches. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Implementação no Vercel, Netlify e Cloudflare Pages”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

GitHub Actions para frontend: lint, testes e compilação
Implementação no Vercel, Netlify e Cloudflare Pages
Variáveis de ambiente na integração contínua
Verificações automatizadas do Lighthouse

← Voltar para Frontend Academy