From 118c6adf319e74892e0564e18e2719610a0d2a9a Mon Sep 17 00:00:00 2001 From: Eduardo Lopes <155753879+eduardolopesx03@users.noreply.github.com> Date: Tue, 10 Feb 2026 13:30:50 -0300 Subject: [PATCH] =?UTF-8?q?chore:=20preparar=20configura=C3=A7=C3=A3o=20e?= =?UTF-8?q?=20guia=20de=20deploy=20do=20frontend=20no=20VPS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- angular.json | 18 ++- docs/DEPLOY_VPS.md | 165 +++++++++++++++++++++ src/environments/environment.production.ts | 4 + src/environments/environment.ts | 2 +- 4 files changed, 186 insertions(+), 3 deletions(-) create mode 100644 docs/DEPLOY_VPS.md create mode 100644 src/environments/environment.production.ts diff --git a/angular.json b/angular.json index 242303a..85bc62d 100644 --- a/angular.json +++ b/angular.json @@ -53,7 +53,21 @@ "maximumError": "40kB" } ], - "outputHashing": "all" + "outputHashing": "all", + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.production.ts" + } + ], + "optimization": { + "scripts": true, + "styles": { + "minify": true, + "inlineCritical": true + }, + "fonts": false + } }, "development": { "optimization": false, @@ -104,4 +118,4 @@ "cli": { "analytics": false } -} +} \ No newline at end of file diff --git a/docs/DEPLOY_VPS.md b/docs/DEPLOY_VPS.md new file mode 100644 index 0000000..59496ea --- /dev/null +++ b/docs/DEPLOY_VPS.md @@ -0,0 +1,165 @@ +# 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). diff --git a/src/environments/environment.production.ts b/src/environments/environment.production.ts new file mode 100644 index 0000000..179c3c2 --- /dev/null +++ b/src/environments/environment.production.ts @@ -0,0 +1,4 @@ +export const environment = { + production: true, + apiUrl: 'https://linegestao.inglinesystems.com.br' +}; diff --git a/src/environments/environment.ts b/src/environments/environment.ts index c46aeaa..20608e6 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -1,4 +1,4 @@ export const environment = { production: false, - apiUrl: '' + apiUrl: 'http://localhost:8080' };