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