Pular para conteúdo

Frontend (Angular) e Nginx

O Angular é compilado no seu PC em arquivos estáticos (HTML, JS e CSS). Na VM, o Nginx entrega esses arquivos e repassa tudo que começa com /api/ para a API.

Pré-requisito: Deploy da API funcionando.

1. Apontar o front para a API

Como o Nginx serve o front e a API no mesmo domínio, o front deve chamar a API por caminho relativo, sem host:

// src/environments/environment.prod.ts
export const environment = {
  production: true,
  apiUrl: '/api'
};

Assim, o mesmo build funciona em qualquer domínio, inclusive em testes pela rede local, e não há CORS. Se o seu projeto não tem a pasta environments, o comando ng generate environments cria. Ajuste /api caso as rotas da sua API tenham outro prefixo.

2. Gerar o build de produção

No PowerShell, na pasta do projeto Angular:

npm ci
ng build --configuration production
  • npm ci instala as dependências exatamente como estão no package-lock.json (mais previsível que npm install).
  • ng build --configuration production compila com otimização, minificação e nomes de arquivo com hash (para o navegador saber quando há versão nova).

Os arquivos saem em dist\NOME\browser (Angular 17 ou mais novo). Em versões antigas, a saída é dist\NOME. Confira com dir dist.

3. Enviar para a VM

tar -czf front.tar.gz -C dist\NOME\browser .
scp front.tar.gz servidor:/tmp/braggo-front.tar.gz
ssh servidor "rm -rf /var/www/braggo/* && tar -xzf /tmp/braggo-front.tar.gz -C /var/www/braggo && chmod -R u=rwX,go=rX /var/www/braggo && rm /tmp/braggo-front.tar.gz"
Remove-Item front.tar.gz

O comando ssh faz, na VM: apaga a versão antiga, extrai a nova em /var/www/braggo, ajusta permissões para o Nginx conseguir ler e remove o pacote temporário. Troque NOME pelo nome real da pasta em dist.

4. Configurar o Nginx

Crie o arquivo do site:

sudo nano /etc/nginx/sites-available/braggo

# Repassa o protocolo real (https) quando a requisição vem pelo túnel
map $http_x_forwarded_proto $braggo_proto {
    default $scheme;
    https   https;
}

server {
    listen 80 default_server;
    server_name braggo.com.br www.braggo.com.br _;

    root /var/www/braggo;
    index index.html;

    client_max_body_size 20m;

    gzip on;
    gzip_vary on;
    gzip_types text/css application/javascript application/json image/svg+xml;

    # API .NET
    location ^~ /api/ {
        proxy_pass http://127.0.0.1:5000;
        proxy_http_version 1.1;
        proxy_set_header Host              $host;
        proxy_set_header X-Real-IP         $remote_addr;
        proxy_set_header X-Forwarded-For   $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $braggo_proto;
        proxy_read_timeout 60s;
    }

    # Arquivos com hash no nome: cache longo
    location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico|woff2?)$ {
        expires 30d;
        add_header Cache-Control "public, immutable";
        try_files $uri =404;
    }

    # index.html nunca em cache, para o navegador pegar a versão nova
    location = /index.html {
        add_header Cache-Control "no-cache";
    }

    # Rotas do Angular: qualquer caminho cai no index.html
    location / {
        try_files $uri $uri/ /index.html;
    }
}

O que cada bloco faz:

  • map ...: descobre se o visitante usa HTTPS (o túnel avisa pelo cabeçalho X-Forwarded-Proto) e repassa isso para a API.
  • server_name: o domínio que esse site atende. O _ é um curinga para também responder quando você acessa pelo IP da VM.
  • root: a pasta com os arquivos do Angular.
  • client_max_body_size 20m: tamanho máximo de upload. Aumente se a API receber arquivos maiores. O padrão do Nginx é 1 MB.
  • location ^~ /api/: tudo que começa com /api/ vai para a API em 127.0.0.1:5000. O ^~ garante que esse bloco ganhe do bloco de cache de arquivos. Como o proxy_pass está sem barra no final, o caminho original (/api/...) é mantido. Se a sua API não tem /api nas rotas, use proxy_pass http://127.0.0.1:5000/; (com a barra) para o Nginx remover o prefixo.
  • try_files $uri $uri/ /index.html: se o arquivo não existe, entrega o index.html. Sem isso, atualizar a página em uma rota como /clientes/12 daria 404, porque o roteamento do Angular roda no navegador.

Ative o site, desative o padrão, valide e recarregue:

sudo ln -s /etc/nginx/sites-available/braggo /etc/nginx/sites-enabled/braggo
sudo rm /etc/nginx/sites-enabled/default
sudo nginx -t
sudo systemctl reload nginx

nginx -t testa a sintaxe antes de aplicar. Só rode o reload se ele disser syntax is ok. O reload aplica a nova configuração sem derrubar conexões.

5. Testar

De dentro da VM:

curl -I http://localhost/
curl -i http://localhost/api/ROTA_QUALQUER

O primeiro deve devolver 200 (o index.html). O segundo deve devolver a resposta da API.

Do seu PC, abra http://IP_DA_VM no navegador. Com o front carregando e a API respondendo, falta só o acesso externo.

Checklist ao final desta etapa

  • [ ] sudo nginx -t sem erros
  • [ ] http://IP_DA_VM abre o Angular no seu PC
  • [ ] Atualizar a página em uma rota interna (/alguma/rota) não dá 404
  • [ ] As chamadas /api/... aparecem no log da API e voltam com sucesso