1. 前言
2020-07-30早上到公司后，習(xí)慣性的打開掘金首頁，想看下有沒有自己感興趣的文章，卻意外的看到下面這樣的驚喜：
對(duì)的，我升級(jí)Lv3了，這是對(duì)自己堅(jiān)持寫作1年多的認(rèn)可與鼓勵(lì)，難掩心中的開心，我就去發(fā)了個(gè)掘金沸點(diǎn)，紀(jì)念下這個(gè)時(shí)刻，然后就繼續(xù)工作了。
中午12點(diǎn)出去吃完飯回到座位后，再次打開掘金首頁，哎呀，訪問不了了，提示如下：
此時(shí)訪問掘金的所有文章，都會(huì)看到上面這樣的頁面，告知你站點(diǎn)要進(jìn)行維護(hù)升級(jí)了，很貼心有沒有，而且這個(gè)界面很好看，我很喜歡。
2. 思考
看到這個(gè)頁面，你會(huì)有什么樣的感觸？
也許你覺得這很簡(jiǎn)單，也許你覺得這很Low，都2020了，服務(wù)竟然可以停這么久，放在互聯(lián)網(wǎng)公司，停一分鐘都不得了。
拋開互聯(lián)網(wǎng)公司不說，僅就掘金這次升級(jí)維護(hù)來說，我覺得很專業(yè)，為什么呢？
因?yàn)楹芏嗑W(wǎng)站升級(jí)，根本不提示用戶的好嗎，還跟你專門做個(gè)頁面，想得美，我就不信你沒見過下面這樣的：
記得我參加第1份工作時(shí)，有1次晚上發(fā)布時(shí)，我注意到發(fā)布的時(shí)間內(nèi)，我們的域名訪問時(shí)，跳到了類似于掘金這樣的維護(hù)通知頁面，當(dāng)時(shí)我覺得，這個(gè)體驗(yàn)好，這樣用戶就知道網(wǎng)站為啥不可用了。
但我后面的工作中，我發(fā)現(xiàn)并沒有人這么做，我也提議過，但有的人沒意識(shí)，有的人有意識(shí)，但覺得這樣做沒有必要，反正運(yùn)營知道我們?cè)诎l(fā)布，總之，這個(gè)看似簡(jiǎn)單專業(yè)的事情，真的很少有人去做。
但就我個(gè)人而言，我覺得這樣做是正確的，特別是升級(jí)維護(hù)期間無法一一告知用戶的，這么做真的很專業(yè)，用戶一看就知道，原來這段時(shí)間在維護(hù)啊，那我等維護(hù)好了繼續(xù)訪問，都說用戶體驗(yàn)，這就是用戶體驗(yàn)?zāi)亍?/p>
好了，言歸正傳，接下來就分享下，如何像掘金這樣優(yōu)雅地進(jìn)行網(wǎng)站升級(jí)維護(hù)？
3. 實(shí)現(xiàn)
在掘金網(wǎng)站不能訪問期間，用Chrome瀏覽器看下網(wǎng)絡(luò)請(qǐng)求，發(fā)現(xiàn)所有的請(qǐng)求都返回了503的狀態(tài)碼，如下所示：
503是一個(gè)HTTP狀態(tài)碼，代表Service Unavailable（服務(wù)不可用），不過這個(gè)狀況是臨時(shí)的，并且將在一段時(shí)間以后恢復(fù)，如果能夠預(yù)計(jì)延遲時(shí)間，那么響應(yīng)中可以包含一個(gè)Retry-After頭用以標(biāo)明這個(gè)延遲時(shí)間。
比如，本次掘金升級(jí)維護(hù)，它的預(yù)計(jì)恢復(fù)時(shí)間是2020-07-31號(hào)早上08:00，所以它的Retry-After是給了這個(gè)消息的，如下圖所示：
從上圖中Server: Nginx，我們可以得知，服務(wù)器端使用了Nginx，那么實(shí)現(xiàn)的第1步，肯定是要安裝Nginx了。
3.1 安裝Nginx
首先，去官網(wǎng)下載下Nginx的linux安裝包，下載地址：nginx.org/en/download…，我下載的版本是1.18.0：
然后將下載好的文件上傳到Linux服務(wù)器，我這里上傳的目錄是/usr/local，然后切換到/usr/local目錄，使用如下命令進(jìn)行解壓：
tar -zxvf nginx-1.18.0.tar.gz
然后切換到nginx-1.18.0目錄，為避免后面make命令執(zhí)行失敗，需要先執(zhí)行以下命令（很重要，不然容易踩坑）：
yum install gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel
然后執(zhí)行命令：
./configure
然后執(zhí)行make命令進(jìn)行編譯：
最后執(zhí)行make install命令安裝：
執(zhí)行成功后，會(huì)發(fā)現(xiàn)自動(dòng)創(chuàng)建了nginx文件夾，如下所示：
3.2 啟動(dòng)Nginx
切換到/user/local/nginx/sbin目錄，執(zhí)行如下命令啟動(dòng)Nginx：
./nginx
然后在瀏覽器里輸入地址進(jìn)行測(cè)試，如果看到如下所示的界面，說明Nginx安裝成功：
注意事項(xiàng)：
因?yàn)镹ginx默認(rèn)監(jiān)聽的端口號(hào)是80，如果你和我一樣使用的是阿里云服務(wù)器，則需要在安全組規(guī)則中添加下端口配置，不然訪問不了：
3.3 配置503頁面
這里簡(jiǎn)單制作個(gè)503.html頁面（實(shí)際使用時(shí)可以制作好看一些），并放在Nginx的html目錄下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>網(wǎng)站維護(hù)通知</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;
}
注意事項(xiàng)：每次修改完nginx.conf文件后，一定要記得重啟Nginx，不然配置不生效。
Nginx重啟命令如下所示：
./nginx -s reload
此時(shí)再次在瀏覽器里訪問，發(fā)現(xiàn)頁面展示的是503.html，但是圖片顯示不出來：
很明顯，是因?yàn)樵L問圖片等靜態(tài)資源也返回503了，因此需要添加以下配置排除下靜態(tài)資源：
location ~ .*.(png|ico)?$ {
root html;
}
注意事項(xiàng)：每次修改完nginx.conf文件后，一定要記得重啟Nginx，不然配置不生效。
此時(shí)再次在瀏覽器里訪問，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 關(guān)閉Nginx
關(guān)閉Nginx的命令如下所示：
./nginx -s stop
3.5 小技巧（隱藏版本號(hào)）
按照默認(rèn)的配置，客戶端是能看到服務(wù)端nginx的版本號(hào)的：
但一般情況下，我們都會(huì)將其隱藏，可以通過添加以下配置來實(shí)現(xiàn)：
http {
server_tokens off;
}
然后會(huì)發(fā)現(xiàn)，客戶端不再顯示版本號(hào)了：
4. 遺留問題
截止目前，唯一遺留的問題是如何在顯示503頁面時(shí)，在Response Headers中添加Retry-After，試了很多方案，都不行，所以暫時(shí)擱置，有知道的讀者，歡迎在評(píng)論區(qū)貼下配置，表示感謝！
4.1 添加Retry-After(2020-08-07更新)
今天早上到公司，看到讀者的評(píng)論，試了下，添加Retry-After成功（之前失敗，是因?yàn)闆]有添加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. 總結(jié)
網(wǎng)站升級(jí)維護(hù)，優(yōu)雅的通知用戶，絕對(duì)能提升用戶體驗(yàn)，也顯得很專業(yè)，實(shí)現(xiàn)起來也不算難，只是不是所有人都愿意這么做。
基于此問題，本篇講解了安裝Nginx的詳細(xì)步驟，啟動(dòng)、重啟、關(guān)閉Nginx的命令，自定義503頁面的方法，以及隱藏Nginx版本號(hào)的小技巧。
如果條件允許，你是否會(huì)在發(fā)版時(shí)，自定義503頁面呢？絕對(duì)會(huì)顯得你很專業(yè)，不妨試試吧！
我作者：申城異鄉(xiāng)人
鏈接：https://juejin.im/post/6857673247819989000
來源：掘金
