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

在网站发版时，总会有那么一小段时间服务是访问不通的，一般用户看到的都会是一个502的错误页面

那么可以通过nginx实现一个简单的通知页面，比如：

实现这个功能，只需要两步：
第一：编写“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文件的目录

通过Nginx实现一个简单的网站维护通知页面的更多相关文章

  1. 利用angular4和nodejs-express构建一个简单的网站（五）—用户的注册和登录-HttpClient

    上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块.启动应用后,初始界面应该是这样的: 用户管理模块(users ...

  2. HTTP lab01 做一个简单的测试用 web页面

      做一个简单的测试用 web页面     1.安装httpd服务   yum install httpd   安装完httpd服务后,系统就自动生成了/var/www/html目录     创建一个 ...

  3. 初始nginx（启动运行） 使用nginx做一个简单的静态资源服务器

    第一次接触nginx的时候,那时候公司还是用的一些不知名的小技术,后来公司发展问题,重新招了人,然后接触到nginx,公司 使用nginx用来做代理服务器,所有请求 都先经过nginx服务器,然后交由 ...

  4. Flutter随笔（二）——使用Flutter Web + Docker + Nginx打造一个简单的Web项目

    前言 Flutter作为一个跨平台UI框架,功能十分强大,仅用一套代码便能编译出Android.iOS.Web.windows.macOS.Windows.Linux等平台上的应用,各平台应用体验高度 ...

  5. 使用nginx搭建一个简单的负载均衡

    在windows系统上使用IIS模拟出两个不同服务器的站点: 然后再NGINX使用轮询机制配置两个服务器以及虚拟服务器的端口: 需要注意的是,配置虚拟代理域名的话需要找到windowsC盘下的host ...

  6. 利用angular4和nodejs-express构建一个简单的网站（一）——构建前后端开发环境

    学习了一段时间的angular4知识,结合以前自学的nodejs-express后端框架知识,做了一个利用angular4作为前端,node-express作为后端服务器的网站.这个网站的功能很简单, ...

  7. 一个简单的网站web项目的详解

    有不对的术语,或者不好理解的部分,欢迎大家批评指正,谢谢大家! 近期做的网站web项目,实现登录功能,查询功能.首先把这个项目分为几个模块来处理,当前用户模块,历史用户模块,历史记录模块,数据库模块, ...

  8. 记录使用Redis和nginx 实现一个简单的负载均衡（FB）

    这两年在博客园看了不少大牛的分享,一直打算能写点什么东西. 之前偶然看见一个利用Redis 当作 Session数据宿主的demo,出处我已经找不到了.后来没事看了看nginx相关的东西.其中负载均衡 ...

  9. 利用angular4和nodejs-express构建一个简单的网站（十）—好友模块

    上一章讲解了用户登录的相关代码.用户登录成功后,就会进入好友模块,在好友模块中会根据不同的用户ID显示相应的好友列表,点击好友列表中的单个好友就会进入编辑单个好友页面,对好友信息进行编辑.点击列表页面 ...

随机推荐

  1. [LeetCode] 531. Lonely Pixel I 孤独的像素 I

    Given a picture consisting of black and white pixels, find the number of black lonely pixels. The pi ...

  2. GitLab - 安装并启动GitLab

    1 - GitLab安装 1.1 信息确认 [Anliven@node102 ~]$ uname -a Linux node102 3.10.0-957.el7.x86_64 #1 SMP Thu N ...

  3. 可扩展标记语言XML之一：XML的概念、作用与示例

    哈喽大家好啊,乐字节小乐又来给大家分享Java技术文章了.上次已经讲完了Java多线程相关知识(可以看我博客文章), 这次文章将讲述可扩展标记语言XML 一. 标记语言 标记语言,是一种将文本(Tex ...

  4. vm采用NAT方式连接时，设置静态ip

    一,共享无线连接或本地连接,给VMnet8. 在网络配置中,选着无线连接,右键属性,共享. 这里默认给虚拟网卡VMnet8,分配了IP:192.168.137.1. 二,在VMware中配置VMnet ...

  5. hdu 2841 题解

    题目 题意:就是问在一个$ n* m $的矩阵中站在 $ (0,0) $ 能看到几个整数点. 很明显如果有两个平行向量 $ \vec{a}=(x_1,y_1) $ ,$ \vec{b}=(x_2,y_ ...

  6. Huawei重新开启隐藏桌面功能

    在HUAWEI的EMUI系统7.0的时候我们都能发现桌面上靠手指操作的隐藏桌面的功能,像这样: 但是在之后的EMUI8.0.9.0,之后就没有办法用了.后来问了官方,这个功能确实是被去掉了.个人也很不 ...

  7. 小程序day1-day3随笔

    0==小程序的结构和组件 1==小程序常用组件:text文本属性 3==小程序UI组件view的属性hover 鼠标点击出现的效果hover 4==小程序ui组件button按钮组件的属性 5==小程 ...

  8. List集合String字符串按照汉语拼音排序

    public static void main(String[] args) { List<Map<String, Object>> mapList = new ArrayLi ...

  9. LOJ3119 CTS2019 随机立方体 概率、容斥、二项式反演

    传送门 为了方便我们设\(N\)是\(N,M,L\)中的最小值,某一个位置\((x,y,z)\)所控制的位置为集合\(\{(a,b,c) \mid a = x \text{或} b = y \text ...

  10. IdentityServer4实现Oauth2.0四种模式之隐藏模式

      接上一篇:IdentityServer4实现OAuth2.0四种模式之密码模式,密码模式将用户的密码暴露给了客户端,这无疑是不安全的,隐藏模式可以解决这个问题,由用户自己在IdentityServ ...