line-gestao-frontend/docs/DEPLOY_VPS.md

Deploy rápido do Front-end no mesmo VPS (API já em produção)

0) Detecção automática de stack do front

No VPS (ou local), rode no diretório do front:

cd ~/apps/line-gestao-frontend
node -e "const p=require('./package.json');const s=p.scripts||{};if(s.ng||s.start?.includes('ng serve'))console.log('Stack detectada: Angular CLI');else if(s.dev?.includes('vite'))console.log('Stack detectada: Vite');else if(s.dev?.includes('next')||s.start?.includes('next'))console.log('Stack detectada: Next.js');else console.log('Stack não identificada automaticamente');"

Para este projeto, a stack detectada é Angular.

---

Bloco A — preparação + build

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: 'https://linegestao.inglinesystems.com.br'
};
EOT

# 3) instalar dependências e build de produção
npm ci
npm run build

# 4) validar que o build estático foi gerado
ls -lah dist/line-gestao-frontend/browser

---

Bloco B — publicação (simples e confiável com Nginx container)

Estratégia: publicar somente o build estático em um container Nginx, na porta 8081.

set -e

# 1) criar pasta de publicação estática
sudo mkdir -p /opt/line-gestao-frontend
sudo rsync -av --delete ~/apps/line-gestao-frontend/dist/line-gestao-frontend/browser/ /opt/line-gestao-frontend/

# 2) subir Nginx estático com fallback de SPA
cat > /tmp/line-frontend-nginx.conf <<'EOT'
server {
  listen 80;
  server_name _;

  root /usr/share/nginx/html;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}
EOT

sudo docker rm -f line-gestao-frontend-nginx 2>/dev/null || true
sudo docker run -d \
  --name line-gestao-frontend-nginx \
  --restart unless-stopped \
  -p 127.0.0.1:8081:80 \
  -v /opt/line-gestao-frontend:/usr/share/nginx/html:ro \
  -v /tmp/line-frontend-nginx.conf:/etc/nginx/conf.d/default.conf:ro \
  nginx:alpine

# 3) adicionar roteamento no Caddy da API (mesmo domínio)
# OBS: manter /health e /api no backend; enviar restante para o front
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

# 4) recarregar caddy (stack da API)
cd ~/apps/line-gestao-api
sudo 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 (ajuste rota se necessário)
curl -i https://linegestao.inglinesystems.com.br/auth/login || true

# 4) conferir logs rápidos
sudo docker logs --tail 50 line-gestao-frontend-nginx
sudo 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 vão para o mesmo domínio e retornam 2xx/401 esperado no login.

---

Bloco D — troubleshooting rápido de CORS

Se aparecer erro de CORS:

# 1) validar headers CORS no endpoint real
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

# 3) deve estar exatamente assim:
# FRONTEND_PUBLIC_URL=https://linegestao.inglinesystems.com.br

# 4) reiniciar API/caddy após ajuste de env
cd ~/apps/line-gestao-api
sudo docker compose -f docker-compose.domain.yml up -d --force-recreate api caddy

Se continuar CORS, geralmente é:

• URL do front diferente da configurada no .env da API;
• requisição indo para domínio/porta diferente;
• endpoint fora do matcher @api no Caddy.

---

Checklist final (homologação)

• Front abre em https://linegestao.inglinesystems.com.br.
• Login funciona com usuário válido.
• Executa 1 fluxo principal do sistema (ex.: carregar dashboard/listagem).
• Sem erro de CORS no console.
• Sem 401 inesperado após login (apenas 401 esperado antes de autenticar).