⚙️ Vercel Setup
Vercel e uma plataforma de deploy otimizada para front-end. Criar conta e configurar e simples e rapido.
🎯 O que e?
- • Plataforma de hospedagem especializada em front-end
- • Criada pelos mesmos desenvolvedores do Next.js
- • Tier gratuito generoso para projetos pessoais
- • Integra diretamente com GitHub
💡 Por que aprender?
Vercel e a forma mais rapida de colocar um app no ar. Deploy em segundos, sem configuracao de servidor.
📚 Conceitos-chave
vercel.com
Site para criar conta
Login com GitHub
Forma mais facil de conectar
Dashboard
Painel de controle dos projetos
📥 Import Repo
Importar repositorio conecta seu projeto GitHub ao Vercel. A partir dai, cada push dispara um novo deploy automaticamente.
🎯 O que e?
- • Processo de conectar repo GitHub ao Vercel
- • Vercel detecta automaticamente o framework usado
- • Configura build e deploy com um clique
- • Cria URL publica imediatamente
💡 Por que aprender?
Import e o passo que transforma codigo em site. Depois de importar, seu app esta no ar.
📚 Conceitos-chave
New Project
Botao para iniciar import
Framework Preset
Configuracao automatica
Build Output
Pasta gerada pelo build
🔐 Environment Variables
Variaveis de ambiente armazenam dados sensiveis como API keys sem expor no codigo. Essencial para seguranca.
🎯 O que e?
- • Valores configurados fora do codigo-fonte
- • API keys, tokens, URLs de banco de dados
- • Nao aparecem no repositorio publico
- • Podem variar entre ambientes (dev, prod)
💡 Por que aprender?
Nunca coloque secrets no codigo. Variaveis de ambiente sao a forma correta de gerenciar dados sensiveis em producao.
📚 Conceitos-chave
Settings > Env
Onde configurar no Vercel
process.env
Como acessar no codigo
.env.local
Arquivo local para dev
⚠️ Webhook Hardcode vs Env
Hardcode e quando URLs e tokens estao diretamente no codigo. Em producao, isso deve ser substituido por variaveis de ambiente.
🎯 O que e?
- • Hardcode: valor escrito diretamente no codigo
- • Problema: expoe secrets em repos publicos
- • Solucao: usar process.env.NOME_DA_VAR
- • Webhooks n8n devem ser variaveis de ambiente
🚨 Atencao
Nunca faca commit de webhooks ou tokens diretamente no codigo. Bots escaneiam GitHub em busca de secrets expostos.
📚 Conceitos-chave
Hardcode
Valor fixo no codigo (evitar)
Env Variable
Valor externo seguro
Secret Scanning
GitHub detecta secrets
🌐 Domain Configuration
Dominio personalizado substitui a URL generica do Vercel por seu proprio endereco, como meuapp.com.
🎯 O que e?
- • Conectar dominio proprio ao projeto Vercel
- • Requer configuracao de DNS no registrador
- • SSL/HTTPS configurado automaticamente
- • URL padrao vercel.app continua funcionando
💡 Por que aprender?
Dominio proprio da profissionalismo ao seu app. Usuarios confiam mais em URLs personalizadas.
📚 Conceitos-chave
DNS Records
A, CNAME para apontar dominio
SSL Certificate
HTTPS automatico e gratuito
Propagacao
DNS pode levar ate 48h
🔄 Auto-deploy on Push
Auto-deploy significa que cada push ao GitHub dispara automaticamente um novo deploy no Vercel. Zero intervencao manual.
🎯 O que e?
- • Integracao continua (CI/CD) automatica
- • Cada commit na main atualiza producao
- • Preview deploys para branches secundarios
- • Rollback facil para versoes anteriores
💡 Por que aprender?
Auto-deploy elimina trabalho manual. Fez commit? Esta no ar. Workflow moderno de desenvolvimento.
📚 Conceitos-chave
CI/CD
Continuous Integration/Deployment
Preview URL
URL temporaria para testar
Rollback
Voltar para deploy anterior
📋 Resumo do Modulo
Proximo Modulo:
8.8 - Security e Best Practices