nginx: Create HTTP 503 Maintenance Custom Page

by

You can create a custom 503 maintenance page in Nginx by using the error_page directive and creating a custom error page.

Here’s an example of how you can create a custom 503 maintenance page in Nginx:

  1. Create a custom error page file with the desired content, for example 503.html. Place it in the root directory of your Nginx server.
<!DOCTYPE html>
<html>
<head>
<title>Maintenance Mode</title>
</head>
<body>
<h1>503 Service Unavailable</h1>
<p>Our site is currently under maintenance. Please check back later.</p>
</body>
</html>
  1. Add the following lines to the Nginx configuration file (usually /etc/nginx/nginx.conf):
server {
listen 80;
server_name yourdomain.com;
root /var/www/yourdomain.com;
index index.html;

error_page 503 /503.html;
location = /503.html {
internal;
}

location / {
if ($scheme != "https") {
return 301 https://$server_name$request_uri;
}

proxy_pass http://your_backend;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

  1. When you want to put your site in maintenance mode, set the return code for the root location to 503:
server {
listen 80;
server_name yourdomain.com;
root /var/www/yourdomain.com;
index index.html;

error_page 503 /503.html;
location = /503.html {
internal;
}

location / {
return 503;
}
}

  1. Test the configuration and restart Nginx:
nginx -t
systemctl restart nginx

Now, whenever your site is in maintenance mode, visitors will see your custom 503 maintenance page.

Note: This example is just one way to create a custom 503 maintenance page in Nginx. Depending on your specific needs, you may need to modify the configuration to suit your requirements.

Leave a Comment