How to customize a 404 error page (ubuntu nginx)

I am currently in the process of setting up my own website, and one of the things I have run into is the ugly 404 error page. I am running a LEMP stack on Ubuntu, so my default error page is an nginx page. Needless to say, I do not like how default error pages look, and would like to change it. I have seen various methods of how to do this, but a lot of them deal with Apache (which may be the same), .htaccess, etc. However, I am sure there must be an easier way to do this. Isn’t the 404 page just a simple .html page that we should be able to edit? How can I edit the default 404 page in the easiest way possible without using someone else’s?

2 Answers 2

The answer is yes, there is an easy way to customize the 404 page as an HTML file, at least on a LEMP stack. Assuming that you have not re-organized «too many» files, the only thing that needs to be done is to create a single file.

Explanation:
If you go to /etc/nginx/sites-available/default.conf and open it, you will notice a block that looks similar to this:

server < listen 80 default_server; listen [::]:80 default_server ipv6only=on; root /usr/share/nginx/html; index index.php index.html index.htm; # Make site accessible from http://localhost/ server_name localhost unaviamedia.ca; location / < # First attempt to serve request as file, then # as directory, then fall back to displaying a 404. try_files $uri $uri/ =404; # Uncomment to enable naxsi on this location # include /etc/nginx/naxsi.rules >error_page 404 /404.html; error_page 500 502 503 504 /50x.html; location = /50x.html < root /usr/share/nginx/html; >location ~ \.php$ < try_files $uri =404; fastcgi_split_path_info ^(.+\.php)(/.+)$; fastcgi_pass unix:/var/run/php5-fpm.sock; fastcgi_index index.php; include fastcgi_params; >. > 

Disclaimer:
As you can see from this line: root /usr/share/nginx/html; , my home directory is » /usr/share/nginx/html .» If yours is different, you will need to change the next file path I mention.

Notice this line: error_page 404 /404.html; , midway down the page? This is the path to the 404 HTML error page for your site.

Explanation:

• error_page — specifies that this line pertains to HTTP error pages.
• 404 — the specific HTTP error code that this page will respond to.
• /404.html — the «root-relative» path to the file, with the file name included.
  • If your root is different than the one above, you will need to change this file path to reflect the difference (as mentioned above).

  However, if you go to the path above, you will notice that there is no file by that name in the directory. Therefore, the default nginx error page will display.

  To change this, merely make a custom HTML page that will be your 404 error page, and save it in your root directory as «404.html.» Then, the above path ( error_page 404 /404.html; ) will be able to display your custom page when a 404 error occurs.

  I’m fairly certain that you could add the necessary «error_page» lines for whatever other HTTP error codes you may wish to cover for, or route several to the same generic error page (but I have not tried this). Also, I’m fairly sure that the setup will be the same for other server types, but again, I have not tried this.

  Please let me know if this is incorrect (or could be done better), or if this could lead to accidental problems farther down the road.

  Источник

  Пользовательские страницы ошибок в Nginx

  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

  Вставьте туда код, который определяет пользовательскую страницу:

  Error 404: Not found :-(
   
  I have no idea where that file is, sorry. Are you sure you typed in the correct URL?

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

  Теперь создайте файл HTML для страницы 500:

  sudo nano /usr/share/nginx/html/custom_50x.html

  Вставьте в файл следующее:

  Oops! Something went wrong.
   
  We seem to be having some technical difficulties. Hang tight.

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

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

  Настройка Nginx для поддержки пользовательских страниц

  Итак, пора сообщить Nginx, что он должен использовать эти страницы всякий раз, когда возникают соответствующие ошибки. Откройте тот файл server-блока в каталоге /etc/nginx/sites-enabled, который вы хотите настроить. Здесь мы используем стандартный файл по имени default. Если вы настраиваете свои собственные страницы, пожалуйста, убедитесь, что используете правильный файл:

  sudo nano /etc/nginx/sites-enabled/default

  Теперь нужно направить Nginx на соответствующие страницы.

  Настройка пользовательской страницы 404

  Используйте директиву error_page, чтобы при возникновении ошибки 404 (когда запрошенный файл не найден) обслуживалась созданная вами пользовательская страница. Создайте location-блок для вашего файла, где вы сможете установить его правильное расположение в файловой системе и указать, что файл доступен только через внутренние перенаправления Nginx (не запрашиваемые клиентами напрямую):

  Обычно устанавливать 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 и тестирование

  Чтобы проверить синтаксис ваших файлов, введите:

  Если команда обнаружила какие-либо ошибки, исправьте их, прежде чем продолжить. Перезапустите Nginx, если ошибок нет:

  sudo systemctl restart nginx

  Теперь, если вы перейдете на домен или IP-адрес вашего сервера и запросите несуществующий файл, вы должны увидеть настроенную вами страницу 404:

  

  Перейдите в расположение вашего FastCGI и вы получите ошибку 502 Bad Gateway, что является ошибкой уровня 50х:

  

  Вернитесь в конфигурационный файл и удалите фиктивный FastCGI.

  Заключение

  Теперь ваш веб-сервер может обслуживать пользовательские страницы ошибок. Это простой способ персонализировать ваш сайт и обеспечить лучший пользовательский опыт даже при возникновении ошибок. Один из способов оптимизировать эти страницы – разместить на них дополнительную информацию или полезные ссылки для пользователей. Если вы сделаете это, убедитесь, что ссылки доступны даже при возникновении соответствующих ошибок.

  Источник

  Настройка пользовательских страниц ошибок Nginx в Ubuntu 14.04

  Nginx – это высокопроизводительный и гибкий веб-сервер.

  При проектировании веб-страниц часто возникает необходимость настроить каждую часть контента, которую будут видеть пользователи, в индивидуальном порядке. Это касается и страниц ошибок, которые возникают, если запрашиваемый контент недоступен. В этом руководстве показано, как настроить Nginx для отображения пользовательских страниц ошибок в системе Ubuntu 14.04.

  Требования

  Для выполнения данного руководства нужно иметь учётную запись пользователя с привилегиями sudo; подробнее об этом можно узнать в руководстве «Начальная настройка сервера Ubuntu 14.04».

  Кроме того, нужно предварительно установить Nginx; чтобы получить инструкции по установке веб-сервера, читайте эту статью.

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

  Для начала нужно создать свою страницу ошибок.

  Примечание: Для тестирования можно использовать следующий код; в противном случае рекомендуется внести в echo собственный текст.

  Пользовательские страницы ошибок должны храниться в каталоге /usr/share/nginx/html – стандартном document root веб-сервера Nginx в системе Ubuntu. Создайте страницу 404 по имени custom_404.html и общую страницу для ошибок с кодом 500 по имени custom_50x.html.

  echo «

  Error 404: Not found 🙁

  » | sudo tee /usr/share/nginx/html/custom_404.html
  echo «

  I have no idea where that file is, sorry. Are you sure you typed in the correct URL?

  » | sudo tee -a /usr/share/nginx/html/custom_404.html
  echo «

  Oops! Something went wrong.

  » | sudo tee /usr/share/nginx/html/custom_50x.html
  echo «

  We seem to be having some technical difficulties. Hang tight.

  » | sudo tee -a /usr/share/nginx/html/custom_50x.html

  Итак, теперь на сервере есть две страницы ошибок, которые должны использоваться в случае, если пользователь запрашивает недоступный контент.

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

  Теперь нужно настроить поддержку только что созданных страниц при возникновении соответствующей ошибки. Для этого нужно отредактировать виртуальные хосты (Nginx называет их блоками server); откройте блок server в каталоге /etc/nginx/sites-enabled

  В данном руководстве для примера показано, как отредактировать стандартный хост default; если вы используете другие блоки server, выполните инструкции раздела в файлах этих блоков.

  sudo nano /etc/nginx/sites-enabled/default

  Настройка страницы 404

  Конфигурационный файл Nginx определяет страницу 404 при помощи директивы error_page. Нужно отредактировать соответствующий блок файла, чтобы убедиться, что директива root указывает на локальную файловую систему и что файл доступен только по внутренним редиректам Nginx (т.е, не может запрашиваться непосредственно клиентами):

  /etc/nginx/sites-enabled/default
  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;
  >
  >

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

  Настройка страницы ошибок 500

  Затем нужно добавить директивы для поддержки пользовательской страницы ошибок 500. Это делается точно таким же образом; используйте следующий код:

  /etc/nginx/sites-enabled/default
  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;
  >
  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;
  >
  >

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

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

  Тестирование настроек

  Проверьте синтаксис файла на наличие ошибок при помощи команды:

  Если команда обнаружила в файле ошибки, исправьте их. Затем перезапустите веб-сервер:

  sudo service nginx restart

  Теперь откройте домен или IP сервера в браузере и запросите несуществующий файл, чтобы проверить работу страницы 404:

  http:// server_domain_or_IP /thiswillerror

  На экране появится страница:

  Error 404: Not found 🙁
  I have no idea where that file is, sorry. Are you sure you typed in the correct URL?

  Если запросить FastCGI, на экране появится страница ошибки 502 Bad Gateway:

  http:// server_domain_or_IP /testing
  Oops! Something went wrong.
  We seem to be having some technical difficulties. Hang tight.

  После тестирования удалите фиктивный путь к FastCGI из настроек Nginx.

  Заключение

  Теперь сервер Nginx обслуживает пользовательские страницы ошибок для сайта. В целом, пользовательские страницы ошибок – это отличный способ помочь посетителям сайта разобраться, в чём дело, предоставить им всю необходимую информацию об ошибке и полезные ссылки (не забудьте убедиться, что ссылки работают даже в случае возникновения ошибок).

  Источник