7 июня, 2022 12:03 пп
938 views
| Комментариев нет
LEMP Stack, Ubuntu
Nginx – это высокопроизводительный веб-сервер, способный гибко и качественно обслуживать контент. Оформляя страницы своего сайта, вы наверняка захотите создать пользовательский стиль для каждого его элемента, включая и страницы об ошибках, которые появляются, если контент недоступен. В этом руководстве мы покажем, как настроить такие страницы на Nginx.
Требования
- Виртуальный сервер с пользователем sudo (мы используем сервер Ubuntu 22.04, настроенный по этому мануалу).
- Предварительно установленный веб-сервер Nginx (инструкции по установке вы найдете здесь).
Создание пользовательской страницы об ошибке
Пользовательские страницы ошибок, которые мы используем здесь, предназначены для демонстрационных целей. Если у вас есть свои страницы, используйте их.
Поместите пользовательские страницы ошибок в каталог /usr/share/nginx/html, корневой каталог Nginx по умолчанию. Там мы создадим страницу для ошибки 404 под названием custom_404.html и для общих ошибок уровня 500 под названием custom_50x.html.
Примечание: Дальнейшие строки можно использовать, если вы тренируетесь на наших страницах. В противном случае не забудьте указать свои данные.
Сначала создайте HTML-файл для своей пользовательской страницы 404 с помощью nano или другого текстового редактора:
sudo nano /usr/share/nginx/html/custom_404.html
Вставьте туда код, который определяет пользовательскую страницу:
<h1 style='color:red'>Error 404: Not found :-(</h1> <p>I have no idea where that file is, sorry. Are you sure you typed in the correct URL?</p>
Сохраните и закройте файл.
Теперь создайте файл HTML для страницы 500:
sudo nano /usr/share/nginx/html/custom_50x.html
Вставьте в файл следующее:
<h1>Oops! Something went wrong...</h1> <p>We seem to be having some technical difficulties. Hang tight.</p>
Сохраните и закройте файл.
В данный момент у вас есть две пользовательские страницы ошибок, которые будут отображаться на сайте, когда запросы клиентов приводят к различным ошибкам.
Настройка Nginx для поддержки пользовательских страниц
Итак, пора сообщить Nginx, что он должен использовать эти страницы всякий раз, когда возникают соответствующие ошибки. Откройте тот файл server-блока в каталоге /etc/nginx/sites-enabled, который вы хотите настроить. Здесь мы используем стандартный файл по имени default. Если вы настраиваете свои собственные страницы, пожалуйста, убедитесь, что используете правильный файл:
sudo nano /etc/nginx/sites-enabled/default
Теперь нужно направить Nginx на соответствующие страницы.
Настройка пользовательской страницы 404
Используйте директиву error_page, чтобы при возникновении ошибки 404 (когда запрошенный файл не найден) обслуживалась созданная вами пользовательская страница. Создайте location-блок для вашего файла, где вы сможете установить его правильное расположение в файловой системе и указать, что файл доступен только через внутренние перенаправления Nginx (не запрашиваемые клиентами напрямую):
server {
listen 80 default_server;
. . .
error_page 404 /custom_404.html;
location = /custom_404.html {
root /usr/share/nginx/html;
internal;
}
}
Обычно устанавливать root в новом блоке location не нужно, так как он совпадает с root в блоке server. Однако здесь мы явно указываем, что страницы ошибок нужно обслуживать, даже если вы перемещаете свой обычный веб-контент и связанный с ним root в другое место.
Настройка страницы ошибок 50х
Затем добавьте новые директивы, чтобы Nginx, столкнувшись с ошибками уровня 500 (это проблемы, связанные с сервером), мог обслуживать другую пользовательскую страницу, которую вы создали. Здесь мы будем следовать той же формуле, которую вы использовали в предыдущем разделе. На этот раз мы насторим несколько ошибок уровня 500, чтобы все они использовали страницу custom_50x.html.
Внизу мы также добавим фиктивный FastCGI, чтобы вы могли протестировать свою страницу с ошибкой уровня 500. Это выдаст ошибку, потому что бэкэнд на самом деле не существует. Так вы можете убедиться, что ошибки уровня 500 обслуживают вашу пользовательскую страницу.
Отредактируйте файл /etc/nginx/sites-enabled/default следующим образом:
server {
listen 80 default_server;
. . .
error_page 404 /custom_404.html;
location = /custom_404.html {
root /usr/share/nginx/html;
internal;
}
error_page 500 502 503 504 /custom_50x.html;
location = /custom_50x.html {
root /usr/share/nginx/html;
internal;
}
location /testing {
fastcgi_pass unix:/does/not/exist;
}
}
Сохраните и закройте файл, когда закончите.
Перезапуск Nginx и тестирование
Чтобы проверить синтаксис ваших файлов, введите:
sudo nginx -t
Если команда обнаружила какие-либо ошибки, исправьте их, прежде чем продолжить. Перезапустите Nginx, если ошибок нет:
sudo systemctl restart nginx
Теперь, если вы перейдете на домен или IP-адрес вашего сервера и запросите несуществующий файл, вы должны увидеть настроенную вами страницу 404:
http://server_domain_or_IP/thiswillerror
Перейдите в расположение вашего FastCGI и вы получите ошибку 502 Bad Gateway, что является ошибкой уровня 50х:
http://server_domain_or_IP/testing
Вернитесь в конфигурационный файл и удалите фиктивный FastCGI.
Заключение
Теперь ваш веб-сервер может обслуживать пользовательские страницы ошибок. Это простой способ персонализировать ваш сайт и обеспечить лучший пользовательский опыт даже при возникновении ошибок. Один из способов оптимизировать эти страницы – разместить на них дополнительную информацию или полезные ссылки для пользователей. Если вы сделаете это, убедитесь, что ссылки доступны даже при возникновении соответствующих ошибок.
Tags: NGINX, Ubuntu 22.04
You can setup a custom error page for every location block in your nginx.conf, or a global error page for the site as a whole.
To redirect to a simple 404 not found page for a specific location:
location /my_blog {
error_page 404 /blog_article_not_found.html;
}
A site wide 404 page:
server {
listen 80;
error_page 404 /website_page_not_found.html;
...
You can append standard error codes together to have a single page for several types of errors:
location /my_blog {
error_page 500 502 503 504 /server_error.html
}
To redirect to a totally different server, assuming you had an upstream server named server2 defined in your http section:
upstream server2 {
server 10.0.0.1:80;
}
server {
location /my_blog {
error_page 404 @try_server2;
}
location @try_server2 {
proxy_pass http://server2;
}
The manual can give you more details, or you can search google for the terms nginx.conf and error_page for real life examples on the web.
Каждый раз, когда 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
Здравствуйте, проблема такая: при вызове несуществующей страницы например mysite.ru/wrongpage
почемуто открывается главная страница.
конфиги такие:
server{
listen 80;
server_name www.mysite.ru;
rewrite ^ http://mysite.ru$request_uri? permanent; #301 redirect
}
server {
listen 80;
server_name mysite.ru;
root /home/user/mysite;
location / {
index index.htm index.html index.php;
try_files $uri /index.html;
error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;
}
location = /index.html {
if ($request_uri = /index.html) {
rewrite ^ http://mysite.ru? permanent;#301 redirect
}
}
error_log /var/log/nginx/mysite.error.log;
access_log /var/log/nginx/mysite.access.log;
}Подскажите, пожалуйста, как исправить.
-
Вопрос заданболее трёх лет назад
-
7723 просмотра
С какой целью у вас в try_Files указан /index.html?try_files $uri /index.html;
Пробует найти $uri и если не находит перебрасывает на /index.html.
Это синтаксис try_Files:
try_files file … uri;
Последний аргумент — это URL или named location в случае, если ни один из предыдущих путей не был найден.
В вашем случае, должно быть тогда:try_files $uri /404.html
Насколько я понимаю начиная с какой-то версии nginx поддерживает следующий синтаксис:try_files $uri =404
Тогда в случае если ни один из аргументов не был найден генерируется HTTP код 404 и далее обработка идет по соотвествующей error_page.
Пригласить эксперта
error_page 400 404 /404.html;
location = /404.html {
root /home/address
}
ну у меня так.
вне этого:
location / {
-
Показать ещё
Загружается…
Сбер
•
Нижний Новгород
от 170 500 ₽
13 июн. 2023, в 02:04
1000 руб./в час
12 июн. 2023, в 23:59
10000 руб./за проект
12 июн. 2023, в 21:24
2000 руб./в час
Минуточку внимания
Вступление
Nginx — это высокопроизводительный веб-сервер, способный предоставлять контент гибко и эффективно. При разработке ваших веб-страниц часто бывает полезно настроить каждый фрагмент контента, который увидят ваши пользователи. Это включает страницы ошибок, когда они запрашивают контент, который недоступен. В этом руководстве мы покажем, как настроить Nginx для использования пользовательских страниц ошибок в Ubuntu 14.04.
Предпосылки
Вам также необходимо установить Nginx в вашей системе. Узнайте, как настроить это, следуя th guide.
После того, как вы выполнили вышеупомянутые шаги, продолжите это руководство.
Создание пользовательских страниц ошибок
Мы создадим несколько пользовательских страниц ошибок для демонстрационных целей, но ваши пользовательские страницы, очевидно, будут другими.
Мы поместим наши пользовательские страницы ошибок в каталог + / usr / share / nginx / html +, где Uginntu Nginx устанавливает корневой каталог документа по умолчанию. Мы создадим страницу для 404 ошибок, которая называется + custom_404.html +, и страницу для общих ошибок уровня 500, которая называется + custom_50x.html +. Вы можете использовать следующие строки, если вы только тестируете. В противном случае разместите свой собственный контент в следующих местах:
echo "<h1 style='color:red'>Error 404: Not found :-(</h1>" | sudo tee /usr/share/nginx/html/custom_404.html
echo "<p>I have no idea where that file is, sorry. Are you sure you typed in the correct URL?</p>" | sudo tee -a /usr/share/nginx/html/custom_404.html
echo "<h1>Oops! Something went wrong...</h1>" | sudo tee /usr/share/nginx/html/custom_50x.html
echo "<p>We seem to be having some technical difficulties. Hang tight.</p>" | sudo tee -a /usr/share/nginx/html/custom_50x.htmlТеперь у нас есть две пользовательские страницы ошибок, которые мы можем обслуживать, когда клиентские запросы приводят к различным ошибкам.
Настройка Nginx для использования ваших страниц с ошибками
Теперь нам просто нужно сказать Nginx, что он должен использовать эти страницы всякий раз, когда возникают правильные условия ошибки. Откройте файл блока сервера в каталоге + / etc / nginx / sites-enabled +, который вы хотите настроить. Мы будем использовать файл блока сервера по умолчанию, называемый + default +, но вы должны настроить свои собственные блоки сервера, если вы используете файл не по умолчанию:
sudo nano /etc/nginx/sites-enabled/defaultТеперь мы можем указать Nginx на наши пользовательские страницы ошибок.
Прямые ошибки 404 на пользовательской странице 404
Используйте директиву + error_page +, чтобы при возникновении ошибки 404 (когда запрошенный файл не был найден), созданная вами пользовательская страница обслуживалась. Мы создадим блок местоположения для файла, где мы сможем убедиться, что корень соответствует расположению нашей файловой системы и что файл доступен только через внутренние перенаправления Nginx (не запрашиваемые напрямую клиентами):
/ И т.д. / Nginx / сайты с поддержкой / по умолчанию
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
. . .
}Обычно нам не нужно устанавливать + root + в новом блоке местоположения, поскольку он совпадает с корнем в блоке сервера. Тем не менее, мы здесь явно, так что наши страницы ошибок обслуживаются, даже если мы перемещаем наш обычный веб-контент и корень связанного документа в другое место.
Направляйте ошибки 500 уровней на пользовательскую страницу 50x
Затем мы можем добавить директивы, чтобы гарантировать, что когда Nginx обнаружит ошибки 500-го уровня (проблемы, связанные с сервером), он будет обслуживать другую пользовательскую страницу, которую мы создали. Это будет следовать той же формуле, которую мы использовали в предыдущем разделе. На этот раз мы устанавливаем несколько ошибок уровня 500 для всех, используя страницу + custom_50x.html +:
/ И т.д. / Nginx / сайты с поддержкой / по умолчанию
server {
listen 80 default_server;
listen [::]:80 default_server ipv6only=on;
. . .
error_page 404 /custom_404.html;
location = /custom_404.html {
root /usr/share/nginx/html;
internal;
}
}Внизу мы также добавили фиктивный проход FastCGI, чтобы мы могли протестировать нашу страницу ошибок на 500 уровнях. Это не будет работать правильно, так как сервер не существует. Запрос страницы здесь позволит нам проверить, что 500-уровневые ошибки обслуживают нашу пользовательскую страницу.
Сохраните и закройте файл, когда вы закончите.
Перезапуск Nginx и тестирование ваших страниц
Проверьте синтаксис файла конфигурации, набрав:
Если были обнаружены какие-либо ошибки, исправьте их, прежде чем продолжить. Когда синтаксические ошибки не возвращаются, перезапустите Nginx, набрав:
sudo service nginx restartТеперь, когда вы переходите на домен или IP-адрес вашего сервера и запрашиваете несуществующий файл, вы должны увидеть страницу 404, которую мы настроили:
изображение: https: //assets.digitalocean.com/articles/nginx_custom_error_1404/custom_404.png [нестандартный 404 nginx]
Когда вы перейдете в место, которое мы настроили для прохода FastCGI, мы получим ошибку 502 Bad Gateway с нашей пользовательской страницей на 500 уровней:
изображение: https: //assets.digitalocean.com/articles/nginx_custom_error_1404/custom_50x.png [пользовательский 50x nginx]
Теперь вы можете вернуться и удалить поддельное местоположение прохода FastCGI из вашей конфигурации Nginx.
Заключение
Теперь вы должны обслуживать пользовательские страницы ошибок для вашего сайта. Это простой способ персонализировать опыт ваших пользователей, даже если они испытывают проблемы. Одним из предложений для этих страниц является включение ссылок на места, куда они могут обратиться за помощью или дополнительной информацией. Если вы сделаете это, убедитесь, что ссылки назначения доступны даже при возникновении связанных ошибок.