【深度思考】如何優雅告知使用者，網站正在升級維護？

申城異鄉人發表於2020-08-06

網站

1. 前言

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安裝包，下載地址：http://nginx.org/en/download.html，我下載的版本是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;
        }
}