.
Vamos aprender como criar e configurar uma página de erro 404 no NGINX para melhorar a experiência do usuário em seu site.
Quando você hospeda seu site no servidor da Web NGINX, ele lida com a solicitação do cliente, mas quando a solicitação não é atendida, ele retorna um erro.
Este erro será exibido para um usuário por meio de uma página HTML básica com os códigos de erro (404, 403, 500, e 503) como mostrado abaixo.
Ter um site dinâmico com uma página de aparência tão feia reduzirá a impressão de UI/UX do seu site. No entanto, o NGINX oferece a opção de configurar uma página de erro personalizada para o seu site.
Para fazer isso, você precisa criar uma página HTML personalizada e especificá-la no diretiva error_page do arquivo de configuração NGINX, que será usado como URI para exibir a página de erro personalizada para o erro especificado no arquivo de configuração.
Hoje, você aprenderá como criar e configurar o NGINX para lidar com erros únicos ou múltiplos, como páginas 404 no nginx com páginas HTML personalizadas.
Pré-requisitos
- Servidor web Nginx instalado em seu sistema
- Ou você tem acesso root ou privilégios sudo
- Modelo personalizado para páginas de erro (a fonte será fornecida)
- Navegador para testar o resultado (Chrome, Firefox, etc)
Criando sua página de erro 404 personalizada
Primeiro, aprenderemos a lidar com o código de resposta 404 com uma página HTML personalizada. Para isso, criaremos uma página personalizada que será mostrada aos usuários no lugar da resposta NGINX padrão para o código de status 404.
Para fins de demonstração, já criei uma página de modelo HTML de amostra que exibe a mensagem de erro “Erro 404: A página solicitada não está disponível, entre em contato com o administrador.” quando visualizado.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Access denied</title>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 10px;
}
.container {
margin-top: 10rem;
text-align: center;
}
.container .error {
font-size: 10rem;
}
.container .description {
font-size: 1.2rem;
}
@media screen and (max-width: 600px) {
.container .error {
font-size: 5rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="error">
Error 404
</div>
<div class="description">
THe requested page is not available, please contact to administrator.
</div>
</div>
</body>
</html>
Você pode copiar o código HTML acima, colá-lo em seu editor de texto e salvar o arquivo com o nome “página de erro.html“. Mais tarde, você pode alterá-lo para algo diferente.
Agora copie o “página de erro.html” no diretório raiz do documento NGINX localizado no /var/www/html caminho usando o comando abaixo.
$ sudo cp error-page.html /var/www/html/A próxima parte será criar um arquivo de configuração (snippets) e configurar o nginx.conf arquivo.
Configurando o NGINX para usar suas páginas de erro
Primeiro, criaremos um novo arquivo de configuração dentro do diretório snippet localizado no /etc/nginx/snippets caminho com nome página de erro.conf.
Para isso, crie um trechos diretório. Caso não exista no /etc/nginx path, o comando abaixo criará um novo diretório com o nome trechos.
$ sudo mkdir -p /etc/nginx/snippets
Em seguida, execute o comando abaixo para criar o página de erro.conf arquivo de configuração dentro do trechos diretório.
$ sudo nano /etc/nginx/snippets/error-page.confQuando o arquivo estiver aberto para edição, copie e cole o código abaixo no arquivo de configuração e salve-o.
error_page 404 /error-page.html;
location = /error-page.html {
root /var/www/html;
internal;
}
A partir do código de trecho acima, sempre que o NGINX encontrar uma resposta 404 do usuário final, ele retornará o página de erro.html como a resposta.
Em seguida, devemos incluir página de erro.conf dentro do arquivo de configuração NGINX. Para isso, execute o comando abaixo para abrir o arquivo de configuração do NGINX.
$ sudo nano /etc/nginx/sites-enabled/default # For Ubuntu/Debian-based distro's
OR
$ sudo nano /etc/nginx/nginx.conf # For RHEL/Fedora-based distro's
Abaixo está a saída do comando acima.
Copie a linha abaixo para incluir o caminho absoluto do arquivo de trecho e coloque-o dentro do servidor container no arquivo de configuração NGINX.
include snippets/error-page.conf;
Abaixo está a saída após as alterações.
Finalmente, você pode reiniciar o servidor web NGINX e testar sua página.
Reiniciando o NGINX e testando sua página
Depois que todas as alterações de configuração necessárias forem feitas, recarregue o servidor da Web NGINX usando o seguinte comando.
$ sudo systemctl reload nginxPor fim, abra seu navegador e visite qualquer página que não exista para visualizar a página de erro, conforme mostrado abaixo.
Crie diferentes páginas personalizadas para cada erro NGINX
O NGINX permite que você configure facilmente várias páginas para diferentes erros de HTTP.
Em vez de criar uma página separada e configurar cada página de erro para os erros personalizados, estamos fornecendo a você um Repositório GitHub com páginas de erro personalizadas pré-fabricadas com uma configuração que pode ser configurada em segundos.
Execute os comandos abaixo passo a passo.
$ sudo mkdir -p /srv/http/default
$ sudo git clone https://github.com/denysvitali/nginx-error-pages /srv/http/default
$ mkdir -p /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.confLeia também: Como alterar a localização do documento da Web Nginx no Linux
Agora abra o arquivo de configuração do NGINX com o editor de texto de sua escolha.
$ sudo nano /etc/nginx/sites-enabled/default # For Ubuntu/Debian-based distro's
OR
$ sudo nano /etc/nginx/nginx.conf # For RHEL/Fedora-based distro'sAdicione a linha abaixo dentro do arquivo de configuração.
include snippets/error_pages.conf;
Por último, recarregue seu servidor web NGINX para aplicar as alterações.
$ sudo systemctl reload nginxAgora você pode simplesmente visitar qualquer página desconhecida para verificar a página de erro, conforme mostrado abaixo.
Leia também: Como alterar a porta Nginx 80 no Linux
Embrulhar
Isso é tudo neste artigo, onde você aprendeu como criar uma página de erro personalizada para lidar com solicitações de maneira bonita e eficaz para o seu servidor da web.
Espero que este artigo possa ser útil para sua jornada de aprendizagem do servidor web NGINX. Se você ainda estiver enfrentando algum problema, a seção de comentários está aberta para você.
Vejo você no próximo artigo….
Mente tecnológica inovadora com 12 anos de experiência trabalhando como programador de computador, desenvolvedor web e pesquisador de segurança. Capaz de trabalhar com uma variedade de soluções de tecnologia e software e gerenciar bancos de dados.
.
