0Pricing
React Academy · Aula

Implantando na Vercel: configuração zero e URLs de pré-visualização

Conecte um repositório GitHub à Vercel, configure variáveis de ambiente e use implantações de pré-visualização.

Implantando na Vercel: configuração zero e URLs de pré-visualização é uma aula grátis de React Academy no CoddyKit. Esta é a aula 1 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 React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.

Por que usar a Vercel?

A Vercel é a plataforma criada pela equipe do Next.js. Ela oferece implantação sem configuração: conecte um repositório do GitHub e a Vercel detectará automaticamente a estrutura, fará a compilação e implantará a aplicação a cada envio.

Conectando um repositório

Importe um repositório do GitHub/GitLab/Bitbucket pelo painel da Vercel. A Vercel detecta a estrutura (Next.js, Vite, CRA) e configura automaticamente as definições de compilação.

Configurações do projeto

A Vercel detecta automaticamente: a estrutura, o comando de compilação (npm run build), o diretório de saída (.next, dist) e o comando de instalação (npm install). Substitua essas configurações nas configurações do projeto, se necessário.

Variáveis de ambiente

Adicione variáveis de ambiente no painel da Vercel, em Configurações do projeto → Variáveis de ambiente. Defina valores diferentes para os ambientes de Produção, Visualização e Desenvolvimento.

# In Vercel dashboard:
# NEXT_PUBLIC_API_URL = https://api.example.com  (Production)
# NEXT_PUBLIC_API_URL = https://api-staging.example.com  (Preview)

# In code:
const apiUrl = process.env.NEXT_PUBLIC_API_URL;

Implantações de visualização

Cada envio de uma ramificação do git e cada solicitação de pull recebe uma URL exclusiva de visualização (por exemplo, myapp-git-feature-xyz.vercel.app). Compartilhe-a para revisão antes da mesclagem, sem precisar de um ambiente de preparação manual.

Domínios personalizados

Adicione um domínio personalizado no painel da Vercel. Aponte seu DNS (registro A ou CNAME) para os IPs da Vercel, e a Vercel cuidará automaticamente do provisionamento do certificado SSL.

Configuração de vercel.json

Ajuste o comportamento da implantação: redirecionamentos, cabeçalhos, reescritas e seleção de região.

// vercel.json
{
  "redirects": [
    { "source": "/old-blog/:path*", "destination": "/blog/:path*", "permanent": true }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [{ "key": "Cache-Control", "value": "no-store" }]
    }
  ],
  "regions": ["iad1"] // deploy edge functions to US East
}

CLI da Vercel

Use a CLI da Vercel para implantar pelo terminal, obter localmente as variáveis de ambiente e gerenciar projetos.

# Install:
npm install -g vercel

# Link project and deploy:
vercel

# Pull env variables for local dev:
vercel env pull .env.local

# Deploy to production:
vercel --prod

Funções sem servidor

Os arquivos em api/ (roteador de páginas) ou app/api/*/route.ts (roteador de aplicativos) são implantados automaticamente como funções sem servidor no ambiente de execução de borda ou do Node.js da Vercel.

Ganchos de implantação

Crie ganchos de implantação (URLs de webhook) para acionar implantações a partir de serviços externos — isso é útil para alterações de conteúdo do CMS que devem iniciar uma nova implantação do site.

# Trigger a deploy from a CMS webhook:
curl -X POST https://api.vercel.com/v1/integrations/deploy/prj_xxx/yyy

# In Sanity Studio:
// Call this URL on document publish

Implantação de um monorrepositório

Em um monorrepositório Nx ou Turborepo, defina o diretório raiz da Vercel como a pasta do aplicativo específico e configure o comando de compilação para usar o executor de tarefas do monorrepositório.

# Vercel project settings:
# Root Directory: apps/web
# Build Command: npx nx build web --prod
# Output Directory: apps/web/.next

Verificação rápida

O que é uma implantação de visualização da Vercel?

Recapitulação

Conecte um repositório Git à Vercel para obter implantações sem configuração. Cada ramificação recebe uma URL de visualização. Gerencie as variáveis de ambiente por ambiente no painel, use vercel.json para redirecionamentos e cabeçalhos e a CLI da Vercel para implantações pelo terminal e obtenção de variáveis de ambiente.

Perguntas Frequentes

A aula “Implantando na Vercel: configuração zero e URLs de pré-visualização” é grátis?

Sim — o texto completo de “Implantando na Vercel: configuração zero e URLs de pré-visualização” é 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 React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.

O que vou aprender em “Implantando na Vercel: configuração zero e URLs de pré-visualização”?

Conecte um repositório GitHub à Vercel, configure variáveis de ambiente e use implantações de pré-visualização. Você pratica React 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 React Academy?

Nenhuma experiência prévia é necessária. React 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 1 de 4.

Quanto tempo leva a aula “Implantando na Vercel: configuração zero e URLs de pré-visualização”?

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 React Academy?

Sim. Cada aula de React 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

  1. Implantando na Vercel: configuração zero e URLs de pré-visualização
  2. Hospedando uma SPA React no AWS S3 e CloudFront
  3. Colocando um aplicativo React/Next.js em contêineres
  4. CI/CD do GitHub Actions para React
← Voltar para React Academy