/ tech-note

How to make a custom 502 Bad Gateway page on nginx?

I recently found that it takes a few seconds to relaunch node.js process in forever; when an user accesses the website while the process is relaunching, he or she would likely see an abhorring 502 - Bad Gateway nginx error page.

This is not the kind of results I would like to show to my users, so I decided to alter it.

Having googled it up as usual, the first result was no more useful as I didn't follow what it is talking about. Having dug it up further, I found that you must follow this set of procedures:

  1. Create a custom error page html file

  2. Edit nginx's configuration file

  3. Restart nginx

So let's dive into the processes😃

Create a custom error page html file

First you must create the custom HTML error page. I omit the content, but the path is anywhere you like to put; I put it at /usr/share/nginx/50x.html as the directory also has default page.

Edit nginx's configuration file

The exact location of the configuration file depends on you but it is usually /etc/nginx/sites-available/default. Open it and add the following at the end of the file but within the server directive:

error_page 500 502 503 504 /50x.html;
location = /50x.html {
	root /usr/share/nginx/html;
	internal;
}

Restart nginx

This is pretty simple; just run sudo service nginx restart and everything should be working fine.

Now I wish my users would not get disappointed again to see the abhorrent Bad Gateway messages; unfortunately it would likely lose some of your potential users...😿