# 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: ```bash 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 ```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) 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. ```bash 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) ```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 (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: ```bash # 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).