nginx custom error page 502 with css and image files

Question

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.h         


        

Answer 1

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:

1. Remove the internal directive

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

2. 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.
3. 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.