0

How to make the Nginx ingress controller serve a custom maintenance page for the 502/503 service unavailable error?

Our application on the k8s cluster sometimes goes down due to some connection errors, at that time Nginx ingress controller throws 503 service unavailable or sometimes 502 bad gateway error on the UI.

So I want to serve a custom maintenance HTML page upon hitting these two error codes and when our application goes down. But when our application comes back we should be able to serve traffic as usual without any manual intervention.

# Maintenance Html page
<!doctype html>
<title>Site Maintenance</title>
<style>
  body { text-align: center; padding: 150px; }
  h1 { font-size: 50px; }
  body { font: 20px Helvetica, sans-serif; color: #333; }
  article { display: block; text-align: left; width: 650px; margin: 0 auto; }
  a { color: #dc8100; text-decoration: none; }
  a:hover { color: #333; text-decoration: none; }
</style>

<article>
    <h1>We&rsquo;ll be back soon!</h1>
    <div>
        <p>Sorry for the inconvenience but we&rsquo;re performing some maintenance at the moment. If you need to you can always <a href="mailto:#">contact us</a>, otherwise we&rsquo;ll be back online shortly!</p>
        <p>&mdash; The Team</p>
    </div>
</article>

So, how can we make Nginx ingress controller serve this kind of dynamic request where on 503 or 502 error maintenance page should be served and switch when the app comes back online?

Dharani Dhar Golladasari
  • 632
  • 1
  • 9
devops-admin
  • 1,447
  • 1
  • 15
  • 26

1 Answers1

0

We need to change nginx conf files to publish the custom HTML pages in time of error codes like 404,502,503…50x

For this you can create the individual html files for each code with your message in it like my502.html and put them in usr/share/nginx/html directory where Nginx default documents reside.

Now you need to configure the Nginx server file to utilize the custom pages. Open the default file in /etc/nginx/server-enabled and configure as follows and restart the server

 server {
        listen 80 default_server;
    
    
        . . .
    
        error_page 500 502 503 /my502.html;
        location = /my502.html {
            root /usr/share/nginx/html;
            internal;
        }
    }

Note: In this case we are using my502.html for all 500 series error codes.

For more information refer link1 link2

Dharani Dhar Golladasari
  • 632
  • 1
  • 9