1. Introduction

After arriving at the company in the morning on July 30, 2020-30, I habitually opened the homepage of nuggets to see if there was any article I was interested in, but I was surprised to see the following:

Yes, I upgraded Lv3, which is the recognition and encouragement for my persistence in writing for more than one year. I couldn’t hide the joy in my heart, so I sent a gold-digging boiling point to commemorate this moment, and then continued to work.

After going out to dinner at 12 o ‘clock, I went back to my seat and opened the nuggets home page again.

At this time to visit all nuggets articles, will see the above such a page, tell you the site to carry out maintenance and upgrade, very intimate, and this interface is very good-looking, I like it very much.

2. Think about

How do you feel when you see this page?

Maybe you think this is very simple, maybe you think this is very Low, it is 2020, the service can stop so long, in the Internet company, stop for a minute is great.

Put aside the Internet company not to say, only nuggets this upgrade maintenance, I feel very professional, why?

Because a lot of websites upgrade, do not prompt the user, ok, also do a page with you, think beautiful, I do not believe you have not seen the following:

I remember in my first job, during a late launch, I noticed that during the launch time, our domain name was visited by a maintenance notification page like Nuggets. I thought, this would be a good experience, so users would know why the site was not working.

However, in my later work, I found that no one did this, AND I also suggested it, but some people didn’t realize it, and some people did, but they didn’t think it was necessary. Anyway, the operation knew that we were releasing. In short, this seemingly simple and professional thing, really few people do it.

But personally, I think it is right to do so, especially during the upgrade and maintenance can not tell the user one by one, so do really professional, the user will know at a glance, originally this period of time in maintenance ah, then I maintain good to continue to visit, all say user experience, this is the user experience.

Ok, back to the point, next to share, how to like the Nuggets so elegant website upgrade maintenance?

3. The implementation

While the Nuggets website was down, I looked at the web requests in Chrome and found that all the requests returned 503 status code, as shown below:

503 is an HTTP status code that means Service Unavailable, but the situation is temporary and will be restored After some time. If the delay time is expected, the response can include a retry-after header to indicate the delay time.

For example, the estimated recovery time of the nuggets upgrade maintenance is 08:00 on July 31, 2020-20, so its retry-After is given this message, as shown below:

The first step in the implementation must be to install Nginx.

3.1 install Nginx

First, download the Nginx Linux installation package from nginx.org/en/download… The version I downloaded is 1.18.0:

Then upload the downloaded file to the Linux server. The directory I uploaded was /usr/local, then switch to /usr/local and decompress it using the following command:

The tar - ZXVF nginx - 1.18.0. Tar. GzCopy the code

Nginx-1.18.0: nginx-1.18.0: nginx-1.18.0: nginx-1.18.0

yum install gcc-c++

yum install -y pcre pcre-devel

yum install -y zlib zlib-devel

yum install -y openssl openssl-devel
Copy the code

Then execute the command:

./configure
Copy the code

Then execute the make command to compile:

Finally, run make install to install:

The nginx folder is automatically created, as shown below:

3.2 start the Nginx

Switch to the /user/local/nginx/sbin directory and run the following command to start nginx:

./nginx
Copy the code

If the following interface is displayed, the Nginx installation is successful:

Matters needing attention:

Nginx monitors port 80 by default. If you use Ali cloud server like me, you need to add the port configuration in the security group rules, otherwise you cannot access:

3.3 Configuring 503

Here is a simple 503.html page (you can make it look better in practice) and put it in the HTML directory of Nginx:

<! DOCTYPEhtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Website Maintenance Notice</title>
</head>
<body>
    <img src="/images/snipaste_20200730_194851.png"/>
</body>
</html>
Copy the code

Then modify the nginx.conf folder:

location / {
	return 503;
}

error_page 503 /503.html;
location = /503.html {
	root html;
}
Copy the code

Note: Make sure to restart nginx after modifying the nginx.conf file. Otherwise, the configuration will not take effect.

The Nginx restart command looks like this:

./nginx -s reload
Copy the code

The page displays 503.html, but the image is not displayed:

We need to add the following configuration to exclude static resources:

location ~ .*\.(png|ico)? $ { root html; }Copy the code

Note: Make sure to restart nginx after modifying the nginx.conf file. Otherwise, the configuration will not take effect.

The 503.html page is displayed as normal (it has only one image) :

The configuration is as follows:

server {
        listen       80;
        server_name  localhost;
        location / {
            return 503;
        }
        
        location ~ .*\.(png|ico)?$ {
            root html;
        }
        
        error_page 503 /503.html;
        location = /503.html {
            root html;
        }
}        
Copy the code

3.4 close the Nginx

The command to shut down Nginx is as follows:

./nginx -s stop
Copy the code

3.5 Tips (Hiding the Version Number)

By default, the client can see the version number of the nginx server:

But in general, we hide this by adding the following configuration:

http {
	server_tokens off;
}
Copy the code

Then you’ll notice that the client no longer displays the version number:

4. Legacy issues

Up to now, the only remaining problem is how to add retry-after to Response Headers when displaying 503 page. We have tried many solutions, but none of them worked, so it is temporarily shelving. If you know, please post the configuration in the comment section, thanks!

4.1 Adding Retry-After(2020-08-07 update)

I went to the company this morning and saw readers’ comments. I tried adding retry-after successfully (I failed before because I did not add always). I would like to express my thanks for this:

The correct configuration is as follows:

error_page 503 /503.html;
location = /503.html {
	root html;
	add_header Retry-After "Fri, 7 Aug 2020 23:59:00 GMT" always;
}
Copy the code

The effect is as follows:

5. To summarize

Website updates and maintenance, elegantly notifying users, will definitely enhance the user experience, and look professional. It’s not difficult to implement, but not everyone wants to do it.

Based on this question, this article explains the detailed steps to install Nginx, the commands to start, restart, and close Nginx, how to customize the 503 page, and tips to hide the Nginx version number.

If possible, will you customize the 503 page when you post it? It will definitely make you look professional, so go for it!

6. Reference

Nginx configuration does not display version numbers

Nginx installation in Linux

Note: If you think this blog has any mistakes or better suggestions, please leave a comment, I will follow up and correct the blog content in time!

This article continues to be updated, please pay attention to the wechat public number “Shencheng Strangers” for the first time to read!