Cada vez que o NGINX encontra um erro ao tentar processar a solicitação de um cliente, ele retorna um erro. Cada erro inclui um código de resposta HTTP e uma breve descrição. O erro geralmente é exibido ao usuário por meio de uma página HTML padrão simples .
Felizmente, você pode configurar o NGINX para exibir páginas de erro personalizadas para os usuários do seu site ou aplicativo da web. Isso pode ser conseguido usando a diretiva error_page do NGINX , que é usada para definir o URI que será mostrado para um erro especificado. Você também pode usá-lo opcionalmente para modificar o código de status HTTP nos cabeçalhos de resposta enviados a um cliente.
Neste guia, mostraremos como configurar o NGINX para usar páginas de erro personalizadas.
Neste Artigo
Crie uma única página personalizada para todos os erros NGINX
Você pode configurar o NGINX para usar uma única página de erro personalizada para todos os erros retornados a um cliente. Comece criando sua página de erro. Aqui está um exemplo, uma página HTML simples que exibe a mensagem:“Desculpe, a página não pode ser carregada! Entre em contato com o administrador ou suporte do site para obter assistência.” para um cliente.
Exemplo de código de página personalizada HTML Nginx.
<!DOCTYPE html> <html> <head> <style type=text/css> * { -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 0; margin: 0; } #notfound { position: relative; height: 100vh; } #notfound .notfound { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .notfound { max-width: 520px; width: 100%; line-height: 1.4; text-align: center; } .notfound .notfound-error { position: relative; height: 200px; margin: 0px auto 20px; z-index: -1; } .notfound .notfound-error h1 { font-family: 'Montserrat', sans-serif; font-size: 200px; font-weight: 300; margin: 0px; color: #211b19; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } @media only screen and (max-width: 767px) { .notfound .notfound-error h1 { font-size: 148px; } } @media only screen and (max-width: 480px) { .notfound .notfound-error { height: 148px; margin: 0px auto 10px; } .notfound .notfound-error h1 { font-size: 120px; font-weight: 200px; } .notfound .notfound-error h2 { font-size: 30px; } .notfound a { padding: 7px 15px; font-size: 24px; } .h2 { font-size: 148px; } } </style> </head> <body> <div id="notfound"> <div class="notfound"> <h1>Lamentamos a página não pode ser carregada!</a></h1> <div class="notfound-error"> <p>Contate o administrador do site ou suporte para assistência.</p> </div> </div> </div> </body> </html>
Salve o arquivo com um nome apropriado, por exemplo error-page.html e feche-o.
Em seguida, mova o arquivo para o diretório raiz do documento ( /var/www/html/ ). Se o diretório não existir, você pode criá-lo usando o comandomkdir , conforme mostrado:
sudo mkdir -p /var/www/html/ && sudo cp error-page.html /var/www/html/
Em seguida, configure o NGINX para usar a página de erro personalizada usando a diretiva error_page . Crie um arquivo de configuração chamado custom-error-page.conf em /etc/nginx/snippets/ conforme mostrado.
sudo mkdir /etc/nginx/snippets/ && sudo vim /etc/nginx/snippets/custom-error-page.conf
Adicione as seguintes linhas a ele:
error_page 404 403 500 503 /error-page.html; location = /error-page.html { root /var/www/html; internal; }
Esta configuração causa um redirecionamento interno para o URI /error-page.html sempre que o NGINX encontra qualquer um dos erros HTTP especificados 404, 403, 500 e 503. O contexto de localização informa ao NGINX onde encontrar sua página de erro .
Salve o arquivo e feche-o.
Agora inclua o arquivo no contexto http para que todos os blocos do servidor utilizem a página de erro, no arquivo /etc/nginx/nginx.conf :
sudo vim /etc/nginx/nginx.conf
O diretório include informa ao NGINX para incluir a configuração no .conf arquivo especificado:
include snippets/custom-error-page.conf;
Alternativamente, você pode incluir o arquivo para um bloco de servidor específico (comumente conhecido como vhost ), por exemplo, /etc/nginx/conf.d/mywebsite.conf . Adicione a diretiva include acima no {} contexto do servidor.
Salve seu arquivo de configuração NGINX e recarregue o serviço da seguinte forma: sudo systemctl recarregar nginx.service
E teste em um navegador se a configuração está funcionando bem.
Crie páginas personalizadas diferentes para cada erro NGINX
Você também pode configurar diferentes páginas de erro personalizadas para cada erro HTTP no NGINX. Descobrimos uma boa coleção de páginas de erro nginx personalizadas criadas por Denys Vitali no Github .
Para configurar o repositório em seu servidor, execute os seguintes comandos:
sudo git clone https://github.com/denysvitali/nginx-error-pages /srv/http/default && sudo mkdir /etc/nginx/snippets/ && sudo ln -s /srv/http/default/snippets/error_pages.conf /etc/nginx/snippets/error_pages.conf && sudo ln -s /srv/http/default/snippets/error_pages_content.conf /etc/nginx/snippets/error_pages_content.conf
Em seguida, adicione a seguinte configuração em seu contexto http ou em cada bloco/vhost do servidor:inclua trechos/error_pages.conf;
Salve seu arquivo de configuração NGINX e recarregue o serviço da seguinte forma: sudo systemctl recarregar nginx.service
Além disso, teste em um navegador se a configuração está funcionando conforme o esperado. Neste exemplo, testamos a página de erro 404.
Isso é tudo que tínhamos para você neste guia. A diretiva error_page do NGINX permite redirecionar usuários para uma página, recurso ou URL definido quando ocorre um erro. Opcionalmente, também permite a modificação do código de status HTTP na resposta a um cliente. Para obter mais informações, leia a documentação da página de erro do nginx.
