line-gestao-frontend/docs/DEPLOY_VPS.md

3.8 KiB

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:

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

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: ''
};
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)

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)

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

# 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).