• 跳至主要導覽
  • 跳至主要內容
  • 跳至主要資訊欄
Office 指南

Office 指南

辦公室工作實用教學

  • Excel
  • Word
  • PowerPoint
  • Windows
  • PowerShell
  • R

Nginx 網頁伺服器顯示「網站維護中」訊息設定教學

介紹如何讓 Nginx 網頁伺服器快速切換為維護模式,顯示「網站維護中」訊息頁面。

自訂 HTTP 503 網站維護訊息網頁

HTTP 503 代表的是目前伺服器暫時不能處理連線的請求(Service Unavailable),如果網站處於維護狀態(或是出現某些問題),暫時不對外開放的時候,就適合傳回 HTTP 503 這一個狀態碼,告知使用者網站正在維護中,請稍後再來。

在 Nginx 伺服器中,我們可以自訂 HTTP 503 的頁面,讓使用者更清楚伺服器的維護狀態,例如告知預計開放時間等。

首先建立一張 html 網頁,內容就是要告知使用者的網站維護資訊,類似像這樣:

<!doctype html>
<html itemscope="" itemtype="http://schema.org/WebPage" lang="zh-TW">
<head>
<meta charset="UTF-8">
<title>網站維護中</title>
<style>
body {
	text-align: center;
	padding-top: 50px;
}
</style>
</head>
<body>
<h1 style="color: #CC0000;">OfficeGuide 網站維護中</h1>
<h2>預計開放時間:2020/06/24 12:00 PM</h2>
</body>
</html>

將這張 html 網頁儲存為 under_construction.html,然後在網頁目錄中找個適合的位置放置,因為只有一個檔案,通常就放在網頁的根目錄即可,例如 /var/www/html 目錄中。

接著修改 Nginx 伺服器的設定檔,在 server 區塊中自訂 HTTP 503 頁面,同時設定自動判斷 under_construction.html 這一個檔案是否存在,如果發現該檔案的時候,就自動傳回 HTTP 503:

server {
    # ...
    
    # 若 under_construction.html 存在,則傳回 HTTP 503
    if (-f $document_root/under_construction.html) {
        return 503;
    }
	
    # 將原本的 503 拿掉
    #error_page 500 502 503 504 /50x.html;
    #    location = /50x.html {
    #}
    error_page 500 502 504 /50x.html;
        location = /50x.html {
    }

    # 自訂 HTTP 503 頁面
    error_page 503 @maintenance;
    location @maintenance {
        rewrite ^(.*)$ /under_construction.html break;
    }
}

修改完成之後,檢查 Nginx 設定檔語法是否正確,然後重新啟動 Nginx 伺服器:

# 檢查 Nginx 設定檔是否正確
sudo nginx -t

# 重新啟動 Nginx 伺服器
systemctl restart nginx

在這樣的設定之下,只要 /under_construction.html 這一個網頁檔案存在,伺服器就會自動傳回 HTTP 503,並顯示這一張網頁的內容,而當伺服器要正常上線服務時,只要把 /under_construction.html 這個網頁檔案改成其他名稱(或移至別處),就可以讓 Nginx 伺服器恢復正常的運作。

開放內部開發者瀏覽

如果希望網站在處於維護狀態時,內部的開發者還是可以正常瀏覽網頁內容,可以將設定改成以下這種寫法:

server {
    # ...

    # 檢查是否為內部開發者 IP
    set $internalIP 0;
    if ($remote_addr = "12.34.56.78") { # 第一個開發者
        set $internalIP 1;
    }
    if ($remote_addr = "21.43.65.87") { # 第二個開發者
        set $internalIP 1;
    }

    # 檢查 under_construction.html 是否存在
    if (-f $document_root/under_construction.html) {
        # 結合 under_construction.html 與 IP 資訊
        set $underConstruction "${internalIP}1";
    }

    # 若 under_construction.html 存在,且來源 IP 並非內部開發者,
    # 則傳回 HTTP 503
    if ($underConstruction = "01") {
        return 503;
    }

    # 將原本的 503 拿掉
    #error_page 500 502 503 504 /50x.html;
    #    location = /50x.html {
    #}
    error_page 500 502 504 /50x.html;
        location = /50x.html {
    }

    # 自訂 HTTP 503 頁面
    error_page 503 @maintenance;
    location @maintenance {
        rewrite ^(.*)$ /under_construction.html break;
    }
}

在這個設定中,會逐一檢查所有開發者的 IP,若發現是開發者的 IP,就會顯示正常的網頁,而普通外部的使用者則會看到 HTTP 503 頁面。

維護中插圖

以下有兩張網頁維護中的插圖,很適合用於 HTTP 503 頁面,不過使用前要先用 DATA URI 的方式,先將圖片轉為 base64 編碼後再嵌入網頁中。

維護中(Under Construction)
維護中(Under Construction)
維護中(Under Construction)
維護中(Under Construction)

參考資料:BlueHost DevCloud、acmeextension.com

分類:Linux

讀者互動方式

發佈留言 取消回覆

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

主要資訊欄

搜尋

近期文章

  • Linux 檢查、測試 CPU AES-NI 硬體加速加密指令集教學
  • CentOS Linux 7.9 自行編譯、安裝 OpenSSH 9.0p1 伺服器教學與範例
  • Python 使用 zipfile 模組壓縮、解壓縮 ZIP 檔案教學與範例
  • Python 以 LINE Notify 自動傳送即時訊息、圖片教學與範例
  • Linux 使用 Prometheus 與 Grafana 監控伺服器狀態、發送告警 Email 簡訊教學與範例
  • Linux 設定 pam_tty_audit 記錄 SSH 使用者操作指令教學與範例
  • Linux 封鎖、解鎖登入失敗次數過多的帳號 pam_faillock 教學與範例
  • Python 使用 pytube 自動下載 YouTube 影片教學與範例

推薦網站

  • Udemy 線上教學課程
  • Coursera 線上教學課程

關注本站

  • 電子郵件
  • Facebook

公益

  • 家扶基金會
  • 台灣世界展望會
  • Yahoo 奇摩公益
  • igiving 公益網
  • 兒福聯盟

Copyright © 2021 · Office Guide