Nginx error page css - Исправление ошибок и поиск оптимальных решений проблем

I’m trying to add a custom error page for 503. I added these lines to server conf in nginx.conf file:

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
    internal;
}

It displays the custom page when uwsgi is down, however this doesn’t show any images. I tried many different configurations I can think of, but no luck. How I can display image file and enable css for a custom error page?

I put my custom error page into /home/username/sites/myProject/current/errorPages
and the file structure is:

errorPages/50x.html
errorPages/50x_files/50x.css
errorPages/50x_files/50x.js
errorPages/50x_files/image.png

asked Dec 22, 2014 at 21:53

I just had the same problem, and what did work is setting the nginx conf like this :

error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root  /home/username/sites/myProject/current/errorPages;
}
location = /image.png {
  root /home/username/sites/myProject/current/errorPages/50x_files;
}

And then reference the image simply as src=»image.png». The same should apply to your css and js!

Edit : I find a way to make it work for a bunch of file:

error_page 500 502 503 504 /errorPages/50x.html;
location /errorPages/ {
  root  /home/username/sites/myProject/current/;
}

This way all the files in the errorPages folder will be available (e.g. src=»/errorPages/image.png»), as nginx will try to match all «/errorPages/…». It is necessary to remove both the «=» after «location» (as it’s not an exact match anymore) and the «internal;» in it (as the other resources will be called from the html and not internally by nginx).

answered Mar 5, 2015 at 16:31

ShautiehShautieh

7288 silver badges17 bronze badges

I think the best approach is to do the following things:

Use inline CSS
Convert your images to Base64

After doing this, you can embed the generated Base64 string into the background-image CSS rule as follows:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==)

You can use the string with the <img> tags as well, just pass it to the src attribute as follows:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEADI.....==" />

This way you can keep the internal nginx rule.

johnnyRose

7,11017 gold badges42 silver badges61 bronze badges

answered Jan 22, 2018 at 13:50

The reason that your image/css is not shown/loaded, is because you’re using the internal directive. The internal directive specifies that a given location can only be used for internal requests, and is not available or accessible from the outside (i.e. http://mysite/errorPages/500.html). Thus, a 404 error on its turn is given for these files.

A few workarounds are:

Remove the internal directive

error_page 500 502 503 504 /50x.html;
location = /50x.html {
    root  /home/username/sites/myProject/current/errorPages;
}

Use css inline styles for your error pages. This however won’t work for your images, or other files that are linked to your page.
Place the css and image files outside of the errorPages folder, and refer to them in your html code, with a relative path, starting from the root of your website.

answered Jan 21, 2017 at 14:18

This worked for me:

error_page 500 502 503 504 = @errorz;
location @errorz{
        root /home/username/sites/myProject/current/errorPages;
        try_files $uri /50x.html = 502 503;
}

answered Jul 13, 2021 at 7:19

Mahdi AtaollahiMahdi Ataollahi

4,1944 gold badges28 silver badges37 bronze badges

Источник

7 июня, 2022 12:03 пп
373 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

Источник

Nice Nginx Error Page

What if your application could look nice even when it’s crashing? Try this custom error page for Nginx.

Preview

401 Unauthorized
404 Not Found
500 Internal Server Error

Installation

Copy templates/custom-error-page folder in your web root folder, for example /usr/share/nginx/html/custom-error-page.

Copy config/custom-error-page folder into your nginx config directory, for example /etc/nginx/conf.d/custom-error-page.

Edit custom-error-page/error-page.conf so the root values point to the correct folder on your server.

In your main nginx config file, include custom-error-page/http-statuses.conf inside the http block, outside the server block, like this:

include /etc/nginx/conf.d/custom-error-page/http-statuses.conf;
# ^ Add this line

server {
  listen 80;
  listen [::]:80;
  server_name localhost;
  # Your server configs here
}

In your nginx config file, include custom-error-page/error-page.conf inside your server block, like this:

include /etc/nginx/conf.d/custom-error-page/http-statuses.conf;

server {
  listen 80;
  listen [::]:80;
  server_name localhost;
  
  include /etc/nginx/conf.d/custom-error-page/error-page.conf;
  # ^ Add this line
  
  # Your server configs here
}

Restart Nginx and you’re done.

Feel free to modify the error template to your liking!

FAQ

I’m using Nginx with fastcgi_pass or proxy_pass and I see an error page from the upstream instead of the custom one

By default, Nginx will use the error pages from upstream if they are available. Nginx will only show it’s own error pages if it can’t connect to the upstream server. For example in case of timeout or if the upstream is down. You can override this behavior by setting fastcgi_intercept_errors on; or
proxy_intercept_errors on;.

I’m using xxx_intercept_errors but I would like to still show the custom 404 from my application server.

You can accomplish this by removing 404 from the list of statuses in error_page directive, in the file custom-error-page/error-page.conf. TODO: check if this actually works.

Thanks

I would like to thank the article One NGINX error page to rule them all for serving as inspiration. Using Server Side Includes drastically cuts down the number of required templates.

License

MIT.

For detailed license information, see the individual file headers and .reuse/dep5.

Источник

Mar 15, 2016

technical

—

3 mins to read

(581 words)

Background

I’ve noticed that configuring consistent error pages for multiple subdomains/server blocks in Nginx can be quite a pain. I like to have plenty of subdomains setup across multiple server blocks all which have the same error pages. Each time I’ve got to duplicate the pages to the webroot which has been very inconvenient. I’ve finally found a way to setup my error pages such that I can simply include a configuration in each of my subdomains and it will automatically redirect errors to the appropriate error page.

This quick tutorial aims to help you set up a way to simply include you existing error pages into existing or new Nginx configurations.

Prerequisites

Before beginning create yourself some error pages and store them on your server somewhere. Personally I find it easiest to have them in a consistent location where you won’t forget about them for example: /etc/nginx/errors/errorpages/ but the location is totally up to you. I recommend the dual directory setup as we will be pointing the root for the error pages to the errors folder, while the path will be /errorpages/ on your domain/subdomains.

Creating Configuration Files

The configuration file will tell Nginx to look for the error pages along with were the errors should redirect the user to. In my configuration the error pages exist at sub.domain.com/errorpages/<errorpage>.html Copy the contents of the configuration file below and save it to /etc/nginx/errorpage.conf. It is important to save it in the nginx root directory so that when the configuration file is used later on Nginx will know where to look.

errorpages.conf

error_page 401 /errorpages/401.html;
error_page 404 /errorpages/404.html;
error_page 500 502 503 504 /errorpages/generic.html;

location = /errorpages/401.html {
        root /etc/nginx/errors/;
}

location = /errorpages/404.html {
        root /etc/nginx/errors/;
}

location = /errorpages/generic.html {
        root /etc/nginx/errors/;
}

location = /errorpages/style.css {
        root /etc/nginx/errors/;
}

The error_pages directive tells Nginx where to send the user once they’ve encountered an issue. As you can see it redirects them to /errorpages/ but as you may know, we don’t actually have an /errorpages/ directory in our webroot. To solve this issue we create specific locations telling Nginx to look in a different directory for errorpages only. We explicitly tell Nginx to look for the required error page files at /etc/nginx/errors which we setup earlier.

Updating Server Configurations

The last step is to update the various server blocks within your sites-available. If your server block already contains the error_page directives be sure to remove them so that it will use our newly generated configuration. Now all you need to do is include errorpages.conf and Nginx will now start to redirect errors to our newly setup error pages. You can include this configuration in any/all of your server blocks and it will adjust accordingly. For example:

my.subdomain.com

server {
        listen      80;
        server_name my.subdomain.com;

        
        root /home/demo/vhost/my.domain.com/;

        
        include errorpages.conf;

        location / {
                index index.html;
        }

}

So if you have subdomain a, b and c now a.domain.com/errorpages/, b.domain.com/errorpages and c.domain.com/errorpages will exist.

Conclusion

Hopefully this has helped you optimize your error page configurations within your Nginx server configuration!

Источник