Como servir uma única página HTML para todas as requisições no Nginx?

Usando a Diretiva try_files

A diretiva try_files no Nginx fornece uma solução para servir uma única página HTML para todas as solicitações. Essa diretiva instrui o Nginx a verificar arquivos ou diretórios em uma ordem definida e usar o primeiro que encontrar.

Para servir o mesmo arquivo HTML para todas as solicitações, use a diretiva try_files assim:

location / {
    try_files /base.html =404;
}

Esta configuração diz ao Nginx para:

1. Procurar o arquivo base.html no diretório raiz do seu site.
2. Servir base.html para todas as solicitações, se encontrado.
3. Retornar um erro 404 se base.html não for encontrado.

Este método serve o mesmo arquivo HTML (base.html) para todas as solicitações sem alterar a URL. Funciona bem para aplicações de página única onde o JavaScript no lado do cliente lida com o roteamento baseado na URL.

A diretiva try_files mantém o processo simples no lado do servidor. Ela não altera a URL ou realiza redirecionamentos, permitindo que sua aplicação JavaScript acesse a URL original através da API de História para roteamento no lado do cliente.

location /assets {
    try_files $uri =404;
}

location / {
    try_files /base.html =404;
}

Guia Passo a Passo

Para implementar a configuração do Nginx para servir uma única página HTML para todas as solicitações, siga estes passos:

1. Abra o arquivo de configuração do Nginx: Use um editor de texto para abrir seu arquivo de configuração do Nginx. O arquivo geralmente está em /etc/nginx/nginx.conf ou /usr/local/nginx/conf/nginx.conf.

2. Adicione o bloco de localização com try_files: Dentro do bloco server da sua configuração, adicione este bloco location:

   location / {
      try_files /base.html =404;
   }

   Substitua /base.html pelo caminho para o seu arquivo HTML.

3. Recarregue o Nginx para aplicar as mudanças: Após salvar o arquivo de configuração, recarregue o Nginx com este comando:

   sudo nginx -s reload

   Se você usa um sistema com systemd, também pode usar:

   sudo systemctl reload nginx

Estes passos configurarão o Nginx para servir seu arquivo HTML para todas as solicitações, mantendo a URL original intacta. Esta configuração permite que sua aplicação de página única lide com o roteamento no lado do cliente usando a API de História do navegador.

sudo nginx -t

Mantendo URLs Limpas

A configuração do Nginx usando a diretiva try_files ajuda a manter URLs limpas. Esta abordagem mantém as URLs originais solicitadas pelos usuários, o que é importante por várias razões:

• Mantém a estrutura da URL intacta, facilitando para os usuários entenderem e compartilharem páginas ou seções da sua aplicação.
• Os mecanismos de busca podem indexar suas páginas com mais precisão, pois as URLs permanecem consistentes e significativas.
• Permite que o roteamento do lado do cliente em aplicações de página única funcione corretamente. A aplicação JavaScript pode ler a URL do navegador e mostrar o conteúdo correto sem envolvimento do servidor.

Simplicidade no Lado do Servidor

Este método de servir uma única página HTML para todas as solicitações traz simplicidade no lado do servidor:

• Reduz a complexidade do lado do servidor ao lidar com todas as rotas com uma regra de configuração.
• O servidor não precisa gerenciar lógica de roteamento complexa, pois isso é movido para a aplicação JavaScript rodando no navegador do usuário.
• Reduz a necessidade de redirecionamentos ou reescritas do lado do servidor, que podem retardar os tempos de resposta.
• Atualizar rotas se torna mais fácil, pois as mudanças podem ser feitas no código do lado do cliente sem alterar configurações do servidor.

// Exemplo de roteamento do lado do cliente usando React Router
import { BrowserRouter, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/sobre" component={Sobre} />
        <Route path="/contato" component={Contato} />
      </Switch>
    </BrowserRouter>
  );
}

Usando a Diretiva rewrite

A diretiva rewrite no Nginx permite servir uma única página HTML para todas as solicitações. Veja como:

location / {
    rewrite ^(.*)$ /base.html last;
}

Esta configuração corresponde a qualquer caminho de URL e o reescreve para /base.html. A flag last interrompe outras regras de reescrita.

Comparada à abordagem try_files, o método rewrite:

• Permite mudanças de URL mais complexas
• Pode ser mais lento devido ao processamento de regex
• Pode alterar a URL no navegador, o que pode não ser ideal para aplicações de página única

A diretiva try_files é frequentemente mais simples para servir uma única página, enquanto rewrite oferece mais controle sobre o processamento de URL.

location ^~ /static/ {
    alias /caminho/para/seus/arquivos/estaticos/;
}

Blocos Condicionais no Nginx

Para casos mais complexos, o Nginx permite usar blocos condicionais com declarações if. Por exemplo:

location / {
    if ($request_uri !~ \.(js|css|png|jpg|gif)$) {
        rewrite ^ /base.html break;
    }
}

Esta configuração serve base.html para todas as solicitações, exceto aquelas terminadas com tipos de arquivo estático comuns.

Use blocos condicionais quando você:

• Precisa de regras diferentes baseadas em condições específicas
• Quer excluir certas solicitações de serem servidas pela página única
• Precisa lidar com roteamento complexo que try_files ou regras simples de rewrite não podem fazer

Tenha cuidado com declarações if no Nginx, pois elas podem causar comportamento inesperado e retardar seu site se usadas em excesso. Para a maioria das aplicações de página única, a diretiva try_files é a melhor escolha devido à sua simplicidade e velocidade.