「Nginx的思考:巧妙地通知用户网站正在进行升级维护的艺术」
2020-07-30早上到公司后,习惯性的打开掘金首页,想看下有没有自己感兴趣的文章,却意外的看到下面这样的惊喜:
对的,我升级Lv3了,这是对自己坚持写作1年多的认可与鼓励,难掩心中的开心,我就去发了个掘金沸点,纪念下这个时刻,然后就继续工作了。
中午12点出去吃完饭回到座位后,再次打开掘金首页,哎呀,访问不了了,提示如下:
此时访问掘金的所有文章,都会看到上面这样的页面,告知你站点要进行维护升级了,很贴心有没有,而且这个界面很好看,我很喜欢。
2. 思考看到这个页面,你会有什么样的感触?
也许你觉得这很简单,也许你觉得这很Low,都2020了,服务竟然可以停这么久,放在互联网公司,停一分钟都不得了。
抛开互联网公司不说,仅就掘金这次升级维护来说,我觉得很专业,为什么呢?
因为很多网站升级,根本不提示用户的好吗,还跟你专门做个页面,想得美,我就不信你没见过下面这样的:
记得我参加第1份工作时,有1次晚上发布时,我注意到发布的时间内,我们的域名访问时,跳到了类似于掘金这样的维护通知页面,当时我觉得,这个体验好,这样用户就知道网站为啥不可用了。
但我后面的工作中,我发现并没有人这么做,我也提议过,但有的人没意识,有的人有意识,但觉得这样做没有必要,反正运营知道我们在发布,总之,这个看似简单专业的事情,真的很少有人去做。
但就我个人而言,我觉得这样做是正确的,特别是升级维护期间无法一一告知用户的,这么做真的很专业,用户一看就知道,原来这段时间在维护啊,那我等维护好了继续访问,都说用户体验,这就是用户体验呢。
好了,言归正传,接下来就分享下,如何像掘金这样优雅地进行网站升级维护?
3. 实现在掘金网站不能访问期间,用Chrome浏览器看下网络请求,发现所有的请求都返回了503的状态码,如下所示:
503是一个HTTP状态码,代表Service Unavailable(服务不可用),不过这个状况是临时的,并且将在一段时间以后恢复,如果能够预计延迟时间,那么响应中可以包含一个Retry-After头用以标明这个延迟时间。
比如,本次掘金升级维护,它的预计恢复时间是2020-07-31号早上08:00,所以它的Retry-After是给了这个消息的,如下图所示:
从上图中Server: nginx,我们可以得知,服务器端使用了Nginx,那么实现的第1步,肯定是要安装Nginx了。
3.1 安装Nginx
首先,去官网下载下Nginx的Linux安装包,下载地址:nginx.org/en/download…,我下载的版本是1.18.0:
然后将下载好的文件上传到Linux服务器,我这里上传的目录是/usr/local,然后切换到/usr/local目录,使用如下命令进行解压:
tar -zxvf nginx-1.18.0.tar.gz
然后切换到nginx-1.18.0目录,为避免后面make命令执行失败,需要先执行以下命令(很重要,不然容易踩坑):
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
然后执行命令:
./configure
然后执行make命令进行编译:
最后执行make install命令安装:
执行成功后,会发现自动创建了nginx文件夹,如下所示:
3.2 启动Nginx
切换到/user/local/nginx/sbin目录,执行如下命令启动Nginx:
./nginx
然后在浏览器里输入地址进行测试,如果看到如下所示的界面,说明Nginx安装成功:
注意事项:
因为Nginx默认监听的端口号是80,如果你和我一样使用的是阿里云服务器,则需要在安全组规则中添加下端口配置,不然访问不了:
3.3 配置503页面
这里简单制作个503.html页面(实际使用时可以制作好看一些),并放在Nginx的html目录下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网站维护通知</title>
</head>
<body>
<img src="/images/snipaste_20200730_194851.png"/>
</body>
</html>
然后修改下conf文件夹下的nginx.conf:
location / {
return 503;
}
error_page 503 /503.html;
location = /503.html {
root html;
}
注意事项:每次修改完nginx.conf文件后,一定要记得重启Nginx,不然配置不生效。
Nginx重启命令如下所示:
./nginx -s reload
此时再次在浏览器里访问,发现页面展示的是503.html,但是图片显示不出来:
很明显,是因为访问图片等静态资源也返回503了,因此需要添加以下配置排除下静态资源:
location ~ .*\.(png|ico)?$ {
root html;
}
注意事项:每次修改完nginx.conf文件后,一定要记得重启Nginx,不然配置不生效。
此时再次在浏览器里访问,503.html页面显示正常(这里偷懒了,页面只有1张图片):
完成配置如下:
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 关闭Nginx
关闭Nginx的命令如下所示:
./nginx -s stop
3.5 小技巧(隐藏版本号)
按照默认的配置,客户端是能看到服务端nginx的版本号的:
但一般情况下,我们都会将其隐藏,可以通过添加以下配置来实现:
http {
server_tokens off;
}
然后会发现,客户端不再显示版本号了:
4. 遗留问题
截止目前,唯一遗留的问题是如何在显示503页面时,在Response Headers中添加Retry-After,试了很多方案,都不行,所以暂时搁置,有知道的读者,欢迎在评论区贴下配置,表示感谢!
4.1 添加Retry-After(2020-08-07更新)
今天早上到公司,看到读者的评论,试了下,添加Retry-After成功(之前失败,是因为没有添加always),在此表示感谢:
正确的配置如下:
error_page 503 /503.html;
location = /503.html {
root html;
add_header Retry-After "Fri, 7 Aug 2020 23:59:00 GMT" always;
}
效果如下所示:
5. 总结
网站升级维护,优雅的通知用户,绝对能提升用户体验,也显得很专业,实现起来也不算难,只是不是所有人都愿意这么做。
基于此问题,本篇讲解了安装Nginx的详细步骤,启动、重启、关闭Nginx的命令,自定义503页面的方法,以及隐藏Nginx版本号的小技巧。
如果条件允许,你是否会在发版时,自定义503页面呢?绝对会显得你很专业,不妨试试吧!
推荐阅读
-
「Nginx的思考:巧妙地通知用户网站正在进行升级维护的艺术」
-
Adobe国际认证中文官方网站】Adobe中国摄影计划,免费安装正版激活--Adobe Creative Cloud中国摄影计划。与此同时,Adobe宣布天猫为Adobe Creative Cloud中国摄影计划的电商战略合作伙伴,并将与其合作上线Adobe天猫官方旗舰店。 此举无疑一方面扩大了Adobe在中国的影响力,另一方面也有助于国内用户更好地培养正版软件意识,推动Adobe软件在中国的正版化进程。 网络异常,图片无法显示 ||网络异常 Adobe Creative Cloud中国摄影计划包括Photoshop和Lightroom Classic两大桌面创意工具,以及iOS版Photoshop Express。 其中,Adobe Lightroom Classic和Adobe Photoshop作为两款常用的图像处理软件,对于那些玩摄影、后期修图的创意设计人群无疑有着巨大的帮助,而LR+PS套装对于摄影领域用户的重要性自不必说,正版产品的性能实时更新也可以放心!体验最新功能,对于新镜头(补偿)和机身(RAW 读取)都能第一时间适应。不信你看: Photoshop 图像合成 裁剪、移除对象、润饰合成照片、玩转色彩和特效,创建精美图片和艺术品! Lightroom Classic 照片编辑 轻松批量管理和编辑照片,内置专业创意控件和摄影师预设,让你的照片大放异彩。 手机 PS 便捷编辑 Photoshop Express 支持多种滤镜、贴纸,手机即可完成抠图、除雾等任务 人工智能编辑工具 神经滤镜、快速点击选区、自动选择主题等人工智能功能让图像编辑更轻松 创意画笔内容识别 定制艺术画笔工具,实现个性化效果;内容识别填充,智能去除无用物体。 Adobe Creative Cloud 中国摄影计划的推出,为中国的专业摄影师、摄影爱好者、后期修图和其他创意设计人员带来了全方位的内容和体验。 网络异常,图片无法显示 ||网络异常 当然,不可否认的是,"由于盗版软件缺乏开发、维护和升级成本,销售价格远低于正版软件。再加上很多普通人并不需要使用正版软件的复杂功能,版权观念较淡,还是有大量的创意设计人员会选择盗版软件"。 但事实上,当所有的软件都不再是单一的软件,而是变成一种服务时,单机版盗版的存在就逐渐成为鸡肋。因为有太多的服务让你即使是所谓的 "完美破解",也无法享受,Adobe Cloud 就是一个很好的例子,所谓的完美破解,你只能使用 "Adobe "的一半,对于更精彩的 "云",只能望云兴叹。更何况,越来越多的设计工具从免费走向付费,越来越多的设计师和企业已经接受了付费使用的模式。 其次,对于互联网时代的企业数字化转型而言,数字化合规至关重要。21年来,使用盗版PS和未经授权的方正字体被指侵权的事情闹得沸沸扬扬,虽然新闻真假难辨,但也给使用盗版工具的用户敲响了警钟。 付费使用正版工具,可以更放心地进行设计,不用担心版权风险!