通过Nginx实现系统更新中温馨提示页面

最新推荐文章于 2024-04-29 20:15:05 发布

system_All

最新推荐文章于 2024-04-29 20:15:05 发布

阅读量2.4k

点赞数 2

文章标签： nginx 运维服务器

本文链接：https://blog.csdn.net/system_All/article/details/128066549

版权

Nginx反向代理，负载均衡，简单好用，应用在目前大部分的系统部署架构中。

有经验的实施人员都会发现，在系统更新时，前端访问会报错，用户体验极其不好，会引起咨询或引发投诉。

那么通过Nginx一个简单的配置，加一个html页面，即可解决上述烦恼。

如下：

1、编写一个简单的html页面，命名为：upgrading.html

PC端效果如下

移动端效果如下

有需要的html页面代码的同学

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>系统更新维护中</title>
</head>
<style>
*{
 margin:0;
 padding:0;
 }
html{
 height:50%;
 }
body{
 background:#F1FDFE;
 height:100%;
 }
.mom{
 width:600px;
 height:300px;
 line-height:100px;
 text-align:center;
 font-size:30px;
 border-width:5px;
 border-style:dashed;
 border-color:#FFFFFF;
 background:#e6fafd;
 color:rgb(255, 0, 55);
 }
</style>
<body>
<div>
<div class="web_notice" style="position: fixed;top: 0;left: 0;width: 200%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;">
<div style="position: fixed;top: 50%;left: 50%;width: 600px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 100px 25px;" class="mom">
<h1 style="font-weight: bold;top: 50%;text-align: center;font-size: 45px;margin-top: -40px;">系统更新维护中</h1><div style="font-size:33px;margin-top:30px;line-height:50px;color:#000000;text-align:left">&nbsp;&nbsp;&nbsp;&nbsp;尊敬的用户，您好！系统于11月25日00:00~24:00进行紧急维护，届时访问会受到影响，给您造成不便敬请谅解。</div>
<a style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 25px;line-height: 60px;margin: 0 auto;margin-top: 60px;border-radius: 32px;width: 80%;" onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</ a>
</div>
</div>
</div>
</body>
</html>

2、将html页面上传至Nginx的html目录下，如：/opt/nginx/html 路径下

3、在代理服务器中，调整Nginx配置

在server 配置中增加以下红色部分

server {
listen 8080;
server_name 19.xx.xx.89;

client_max_body_size 2000m;
client_body_buffer_size 5m;

#更新公告begin
location ~* {
try_files '' /upgrading.html;
}
location = /upgrading.html {
root /opt/nginx/html;
index upgrading.html;
}
#更新公告end

.....

}

保存

4、执行命令：nginx -s reload

重启Nginx，看看效果。

system_All

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
通过Nginx实现系统更新中温馨提示页面

有经验的实施人员都会发现，在系统更新时，前端访问会报错，用户体验极其不好，会引起咨询或引发投诉。Nginx反向代理，负载均衡，简单好用，应用在目前大部分的系统部署架构中。那么通过Nginx一个简单的配置，加一个html页面，即可解决上述烦恼。4、执行命令：nginx -s reload。在server 配置中增加以下红色部分。/opt/nginx/html 路径下。3、在代理服务器中，调整Nginx配置。#更新公告begin。有需要的html页面代码的同学。重启Nginx，看看效果。
复制链接

扫一扫