Pesquisa de site

Como criar uma página de erro 404 personalizada no NGINX

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, opcionalmente, usá-lo 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.

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:

“Sorry, the page can't be loaded! Contact the site's administrator or support for assistance.” to a client.

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>Sorry the page can't be loaded!</a></h1>
		<div class="notfound-error">
			<p>Contact the site's administrator or support for assistance.</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 comando mkdir, 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 toda vez 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 arquivo .conf 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 reload nginx.service

E teste em um navegador se a configuração está funcionando bem.

Crie diferentes páginas personalizadas 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:

include snippets/error_pages.conf;

Salve seu arquivo de configuração NGINX e recarregue o serviço da seguinte forma:

sudo systemctl reload 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.