149 lines
3.9 KiB
Markdown
149 lines
3.9 KiB
Markdown
# Deploy rápido do Front-end no mesmo VPS (API já em produção)
|
|
|
|
## 0) Detecção automática de stack do front (sem Node instalado no host)
|
|
|
|
No VPS, rode no diretório do front:
|
|
|
|
```bash
|
|
cd ~/apps/line-gestao-frontend
|
|
python3 - <<'PY'
|
|
import json
|
|
p=json.load(open('package.json'))
|
|
s=p.get('scripts',{})
|
|
if 'ng' in s or 'ng serve' in s.get('start',''):
|
|
print('Stack detectada: Angular CLI')
|
|
elif 'vite' in s.get('dev',''):
|
|
print('Stack detectada: Vite')
|
|
elif 'next' in s.get('dev','') or 'next' in s.get('start',''):
|
|
print('Stack detectada: Next.js')
|
|
else:
|
|
print('Stack não identificada automaticamente')
|
|
PY
|
|
```
|
|
|
|
Para este projeto, a stack detectada é **Angular**.
|
|
|
|
---
|
|
|
|
## Bloco A — preparação + build (usando Docker, sem npm/node no host)
|
|
|
|
> Copiar/colar no VPS
|
|
|
|
```bash
|
|
set -e
|
|
|
|
# 1) atualizar código
|
|
git -C ~/apps/line-gestao-frontend fetch --all
|
|
git -C ~/apps/line-gestao-frontend checkout main
|
|
git -C ~/apps/line-gestao-frontend pull --ff-only
|
|
|
|
cd ~/apps/line-gestao-frontend
|
|
|
|
# 2) garantir URL da API em produção no ambiente Angular
|
|
cat > src/environments/environment.production.ts <<'EOT'
|
|
export const environment = {
|
|
production: true,
|
|
apiUrl: 'https://linegestao.inglinesystems.com.br'
|
|
};
|
|
EOT
|
|
|
|
# 3) build de produção via container Node
|
|
docker compose -f docker-compose.frontend.yml run --rm frontend-builder
|
|
|
|
# 4) validar saída estática
|
|
ls -lah dist/line-gestao-frontend/browser
|
|
```
|
|
|
|
---
|
|
|
|
## Bloco B — publicação (Nginx container do front + Caddy da API)
|
|
|
|
```bash
|
|
set -e
|
|
|
|
cd ~/apps/line-gestao-frontend
|
|
|
|
# 1) subir/atualizar Nginx estático do front
|
|
docker compose -f docker-compose.frontend.yml up -d frontend-nginx
|
|
|
|
# 2) backup e ajuste do Caddyfile da API para mesmo domínio
|
|
sudo cp ~/apps/line-gestao-api/Caddyfile ~/apps/line-gestao-api/Caddyfile.bkp.$(date +%F-%H%M%S)
|
|
|
|
sudo tee ~/apps/line-gestao-api/Caddyfile >/dev/null <<'EOT'
|
|
linegestao.inglinesystems.com.br {
|
|
encode zstd gzip
|
|
|
|
@api path /api/* /auth/* /health
|
|
reverse_proxy @api api:8080
|
|
|
|
reverse_proxy 127.0.0.1:8081
|
|
}
|
|
EOT
|
|
|
|
# 3) recarregar apenas o caddy
|
|
cd ~/apps/line-gestao-api
|
|
docker compose -f docker-compose.domain.yml up -d caddy
|
|
```
|
|
|
|
---
|
|
|
|
## Bloco C — validação (curl + navegador)
|
|
|
|
```bash
|
|
set -e
|
|
|
|
# 1) front responde HTML
|
|
curl -I https://linegestao.inglinesystems.com.br
|
|
|
|
# 2) health da API continua OK
|
|
curl -sS https://linegestao.inglinesystems.com.br/health
|
|
|
|
# 3) endpoint de auth (esperado: 401/405/200 conforme regra da API)
|
|
curl -i https://linegestao.inglinesystems.com.br/auth/login || true
|
|
|
|
# 4) logs rápidos
|
|
docker logs --tail 50 line-gestao-frontend-nginx
|
|
docker compose -f ~/apps/line-gestao-api/docker-compose.domain.yml logs --tail 50 caddy
|
|
```
|
|
|
|
No navegador:
|
|
1. Abrir `https://linegestao.inglinesystems.com.br`.
|
|
2. Abrir DevTools (F12) > Network.
|
|
3. Confirmar que as chamadas de API estão no mesmo domínio e com respostas esperadas.
|
|
|
|
---
|
|
|
|
## Bloco D — troubleshooting rápido de CORS
|
|
|
|
```bash
|
|
# 1) validar preflight
|
|
curl -i -X OPTIONS 'https://linegestao.inglinesystems.com.br/auth/login' \
|
|
-H 'Origin: https://linegestao.inglinesystems.com.br' \
|
|
-H 'Access-Control-Request-Method: POST'
|
|
|
|
# 2) confirmar FRONTEND_PUBLIC_URL na API
|
|
grep FRONTEND_PUBLIC_URL ~/apps/line-gestao-api/.env
|
|
|
|
# deve ser:
|
|
# FRONTEND_PUBLIC_URL=https://linegestao.inglinesystems.com.br
|
|
|
|
# 3) reaplicar API/Caddy após ajuste de .env
|
|
cd ~/apps/line-gestao-api
|
|
docker compose -f docker-compose.domain.yml up -d --force-recreate api caddy
|
|
```
|
|
|
|
Se continuar CORS, normalmente é:
|
|
- front abrindo em URL diferente da permitida;
|
|
- requisição indo para outro host/porta;
|
|
- rota faltando no matcher `@api` do Caddy.
|
|
|
|
---
|
|
|
|
## Checklist final (homologação)
|
|
|
|
- [ ] Front abre em `https://linegestao.inglinesystems.com.br`.
|
|
- [ ] Login funciona com usuário válido.
|
|
- [ ] Executa 1 fluxo principal (ex.: dashboard/listagem).
|
|
- [ ] Sem erro de CORS no console.
|
|
- [ ] Sem 401 inesperado após login (401 só antes de autenticar).
|