Guia Rapido - Configurar Nginx (SPA React)

O Problema

URLs como avanzato.com.br/avaliacao dao 404 quando acessadas diretamente. Funcionam apenas quando clica no menu (navegacao interna do React).

A Solucao

O Nginx precisa redirecionar todas as rotas para index.html.

Passo a Passo

1. Copiar a config do projeto para o servidor

No seu Mac, envie o arquivo nginx.conf do projeto para o servidor:

# Enviar o arquivo nginx.conf do projeto para o servidor
scp /Users/avanzato/Projetos/Avanzato/avanzato-site/app/nginx.conf root@SEU_SERVIDOR:/etc/nginx/sites-available/avanzato

Ou, se ja estiver logado no servidor:

# Logar no servidor
ssh root@SEU_SERVIDOR

# Criar o arquivo de config
cat > /etc/nginx/sites-available/avanzato << 'EOF'
server {
    listen 80;
    server_name avanzato.com.br;

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

    # ESSA LINHA E A CHAVE - redireciona tudo para index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # Cache para assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
        expires 6M;
        add_header Cache-Control "public";
    }

    # Seguranca
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;

    # Bloquear arquivos ocultos
    location ~ /\. {
        deny all;
    }
}
EOF

2. Ativar o site

# Criar link simbolico (ativa o site)
ln -s /etc/nginx/sites-available/avanzato /etc/nginx/sites-enabled/avanzato

# Remover o default (se existir)
rm -f /etc/nginx/sites-enabled/default

3. Testar e aplicar

# Testar a configuracao (mostra erros se houver)
nginx -t

# Se der OK, recarregar o Nginx
systemctl reload nginx

4. Verificar se funcionou

# Testar uma rota direta
curl -I https://avanzato.com.br/avaliacao

# Deve retornar HTTP 200, nao 404

Comandos Uteis

Comando	O que faz
`nginx -t`	Testa a configuracao (sem aplicar)
`systemctl reload nginx`	Recarrega config sem derrubar o site
`systemctl restart nginx`	Reinicia o Nginx
`systemctl status nginx`	Verifica se esta rodando
`tail -f /var/log/nginx/error.log`	Ver erros em tempo real

Importante

Se voce usa Apache em vez de Nginx, a config esta no arquivo .htaccess que ja vai no dist/:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^ index.html [L]

Basta garantir que o .htaccess esta na raiz do site e o mod_rewrite esta ativado.

2.6 KiB Raw Permalink Blame History