通過Nginx實現一個簡單的網站維護通知頁面


原文:https://www.zhyd.me/article/106

 

在網站發版時,總會有那么一小段時間服務是訪問不通的,一般用戶看到的都會是一個502的錯誤頁面
file

那么可以通過nginx實現一個簡單的通知頁面,比如:
file

實現這個功能,只需要兩步:
第一:編寫“upgrading.html

例如本站的“upgrading.html

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>張亞東博客</title> <link href="https://static.zhyd.me/static/img/favicon.ico" rel="shortcut icon" type="image/x-icon"> <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container"> <div class="row"> <div class="col col-md-12 text-center"> <div class="alert alert-success alert-dismissable" style="margin-top: 20px"> <button type="button" class="close" data-dismiss="alert">&times;</button> <strong>網站正在維護!</strong> 請稍等一會,先聽聽歌吧~~ </div> </div> </div> <div class="row"> <div class="col col-md-12 text-center"> <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=450 src="https://music.163.com/outchain/player?type=0&id=879855523&auto=1&height=430"></iframe> </div> </div> </div> </body> </html> 

第二:修改nginx配置文件

在server中增加如下配置:

error_page 502 upgrading.html; error_page 503 upgrading.html; error_page 504 upgrading.html; location = /upgrading.html { root /usr/share/nginx/html; } 

完整配置的格式如下:

server {
    listen  80; server_name xxx; error_page 502 upgrading.html; error_page 503 upgrading.html; error_page 504 upgrading.html; location = /upgrading.html { root /usr/share/nginx/html; } location / { // ... 省略 } } 

這段代碼的意思就是:當系統返回502、503或者504響應時,跳轉到 upgrading.html頁面。其中root 指向的是upgrading.html文件的目錄


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM