Files
RDO/documentation/README_DEPLOY.md
2026-02-20 07:25:32 -03:00

253 lines
6.2 KiB
Markdown

# 🚀 Guia de Deploy - Alternativas à Vercel
Este guia apresenta 4 alternativas gratuitas e fáceis de configurar para fazer deploy da sua aplicação React/Vite.
## 📊 Comparação Rápida
| Provedor | Gratuito | Facilidade | Build Automático | Domínio Customizado | SSL | CDN |
|----------|----------|------------|------------------|---------------------|-----|-----|
| **Netlify** | ✅ | ⭐⭐⭐⭐⭐ | ✅ | ✅ | ✅ | ✅ |
| **GitHub Pages** | ✅ | ⭐⭐⭐⭐ | ✅ | ✅ | ✅ | ✅ |
| **Railway** | ✅* | ⭐⭐⭐ | ✅ | ✅ | ✅ | ❌ |
| **Render** | ✅* | ⭐⭐⭐ | ✅ | ✅ | ✅ | ✅ |
*Limitações no plano gratuito
---
## 🎯 1. Netlify (Recomendado)
### ✅ Prós
- Interface muito intuitiva
- Deploy automático via Git
- CDN global rápido
- Formulários e funções serverless
- Excelente para SPAs
- 100GB de largura de banda/mês
### ❌ Contras
- Limite de 300 minutos de build/mês
- Funções serverless limitadas no plano gratuito
### 📋 Passo a Passo
1. **Criar conta no Netlify**
- Acesse [netlify.com](https://netlify.com)
- Faça login com GitHub
2. **Conectar repositório**
- Clique em "New site from Git"
- Escolha GitHub e selecione seu repositório
3. **Configurar build**
- Build command: `pnpm run build`
- Publish directory: `dist`
- O arquivo `netlify.toml` já está configurado!
4. **Deploy**
- Clique em "Deploy site"
- Aguarde o build completar
### 🔧 Comandos Úteis
```bash
# Instalar Netlify CLI (opcional)
npm install -g netlify-cli
# Deploy manual
netlify deploy --prod --dir=dist
```
---
## 🐙 2. GitHub Pages
### ✅ Prós
- Totalmente gratuito
- Integração perfeita com GitHub
- SSL automático
- Fácil configuração
### ❌ Contras
- Apenas sites estáticos
- Repositório deve ser público (plano gratuito)
- Limite de 1GB de armazenamento
- 100GB de largura de banda/mês
### 📋 Passo a Passo
1. **Configurar repositório**
- Certifique-se que o código está no GitHub
- O workflow `.github/workflows/deploy.yml` já está configurado!
2. **Ativar GitHub Pages**
- Vá em Settings > Pages no seu repositório
- Source: "GitHub Actions"
3. **Ajustar base path**
- No `vite.config.ts`, ajuste a linha:
```typescript
base: process.env.NODE_ENV === 'production' ? '/SEU-REPO-NOME/' : '/'
```
4. **Deploy automático**
- Faça push para a branch `main`
- O GitHub Actions fará o deploy automaticamente
### 🔧 URL do site
```
https://SEU-USUARIO.github.io/SEU-REPOSITORIO/
```
---
## 🚂 3. Railway
### ✅ Prós
- Deploy muito rápido
- Suporte a bancos de dados
- Logs em tempo real
- Fácil configuração de variáveis de ambiente
### ❌ Contras
- $5 de crédito gratuito/mês (depois paga)
- Menos recursos no plano gratuito
- Pode hibernar após inatividade
### 📋 Passo a Passo
1. **Criar conta no Railway**
- Acesse [railway.app](https://railway.app)
- Faça login com GitHub
2. **Criar novo projeto**
- Clique em "New Project"
- Escolha "Deploy from GitHub repo"
- Selecione seu repositório
3. **Configuração automática**
- O Railway detectará automaticamente que é um projeto Node.js
- Os arquivos `railway.json` e `Dockerfile` já estão configurados!
4. **Deploy**
- O deploy acontece automaticamente
- Acesse a URL fornecida pelo Railway
### 🔧 Comandos Úteis
```bash
# Instalar Railway CLI
npm install -g @railway/cli
# Login
railway login
# Deploy manual
railway up
```
---
## 🎨 4. Render
### ✅ Prós
- Plano gratuito generoso
- SSL automático
- CDN global
- Suporte a bancos de dados
- Não hiberna (diferente do Heroku)
### ❌ Contras
- Build pode ser mais lento
- Limite de 750 horas/mês no plano gratuito
- Menos integrações que outros provedores
### 📋 Passo a Passo
1. **Criar conta no Render**
- Acesse [render.com](https://render.com)
- Faça login com GitHub
2. **Criar Web Service**
- Clique em "New +" > "Web Service"
- Conecte seu repositório GitHub
3. **Configurar build**
- Name: `rdo-app`
- Build Command: `pnpm install && pnpm run build`
- Start Command: `pnpm preview --host 0.0.0.0 --port $PORT`
- O arquivo `render.yaml` já está configurado!
4. **Deploy**
- Clique em "Create Web Service"
- Aguarde o build completar
---
## 🛠️ Troubleshooting Comum
### Problema: "404 Not Found" ao navegar
**Solução**: Configure redirects para SPA
- ✅ Netlify: `netlify.toml` já configurado
- ✅ GitHub Pages: Workflow já configurado
- ✅ Railway: Usar `serve -s` no start command
- ✅ Render: `render.yaml` já configurado
### Problema: Build falha por falta de memória
**Solução**:
```bash
# Adicionar no package.json
"build": "vite build --mode production"
```
### Problema: Variáveis de ambiente não funcionam
**Solução**:
- Prefixe com `VITE_` para variáveis do frontend
- Configure no painel do provedor escolhido
### Problema: Assets não carregam (CSS/JS)
**Solução**:
- Verifique o `base` no `vite.config.ts`
- Para GitHub Pages: deve ser `/nome-do-repo/`
- Para outros: pode ser `/`
---
## 🎯 Recomendações por Caso de Uso
### 🏆 Para iniciantes
**Netlify** - Interface mais amigável e documentação excelente
### 💰 Para projetos pessoais
**GitHub Pages** - Totalmente gratuito e sem limites de tempo
### 🚀 Para projetos que crescerão
**Railway** - Fácil escalar e adicionar banco de dados
### 🎨 Para portfolios e landing pages
**Render** - Boa performance e confiabilidade
---
## 📝 Checklist Final
Antes de fazer deploy, verifique:
- [ ] Código commitado e pushed para GitHub
- [ ] Build local funciona (`pnpm run build`)
- [ ] Variáveis de ambiente configuradas
- [ ] Base path correto no `vite.config.ts`
- [ ] Arquivo de configuração do provedor escolhido presente
---
## 🆘 Precisa de Ajuda?
1. **Verifique os logs** do build no painel do provedor
2. **Teste localmente** com `pnpm run build && pnpm run preview`
3. **Consulte a documentação** oficial de cada provedor
4. **Verifique issues** similares no GitHub do projeto
---
**💡 Dica**: Comece com o Netlify para ter a experiência mais suave, depois experimente outros provedores conforme suas necessidades evoluem!
**🔄 Última atualização**: Janeiro 2025