Nginx своя страница об ошибке

И так, вы все же заинтересовались как заменить стандартные страницы ошибок в Nginx на свои. Тогда приступим.

Создание собственных страниц ошибок в Nginx

Приступим к созданию собственных страниц ошибок в Nginx. HTML код страниц описанных ниже будет как пример, на своем боевом сервере вы с легкостью сможете кастомизировать и брендировать их как вам необходимо.

Создание страницы ошибки 404

Для начала создадим файл /usr/share/nginx/html/my_404_error.html и откроем его для ввода HTML кода страницы, для этого выполним 2 команды:

touch /usr/share/nginx/html/my_404_error.html
nano -w /usr/share/nginx/html/my_404_error.html

Вводим HTML код страницы 404 и сохраняем файл, пример:

<h1>Ой, ошибка 404</h1>
<p>На своей последней ссылке вы повернули налево, а не направо?</p>
<p>Нет проблем. Вот несколько советов, которые вернут вас на верную дорогу:</p>
<ul>
    <li>Если вы набрали адрес вручную, проверьте его корректность. Возможно, это просто опечатка.</li>
    <li>Если вы нашли проблему с одним из наших веб-сайтов, мы будем признательны, если вы могли бы сообщить о проблеме по почте: mail@domain.com</li>
    <li>Если вы проследовали по ссылке, то, вероятно, она сломана. Сообщите нам об этом по почте: mail@domain.com</li>
    <li>Если вы не уверены, что вы ищете, начните на с главной страницы domain.com.</li>
</ul>

Создание страницы ошибки 403

Как и в случае со страницей 404, нужно создать файл /usr/share/nginx/html/my_403_error.html, открыть его на редактирование, добавить HTML код для страницы ошибки 403 и сохранить файл, для этого выполняем 2 команды:

touch /usr/share/nginx/html/my_403_error.html
nano -w /usr/share/nginx/html/my_403_error.html

Вводим HTML код страницы 403 и сохраняем файл, пример:

<h1>Ой, ошибка 403. Доступ запрещен.</h1>
<p>У вас нет разрешения для доступа к странице, давайте попробуем решить эту проблему вместе:</p>
<ul>
<li>Может быть вы забыли авторизоваться?</li>
<li>Вы авторизированны под своей учетной записью?</li>
<li>...</li>
<li>Сообщите нам по почте: mail@domain.com и мы попробуем решить проблему вместе.</li>
</ul>

Создание страницы ошибки 500

Повторяем шаги описанные выше (файл: /usr/share/nginx/html/my_500_error.html):

touch /usr/share/nginx/html/my_500_error.html
nano -w /usr/share/nginx/html/my_500_error.html

Вводим HTML код страницы 500 и сохраняем файл, пример:

<h1>Ой, ошибка 500.</h1>
<p>Попробуйте обратится к странице чуть позже или сообщите нам о проблеме по почте: mail@domain.com</p>
<p>Спасибо, что вы с нами.</p>

И так с созданием страниц ошибок закончили. Еще раз повторюсь, вы можете внедрить CSS стили и картинки на эти страницы, что сделает страницы ошибок более привлекательными, здесь все зависит от вас.

Подключение собственных страниц ошибок в Nginx

Настройка Nginx

Для того, чтобы созданные страницы ошибок заработали, нужно отредактировать конфигурацию Nginx, открываем файл конфигурации для редактирования:

nano -w /etc/nginx/nginx.conf

В конфигурации нужно добавить блок подключения страниц ошибок в блок server {}, пример блока настройки для страницы 404:

error_page 404 /my_404_error.html;
location = /my_404_error.html {
    root /usr/share/nginx/html;
    internal;
}

Примечание. В файле nginx.conf уже может быть блок настройки страниц ошибок, его нужно закомментировать, удалить или изменить на свой. В любом случае перед редактированием файла конфигураций nginx сделайте резервную копию для возможности восстановить текущую рабочую версию настроек.

Пример добавления всех страниц ошибок в конфигурацию nginx:

http {
    #...

    server {
        #...

        error_page 404 /my_404_error.html;
        location = /my_404_error.html {
            root /usr/share/nginx/html;
            internal;
        }

        error_page 403 /my_403_error.html;
        location = /my_403_error.html {
            root /usr/share/nginx/html;
            internal;
        }

        error_page 500 /my_500_error.html;
        location = /my_500_error.html {
            root /usr/share/nginx/html;
            internal;
        }

    #...

    }
}

В примере указан путь к странице ошибки, установлена корневая папка и установлен доступ к файлам «internal» чтобы обеспечить доступ к старницам только через внутреннее перенаправление nginx (таким образом пользователь не будет иметь прямой доступ к файлам).

Применение изменений

Для того чтобы изменения вступили в силу нужно перезапустить Nginx:

service nginx reload

Все, собственные страницы ошибок в 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
• 🌐 Как использовать преимущества динамического резолва DNS в NGINX
• Как ограничить размер загрузки файлов в Nginx

Every time NGINX encounters an error as it attempts to process a client’s request, it returns an error. Each error includes an HTTP response code and a short description. The error usually is displayed to a user via a simple default HTML page.

Fortunately, you can configure NGINX to display custom error pages to your site’s or web application’s users. This can be achieved using the NGINX’s error_page directive which is used to define the URI that will be shown for a specified error. You can also, optionally use it to modify the HTTP status code in the response headers sent to a client.

In this guide, we will show how to configure NGINX to use custom error pages.

Create a Single Custom Page for All NGINX Errors

You can configure NGINX to use a single custom error page for all errors that it returns to a client. Start by creating your error page. Here is an example, a simple HTML page that displays the message:

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

Sample HTML Nginx Custom page code.

<!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>

Save the file with an appropriate name for example error-page.html and close it.

Next, move the file to your document root directory (/var/www/html/). If the directory doesn’t exist, you can create it using the mkdir command, as shown:

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

Then configure NGINX to use the custom error page using the error_page directive. Create a configuration file called custom-error-page.conf under /etc/nginx/snippets/ as shown.

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

Add the following lines to it:

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

This configuration causes an internal redirect to the URI/error-page.html every time NGINX encounters any of the specified HTTP errors 404, 403, 500, and 503. The location context tells NGINX where to find your error page.

Save the file and close it.

Now include the file in the http context so that all server blocks use the error page, in the /etc/nginx/nginx.conf file:

$ sudo vim /etc/nginx/nginx.conf

The include directory tells NGINX to include the configuration in the specified .conf file:

include snippets/custom-error-page.conf;

Alternatively, you can include the file for a specific server block (commonly known as vhost), for example, /etc/nginx/conf.d/mywebsite.conf. Add the above include directive in the server {} context.

Save your NGINX configuration file and reload the service as follows:

$ sudo systemctl reload nginx.service

And test from a browser if the setup is working fine.

Create Different Custom Pages for Each NGINX Error

You can also set up different custom error pages for each HTTP error in NGINX. We discovered a good collection of custom nginx error pages created by Denys Vitali on Github.

To set up the repository on your server, run the following commands:

$ 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

Next, add the following configuration in either your http context or each server block/vhost:

include snippets/error_pages.conf;

Save your NGINX configuration file and reload the service as follows:

$ sudo systemctl reload nginx.service

Also, test from a browser if the configuration is working as intended. In this example, we tested the 404 error page.

That’s all we had for you in this guide. NGINX’s error_page directive allows you to redirect users to a defined page or resource or URL when an error occurs. It also optionally allows for modification of the HTTP status code in the response to a client. For more information, read the nginx error page documentation.