2

I am trying to use Nginx to redirect to a custom maintenance page, with it's own CSS/JS, when a maintenance file exists on the system. However, it just shows me the standard Nginx 503 redirect page?

location / {
        if (-f /var/www/html/maintenance_mode_on){
            return 503;
        }
        root /var/www/html/my_normal_site/;
        index index.html index.htm;
}
error_page 503 @maintenance;
location @maintenance {
        root /var/www/html/maintenance/;
        index maintenance.html;
}
RPH
  • 45
  • 8
  • I suspect that you cannot use `index` in this context. Try replacing `index maintenance.html;` with `try_files /maintenance.html =404;` – Richard Smith Sep 29 '22 at 08:34
  • @RichardSmith It works, but doesn't load any of my CSS or static files? – RPH Sep 29 '22 at 15:23
  • Where are the CSS and static files located? You will need to add an exception for those too. – Richard Smith Sep 30 '22 at 06:41
  • @RichardSmith They are located in their relevant folders inside /var/www/html/maintenance/. Hence why I used root /var/www/html/maintenance/. – RPH Sep 30 '22 at 09:58

2 Answers2

0

It may be better to use a slightly different approach, for example:

error_page 503 /maintenance/;
location /maintenance/ {
    root /var/www/html;
}
location = /maintenance/ {
    internal;
    root /var/www/html;
    index maintenance.html;
}
location = /maintenance/maintenance.html {
    internal;
    root /var/www/html;
}

The html document will be returned with a 503 error code as previously.

But any resource files will be available using a relative URL (e.g. css/example.css)

Or using an absolute URL (e.g. /maintenance/css/example.css)

Richard Smith
  • 45,711
  • 6
  • 82
  • 81
  • If the user navigates to https://myurl.com/maintenance/ would they not see the maintenance page then regardless of if maintenance_mode is on or off ? I don't want the user to be able to directly navigate to the maintenance page. – RPH Sep 30 '22 at 11:53
  • Prevent access to `/maintenance/` and `/maintenance/maintenance.html` by marking them as `internal`. See updated example. – Richard Smith Sep 30 '22 at 15:02
  • Nope, doesn't work. I get a 404 not found error or I get to the page but no static data. – RPH Oct 04 '22 at 14:11
  • I'm also confused as to why there are 3 location blocks for maintenance. – RPH Oct 04 '22 at 14:22
  • The first one gives unrestricted access to files in `/var/www/html/maintenance/` such as CSS and JS. The other two prevent external access to `/maintenance/` and `/maintenance/maintenance.html`. The URI `/maintenance/` is internally rewritten to `/maintenance/maintenance.html` so both locations need to be protected. See [the `location` documentation](http://nginx.org/en/docs/http/ngx_http_core_module.html#location). – Richard Smith Oct 04 '22 at 14:36
  • Shouldn't it be `root var/www/html/maintenance` then, since the CSS/JS folders are located inside there? Either way, no matter what I try; I cannot get it to load the static data. – RPH Oct 04 '22 at 16:08
  • The [`root` directive](http://nginx.org/en/docs/http/ngx_http_core_module.html#root) concatenates its value with the URI to obtain the path to file, so `root /var/www/html/maintenance` would place the URI `/maintenance/foo.css` at `/var/www/html/maintenance/maintenance/foo.css`. If your static files are not loading, check the access log and error log to identify the requested URL and the corresponding error. – Richard Smith Oct 05 '22 at 06:33
0

I managed to get it working mostly using the below code. However, the CSS file is being served but not applied. It's correctly being served as text/css as well. The static images are served and rendered correctly, so it's just the CSS giving issues. Any idea what the problem could be ? Thanks.

error_page 503 @maintenance;
location @maintenance {
    root /var/www/html/maintenance/;
    try_files $uri /maintenance.html =503;  
}
RPH
  • 45
  • 8