1 Introduction
2020-07-30 After arriving at the company in the morning, I habitually opened the Nuggets homepage to see if there are any articles I am interested in, but unexpectedly saw the following surprise:
Yes, I upgraded to Lv3. This is a recognition and encouragement for my persistence in writing for more than a year. It is hard to hide the happiness in my heart. I went to find a nugget boiling point to commemorate this moment, and then continue to work.
After going out for dinner at 12 noon and returning to the seat, I opened the Nuggets homepage again, oops, I can't access it, the prompt is as follows:
At this time, when you visit all the articles of Nuggets, you will see a page like the above, telling you that the site is going to be maintained and upgraded. It is very intimate, and this interface is very beautiful, I like it very much.
2. Thinking
How do you feel when you see this page?
Maybe you think it’s very simple, maybe you think it’s very low, it’s already 2020, and the service can be stopped for so long. If you put it on the Internet company, it can stop for a minute.
Regardless of Internet companies, I think it is very professional for the Nuggets upgrade and maintenance. Why?
Because many websites are upgraded, they don’t prompt users at all, okay, I also made a page with you to make it beautiful, I don’t believe you have never seen the following:
I remember that when I participated in my first job, there was one evening release. I noticed that during the release time, when our domain name was accessed, I jumped to a maintenance notification page similar to Nuggets. At that time, I felt that this experience was good. This way the user knows why the website is unavailable.
But in my later work, I found that no one did this, and I also suggested it, but some people were not conscious, and some were conscious, but felt that it was unnecessary to do so. Anyway, the operation knows that we are publishing. In short, look at it. Very few people do things that seem to be simple and professional.
But personally, I think this is the right thing to do, especially when users cannot be notified one by one during the upgrade and maintenance period. This is really professional. Users will know at first glance that they are under maintenance during this period. Then I After the maintenance is completed, continue to visit, and all talk about user experience, this is user experience.
Okay, let’s get back to business. Next, let’s share, how to upgrade and maintain the website gracefully like Nuggets?
3. Realization
During the period when the Nuggets website was unavailable, I used the Chrome browser to look at the network request and found that all the requests returned the 503status code, as shown below: it
503is a HTTPstatus code, which means Service Unavailable(service is unavailable), but this situation is temporary , And will be restored after a period of time. If the delay time can be estimated, the response can include a Retry-Afterheader to indicate the delay time.
For example, in this Nuggets upgrade and maintenance, its expected recovery time is 08:00 in the morning of 2020-07-31, so it Retry-Aftergave this news, as shown in the following figure:
From the above figure Server: nginx, we can know that Nginx is used on the server side, so the first step of the implementation must be to install Nginx.
3.1 Install Nginx
First, go to the official website to download the Nginx Linux installation package, the download address: http://nginx.org/en/download.html , the version I downloaded is 1.18.0:
Then upload the downloaded file to the Linux server, the directory I uploaded here is /usr/local, then switch to the /usr/local directory, and use the following command to decompress:
tar -zxvf nginx-1.18.0.tar.gz
Then switch to the nginx-1.18.0 directory. In order to avoid the subsequent make command execution failure, you need to execute the following command first ( it is very important, otherwise it is easy to step on the pit ):
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
Then execute the command:
./configure
Then execute the make command to compile:
Finally, execute the make install command to install:
After the execution is successful, you will find that the nginx folder is automatically created, as shown below:
3.2 Start Nginx
Switch to the /user/local/nginx/sbin directory and execute the following command to start Nginx:
./nginx
Then enter the address in the browser to test. If you see the interface as shown below, it means that Nginx is installed successfully:
Precautions:
Because the default listening port number of Nginx is 80, if you are using Alibaba Cloud server like me, you need to add the port configuration in the security group rules, otherwise you will not be able to access:
3.3 Configure 503 page
Here is a simple creation of a 503.html page (it can be made to look better in actual use) and place it in the html directory of Nginx:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站维护通知</title>
</head>
<body>
<img src="/images/snipaste_20200730_194851.png"/>
</body>
</html>
Then modify the nginx.conf under the conf folder:
location / {
return 503;
}
error_page 503 /503.html;
location = /503.html {
root html;
}
Note: Every time you modify the nginx.conf file, you must remember to restart Nginx, otherwise the configuration will not take effect.
The Nginx restart command is as follows:
./nginx -s reload
At this time, I visited in the browser again and found that the page displayed 503.html, but the picture could not be displayed:
Obviously, because access to static resources such as pictures also returns 503, so you need to add the following configuration to exclude static resources:
location ~ .*\.(png|ico)?$ {
root html;
}
Note: Every time you modify the nginx.conf file, you must remember to restart Nginx, otherwise the configuration will not take effect.
Visit in the browser again at this time, the 503.html page is displayed normally (I'm lazy here, the page only has 1 picture):
Complete the configuration 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;
}
}
3.4 Close Nginx
The command to close Nginx is as follows:
./nginx -s stop
3.5 Tips (Hide the version number)
According to the default configuration, the client can see the version number of the server nginx:
But in general, we will hide it, which can be achieved by adding the following configuration:
http {
server_tokens off;
}
Then you will find that the client no longer displays the version number:
4. Legacy issues
So far, the only remaining problem is how to add Retry-After in Response Headers when displaying the 503 page. I tried many solutions, but it didn’t work. So temporarily put it aside. Readers who know, welcome to post the configuration in the comment area. thank!
4.1 Add Retry-After (updated on 2020-08-07)
I went to the company this morning and saw the reader's comments. I tried it and added Retry-After successfully (it failed because it didn't add always). Thank you:
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;
}
The effect is as follows:
5. Summary
Website upgrade and maintenance, elegant notification to users, can definitely improve user experience, and it is also very professional, it is not difficult to implement, but not everyone is willing to do this.
Based on this problem, this article explains the detailed steps of installing Nginx, the commands to start, restart, and close Nginx, the method of customizing the 503 page, and the tips for hiding the Nginx version number.
If conditions permit, will you customize the 503 page when it is released? You will definitely appear to be very professional, so try it!
6. Reference
nginx configuration does not display the version number
Installation of Nginx in Linux
Note: If you feel that this blog has any errors or better suggestions, please leave a message, I will follow up and correct the blog content in time!
The article is continuously updated, welcome to follow the WeChat public account "Shencheng Yixiangren" to read it for the first time!