Поиск по сайту:

Как создать собственную страницу ошибки 404 в NGINX


Каждый раз, когда NGINX сталкивается с ошибкой при попытке обработать запрос клиента, он возвращает ошибку. Каждая ошибка включает код ответа HTTP и краткое описание. Ошибка обычно отображается пользователю через простую страницу HTML по умолчанию.

К счастью, вы можете настроить NGINX для отображения пользовательских страниц ошибок пользователям вашего сайта или веб-приложения. Этого можно добиться с помощью директивы NGINX error_page, которая используется для определения URI, который будет отображаться для указанной ошибки. Вы также можете (при необходимости) использовать его для изменения кода состояния HTTP в заголовках ответов, отправляемых клиенту.

В этом руководстве мы покажем, как настроить NGINX для использования пользовательских страниц ошибок.

Создайте единую пользовательскую страницу для всех ошибок NGINX.

Вы можете настроить NGINX на использование одной настраиваемой страницы ошибок для всех ошибок, которые он возвращает клиенту. Начните с создания страницы ошибки. Вот пример простой HTML-страницы, отображающей сообщение:

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

Пример 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>

Сохраните файл с соответствующим именем, например error-page.html, и закройте его.

Затем переместите файл в корневой каталог вашего документа (/var/www/html/). Если каталог не существует, вы можете создать его с помощью команды mkdir, как показано:

sudo mkdir -p  /var/www/html/
sudo cp error-page.html /var/www/html/

Затем настройте NGINX на использование пользовательской страницы ошибок с помощью директивы error_page. Создайте файл конфигурации с именем custom-error-page.conf в /etc/nginx/snippets/, как показано.

sudo mkdir /etc/nginx/snippets/
sudo vim /etc/nginx/snippets/custom-error-page.conf 

Добавьте в него следующие строки:

error_page 404 403 500 503 /error-page.html;
location = /error-page.html {
        root /var/www/html;
        internal;
}

Эта конфигурация вызывает внутреннее перенаправление на URI/error-page.html каждый раз, когда NGINX обнаруживает любую из указанных ошибок HTTP 404, 403, 500 и 503. Контекст location сообщает NGINX, где найти страницу с ошибкой.

Сохраните файл и закройте его.

Теперь включите файл в контекст http, чтобы все блоки сервера использовали страницу ошибки в файле /etc/nginx/nginx.conf:

sudo vim /etc/nginx/nginx.conf

Каталог include сообщает NGINX включить конфигурацию в указанный файл .conf:

include snippets/custom-error-page.conf;

Альтернативно вы можете включить файл для определенного блока сервера (обычно известного как vhost), например, /etc/nginx/conf.d/mywebsite. конф. Добавьте указанную выше директиву include в контекст {} сервера.

Сохраните файл конфигурации NGINX и перезагрузите службу следующим образом:

sudo systemctl reload nginx.service

И проверьте в браузере, работает ли настройка нормально.

Создайте разные пользовательские страницы для каждой ошибки NGINX

Вы также можете настроить разные страницы ошибок для каждой ошибки HTTP в NGINX. Мы обнаружили хорошую коллекцию пользовательских страниц ошибок nginx, созданную Денисом Витали на Github.

Чтобы настроить репозиторий на вашем сервере, выполните следующие команды:

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

Затем добавьте следующую конфигурацию либо в контекст http, либо в каждый блок/vhost сервера:

include snippets/error_pages.conf;

Сохраните файл конфигурации NGINX и перезагрузите службу следующим образом:

sudo systemctl reload nginx.service

Кроме того, проверьте в браузере, работает ли конфигурация должным образом. В этом примере мы протестировали страницу с ошибкой 404.

Это все, что у нас было для вас в этом руководстве. Директива NGINX error_page позволяет перенаправлять пользователей на определенную страницу, ресурс или URL-адрес при возникновении ошибки. Он также опционально позволяет изменять код состояния HTTP в ответе клиенту. Для получения дополнительной информации прочтите документацию по странице ошибок nginx.