原创

通过Nginx实现一个简单的网站维护通知页面

温馨提示：
本文最后更新于 2018年08月31日，已超过 2,274 天没有更新。若文章内的图片失效（无法正常加载），请留言反馈或直接联系我。

在网站发版时，总会有那么一小段时间服务是访问不通的，一般用户看到的都会是一个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文件的目录

正文到此结束
所属分类：后端编程
热门推荐
相关文章
关于我
微信公众号
张亚东博客
一个程序员的个人博客，心之所向，无所不能
本文目录
    标签云
    Linux Java Spring Spring Boot Maven Docker IDE uzip war Shell Flyat chrome 自动化测试 Git Task 爬虫 MySQL JS 正则 Tomcat FindBugs 版本控制 Nginx Apache 其他 阿里云优惠券 微信小程序 网易云音乐 阿里云服务器 阿里云优惠活动 ztree Cordova Android 开源 第三方登录 安全 websocket OneBlog 码一码 微信 yuicompressor 博客迁移 开源 hunter 开源软件 JustAuth
    近期评论
    网站信息
    • 文章总数：148 篇
    • 标签总数：46 个
    • 分类总数：11 个
    • 留言数量：964 条
    • 在线人数：1人
    • 运行天数：3,084天
    • 最后更新：2021年08月13日17点
    • 系统版本：v2.3.4