From da6b1c8847b53f44577dd8c29a9a3ba0136497c3 Mon Sep 17 00:00:00 2001 From: Reifonas Date: Tue, 24 Feb 2026 08:08:11 -0300 Subject: [PATCH] feat: Preparar app para deploy na Vercel (mantendo Netlify) --- .vercelignore | 50 +++++++- DEPLOY_VERCEL.md | 291 ++++++++++++++++++++++++++++++++++++++++++ VERCEL_QUICK_START.md | 65 ++++++++++ package.json | 2 + vercel.json | 22 +++- 5 files changed, 426 insertions(+), 4 deletions(-) create mode 100644 DEPLOY_VERCEL.md create mode 100644 VERCEL_QUICK_START.md diff --git a/.vercelignore b/.vercelignore index a48e5d3..68299f1 100644 --- a/.vercelignore +++ b/.vercelignore @@ -1,7 +1,51 @@ +# Dependencies node_modules +.pnp +.pnp.js + +# Testing +coverage + +# Production build dist + +# Misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +# Logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# IDE +.vscode +.idea +*.swp +*.swo +*~ + +# Capacitor +ios/ +android/ + +# Scripts +scripts/ + +# Documentation +documentation/ +.trae/ + +# Database scripts +database_scripts/ +*.sql + +# Git .git -.trae -.log -.figma \ No newline at end of file +.gitignore +.gitattributes diff --git a/DEPLOY_VERCEL.md b/DEPLOY_VERCEL.md new file mode 100644 index 0000000..40b0d92 --- /dev/null +++ b/DEPLOY_VERCEL.md @@ -0,0 +1,291 @@ +# 🚀 DEPLOY NA VERCEL - rdo.tracksteel.com.br + +## ✅ VANTAGENS DA VERCEL + +- ✅ Melhor suporte para Vite/React +- ✅ Deploy automático via GitHub +- ✅ Configuração de variáveis mais simples +- ✅ Edge Functions nativas +- ✅ Melhor performance global + +--- + +## 📋 PASSO A PASSO COMPLETO + +### 1️⃣ CRIAR PROJETO NA VERCEL (5 minutos) + +1. Acesse: https://vercel.com/login +2. Faça login com GitHub +3. Clique em **"Add New..."** → **"Project"** +4. Selecione o repositório: **Reifonas/RDOC** +5. Clique em **"Import"** + +--- + +### 2️⃣ CONFIGURAR O PROJETO + +Na tela de configuração: + +#### Framework Preset: +``` +Vite +``` + +#### Build Command: +``` +npm run build +``` + +#### Output Directory: +``` +dist +``` + +#### Install Command: +``` +npm ci +``` + +--- + +### 3️⃣ ADICIONAR VARIÁVEIS DE AMBIENTE + +Na seção **"Environment Variables"**, adicione: + +**Variável 1:** +``` +Name: VITE_SUPABASE_URL +Value: https://xzudfhifaancyxxfdejx.supabase.co +``` + +**Variável 2:** +``` +Name: VITE_SUPABASE_ANON_KEY +Value: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh6dWRmaGlmYWFuY3l4eGZkZWp4Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzEzNjE0MTAsImV4cCI6MjA4NjkzNzQxMH0.c5CHWhfXcMrm27LfxEt6OZtttXXvVJOeWu-IbnNLfWY +``` + +**IMPORTANTE:** Marque para aplicar em **Production**, **Preview** e **Development** + +--- + +### 4️⃣ FAZER O DEPLOY + +1. Clique em **"Deploy"** +2. Aguarde o build finalizar (2-3 minutos) +3. Anote a URL gerada (ex: `https://rdoc-xxx.vercel.app`) + +--- + +### 5️⃣ CONFIGURAR DOMÍNIO CUSTOMIZADO + +1. No dashboard do projeto, vá em **"Settings"** → **"Domains"** +2. Clique em **"Add"** +3. Digite: `rdo.tracksteel.com.br` +4. Clique em **"Add"** + +#### Configurar DNS: + +A Vercel vai mostrar os registros DNS necessários. Configure no seu provedor de DNS: + +**Opção A - CNAME (Recomendado):** +``` +Type: CNAME +Name: rdo +Value: cname.vercel-dns.com +``` + +**Opção B - A Record:** +``` +Type: A +Name: rdo +Value: 76.76.21.21 +``` + +--- + +### 6️⃣ CONFIGURAR SUPABASE + +Acesse: https://supabase.com/dashboard/project/xzudfhifaancyxxfdejx/auth/url-configuration + +#### Redirect URLs (adicione estas): + +``` +https://rdo.tracksteel.com.br/auth/callback +https://rdo.tracksteel.com.br/* +https://rdoc-xxx.vercel.app/auth/callback +https://rdoc-xxx.vercel.app/* +http://localhost:5173/auth/callback +http://localhost:3000/auth/callback +``` + +**Substitua `rdoc-xxx` pela URL real que a Vercel gerou!** + +#### Site URL: +``` +https://rdo.tracksteel.com.br +``` + +Clique em **Save** + +--- + +### 7️⃣ CONFIGURAR GOOGLE CLOUD + +Acesse: https://console.cloud.google.com/apis/credentials + +Clique no seu **OAuth 2.0 Client ID** + +#### Authorized redirect URIs (adicione estas): + +``` +https://xzudfhifaancyxxfdejx.supabase.co/auth/v1/callback +https://rdo.tracksteel.com.br/auth/callback +https://rdoc-xxx.vercel.app/auth/callback +http://localhost:5173/auth/callback +http://localhost:3000/auth/callback +``` + +**Substitua `rdoc-xxx` pela URL real que a Vercel gerou!** + +Clique em **Save** + +--- + +## 🧪 TESTAR O DEPLOY + +### Teste 1: Acessar o site + +1. Abra: `https://rdoc-xxx.vercel.app` (URL da Vercel) +2. Ou: `https://rdo.tracksteel.com.br` (após configurar DNS) +3. O site deve carregar normalmente + +--- + +### Teste 2: Verificar variáveis + +1. Abra o DevTools (F12) +2. Vá na aba **Network** +3. Recarregue a página +4. Procure por requisições para `xzudfhifaancyxxfdejx.supabase.co` +5. Se aparecer = ✅ Variáveis configuradas! + +--- + +### Teste 3: Login com Google + +1. Clique em **"Login com Google"** +2. Autorize o app +3. Deve redirecionar para `/auth/callback` +4. Deve fazer login com sucesso ✅ + +--- + +## 🔄 DEPLOY AUTOMÁTICO + +A Vercel faz deploy automático quando você faz push para o GitHub: + +- **Branch `main`** → Deploy em produção +- **Outras branches** → Deploy de preview + +--- + +## 📊 MONITORAMENTO + +### Ver logs de build: +1. Acesse: https://vercel.com/dashboard +2. Clique no projeto +3. Vá em **"Deployments"** +4. Clique em um deploy para ver os logs + +### Ver logs de runtime: +1. No dashboard do projeto +2. Vá em **"Logs"** +3. Veja erros em tempo real + +--- + +## 🔧 CONFIGURAÇÕES AVANÇADAS + +### Variáveis de ambiente por ambiente: + +- **Production**: Usado no domínio principal +- **Preview**: Usado em branches de teste +- **Development**: Usado localmente com `vercel dev` + +### Revalidar cache: + +Se fizer mudanças e não aparecerem: +1. Vá em **"Deployments"** +2. Clique nos 3 pontos do deploy +3. Clique em **"Redeploy"** + +--- + +## 🆚 COMPARAÇÃO: VERCEL vs NETLIFY + +| Recurso | Vercel | Netlify | +|---------|--------|---------| +| Build Vite | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +| Deploy automático | ✅ | ✅ | +| Edge Functions | ✅ Nativo | ✅ Limitado | +| Performance | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐ | +| Configuração | Mais simples | Mais complexa | +| Logs | Excelente | Bom | + +--- + +## 📋 CHECKLIST FINAL + +- [ ] Projeto criado na Vercel +- [ ] Variáveis de ambiente configuradas +- [ ] Deploy realizado com sucesso +- [ ] Domínio customizado configurado +- [ ] DNS configurado (aguardar propagação) +- [ ] Redirect URLs adicionadas no Supabase +- [ ] Redirect URIs adicionadas no Google Cloud +- [ ] Teste de login realizado com sucesso + +--- + +## 🎯 RESULTADO ESPERADO + +Após seguir todos os passos: + +✅ Site acessível em `https://rdo.tracksteel.com.br` +✅ Login com Google funcionando +✅ Deploy automático via GitHub +✅ Variáveis de ambiente configuradas +✅ Performance otimizada + +--- + +## 💡 DICAS + +1. **Aguarde a propagação DNS** (pode levar até 24h, mas geralmente 5-10 minutos) +2. **Use a URL da Vercel** (`rdoc-xxx.vercel.app`) para testar antes do DNS propagar +3. **Limpe o cache** do navegador após cada deploy +4. **Monitore os logs** para identificar problemas rapidamente + +--- + +## 🆘 PROBLEMAS COMUNS + +### Build falha: +- Verifique os logs de build +- Verifique se as dependências estão corretas +- Tente fazer build local: `npm run build` + +### Variáveis não carregam: +- Verifique se adicionou as variáveis +- Verifique se marcou para Production +- Faça um novo deploy + +### Login não funciona: +- Verifique se adicionou as redirect URLs no Supabase +- Verifique se adicionou as redirect URIs no Google Cloud +- Aguarde 1-2 minutos para propagação + +--- + +**Qualquer dúvida, me avise em qual passo você está!** + diff --git a/VERCEL_QUICK_START.md b/VERCEL_QUICK_START.md new file mode 100644 index 0000000..a06c5a3 --- /dev/null +++ b/VERCEL_QUICK_START.md @@ -0,0 +1,65 @@ +# ⚡ VERCEL - INÍCIO RÁPIDO + +## 🎯 DEPLOY EM 10 MINUTOS + +### 1. Criar projeto na Vercel +- Acesse: https://vercel.com/new +- Importe: `Reifonas/RDOC` +- Framework: **Vite** + +### 2. Adicionar variáveis de ambiente + +```bash +VITE_SUPABASE_URL=https://xzudfhifaancyxxfdejx.supabase.co +VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inh6dWRmaGlmYWFuY3l4eGZkZWp4Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzEzNjE0MTAsImV4cCI6MjA4NjkzNzQxMH0.c5CHWhfXcMrm27LfxEt6OZtttXXvVJOeWu-IbnNLfWY +``` + +### 3. Deploy +- Clique em **"Deploy"** +- Aguarde 2-3 minutos +- Anote a URL gerada + +### 4. Configurar Supabase + +Adicione no Supabase (Auth → URL Configuration): + +``` +https://SUA-URL.vercel.app/auth/callback +https://rdo.tracksteel.com.br/auth/callback +``` + +### 5. Configurar Google Cloud + +Adicione no Google Cloud Console: + +``` +https://xzudfhifaancyxxfdejx.supabase.co/auth/v1/callback +https://SUA-URL.vercel.app/auth/callback +https://rdo.tracksteel.com.br/auth/callback +``` + +### 6. Testar +- Abra a URL da Vercel +- Faça login com Google +- Deve funcionar! ✅ + +--- + +## 🔗 LINKS ÚTEIS + +- **Dashboard Vercel**: https://vercel.com/dashboard +- **Supabase Auth Config**: https://supabase.com/dashboard/project/xzudfhifaancyxxfdejx/auth/url-configuration +- **Google Cloud Console**: https://console.cloud.google.com/apis/credentials + +--- + +## 📝 NOTAS + +- A Vercel tem melhor suporte para Vite que o Netlify +- Deploy automático via GitHub está configurado +- Domínio customizado pode ser configurado depois + +--- + +**Guia completo em: DEPLOY_VERCEL.md** + diff --git a/package.json b/package.json index 24e19a5..5608aa7 100644 --- a/package.json +++ b/package.json @@ -7,10 +7,12 @@ "dev": "vite", "build": "vite build", "build:netlify": "vite build --mode production", + "build:vercel": "vite build --mode production", "lint": "eslint .", "lint:fix": "eslint . --fix", "preview": "vite preview", "preview:netlify": "vite preview --port 4173 --host", + "preview:vercel": "vite preview --port 3000", "start": "node scripts/start.js", "check": "tsc -b --noEmit", "analyze": "vite build --mode analyze", diff --git a/vercel.json b/vercel.json index 9abfe8d..ad88e21 100644 --- a/vercel.json +++ b/vercel.json @@ -1,4 +1,7 @@ { + "buildCommand": "npm run build", + "outputDirectory": "dist", + "framework": "vite", "rewrites": [ { "source": "/(.*)", @@ -16,13 +19,30 @@ ] }, { - "source": "/(.*\\\\.(js|css|png|jpg|jpeg|gif|ico|svg))$", + "source": "/(.*\\.(js|css|png|jpg|jpeg|gif|ico|svg))$", "headers": [ { "key": "Cache-Control", "value": "public, max-age=31536000, immutable" } ] + }, + { + "source": "/(.*)", + "headers": [ + { + "key": "X-Content-Type-Options", + "value": "nosniff" + }, + { + "key": "X-Frame-Options", + "value": "DENY" + }, + { + "key": "X-XSS-Protection", + "value": "1; mode=block" + } + ] } ] } \ No newline at end of file