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

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

Каждая ошибка включает в себя код ответа HTTP и краткое описание.

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

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

Этого можно добиться с помощью директивы error_page NGINX, которая используется для определения URI, который будет показан для указанной ошибки.

Nginx отправляет 404 на бэкэнд

Вы также можете, по желанию, использовать ее для изменения кода состояния HTTP в заголовках ответа, отправляемых клиенту.

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

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

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

Начните с создания страницы ошибки.

Вот пример простой HTML-страницы, которая отображает сообщение:

 "Извините, страница не может быть загружена! Обратитесь за помощью к администратору сайта или в службу поддержки." клиенту.

Образец кода пользовательской страницы 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>К сожалению, страница не может быть загружена!</a></h1>
		<div class="notfound-error">
			<p>Обратитесь за помощью к администратору сайта или в службу поддержки.</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.

Контекст местоположения указывает 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.conf.

Добавьте приведенную выше директиву include в контекст server {}.

Сохраните файл конфигурации 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

Кроме того, проверьте с помощью браузера, работает ли конфигурация так, как задумано.

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

Она также позволяет изменять код состояния HTTP в ответе клиенту.

Для получения дополнительной информации ознакомьтесь с документацией по странице ошибки nginx.

см. также:

Nginx

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

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

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

🐧 Примеры команд runlevel в системах Linux

🛠️ Решение ошибки unzip unsupported compression method 99

You may also like

Leave a Comment Cancel Reply