Nginx实现动静分离
作者：互联网
动静分离
概念
- 静态资源(html/css/js/img) 不需要依赖web应用服务器的解析 直接放在Nginx上 访问时直接响应给客户端
- 提高响应效率 降低服务器压力
准备工作
- 把index.jsp转换为html
- 1、创建一个html模板页面
- 2、复制从head起始标签开始到结束
- 3、删除<c:set …/>
- 4、把所有style/script中的${path}删除 使用的相对路径(相当于当前资源)
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--1.1 引入min.css-->
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
<!--1.2 引入bootstrap-theme.min.css-->
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"/>
<!--2.1 引入bootstrap-table.min.css-->
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-table.min.css"/>
<!-- 3.1 bootstarp-editable基本使用：1引入bootstrap-editable.css -->
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-editable.css" />
<!--1.3 引入jquery-->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!--1.4 引入bootstrap.min.js-->
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--2.4 引入bootstrap-table.min.js-->
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap-table.min.js"></script>
<!--2.2 引入bootstrap-table-editable.min.js-->
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap-table-editable.min.js"></script>
<!--2.3 引入bootstrap-table-zh-CN.min.js-->
<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap-table-zh-CN.min.js"></script>
<!-- 引入 jquery.serializejson.min.js 实现表格数据的转换为json-->
<script type="text/javascript" src="js/jquery.serializejson.min.js"></script>
<!--3.2 bootstarp-editable基本使用：2引入bootstrap-editable.min.js -->
<script type="text/javascript"
src="bootstrap-3.3.7-dist/js/bootstrap-editable.min.js"></script>
<!--0 引入自己的js文件-->
<script type="text/javascript" src="js/cloud.js"></script>
</head>
<body>
<!--创建一个div class值为contianor-->
<!--1.5 bootstrap的所有页面元素必须写在一个class=container的div中-->
<div class="container">
<div class="page-header">
<h1>智游办公云盘系统：<small id="small_user">登陆者:</small></h1>
</div>
<!--按钮组-->
<div class="btn-group" role="group" aria-label="..." id="toolbar">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#addDirectoryModal">创建文件夹</button>
<button type="button" class="btn btn-default" onclick="deleteManySelect();">删除选中</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#addFileModal">文件上传</button>
<button type="button" class="btn btn-default" onclick="outMyDirectory();">后退一步</button>
<button type="button" class="btn btn-default" onclick="logout();">退出登录</button>
</div>
<!--带表格的模板-->
<div class="panel panel-default" style="height: 320px;">
<table class="table" id="tab_cloud" ></table>
</div>
</div>
<!--创建文件夹的模态框-->
<div class="modal fade" id="addDirectoryModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel">创建文件夹</h4>
</div>
<div class="modal-body">
<form id="form_add_directory">
<div class="form-group">
<label class="control-label">文件夹名字:</label>
<input type="text" class="form-control" name="dname">
</div>
<div class="form-group">
<label class="control-label">文件夹共享：</label>
<select name="dscope" class="form-control">
<option value="0" selected="selected">私有</option>
<option value="1">朋友共享</option>
<option value="2">所有共享</option>
</select>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="addMyDirectory();">添加</button>
</div>
</div>
</div>
</div>
<!--文件上传的模态框-->
<div class="modal fade" id="addFileModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">文件上传</h4>
</div>
<div class="modal-body">
<form id="form_add_file" enctype="multipart/form-data">
<div class="form-group">
<label class="control-label">文件夹名字:</label>
<input type="text" class="form-control" name="dname">
</div>
<div class="form-group">
<label class="control-label">文件夹共享：</label>
<select name="dscope" class="form-control">
<option value="0" selected="selected">私有</option>
<option value="1">朋友共享</option>
<option value="2">所有共享</option>
</select>
</div>
<div class="form-group">
<label class="control-label">选择文件:</label>
<input type="file" class="form-control" name="file">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="addMyFile();">上传</button>
</div>
</div>
</div>
</div>
<!--登录模态框-->
<div class="modal fade" id="loginModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">创建文件夹</h4>
</div>
<div class="modal-body">
<form id="form_login">
<div class="form-group">
<label class="control-label">用户名:</label>
<input type="text" class="form-control" name="uname">
</div>
<div class="form-group">
<label class="control-label">密码:</label>
<input type="text" class="form-control" name="upwd">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" onclick="login();">登录</button>
</div>
</div>
</div>
</div>
</body>
</html>
- 把所有的静态资源剪切出来 放在一个名字为cloud(Nginx中当前项目的虚拟目录)
删除静态资源后的目录
- 创建好的静态文件夹
设置动静分离
-
把静态资源文件夹cloud上传到/usr/share/nginx
-
项目的其他资源打包
-
删除三台服务器的webapps下的所有的text05*(这是没有实现动静分离上传的war包)
-
重新上传新的war包到三台服务器的WebApps下
-
重启tomcat+监控tomcat的日志信息
-
修改Nginx的配置文件: /etc/nginx/conf.d/cloud34.conf
server
{
#指定nginx监听的端口
listen 80;
#指定nginx的主机的ip地址
server_name 192.168.254.128;
#动静分离
location ~ .*\.(html|css|js|eot|svg|ttf|woff|woff2)$
{
root /usr/share/nginx;
}
#指定url的转换规则
location /cloud34{
proxy_pass http://cloudserver/test05_cloud;
}
#浏览器请求：http://192.168.254.128:80/cloud34 时 会被nginx解析为
#http://192.168.160.128:8080/test05_cloud
#http://192.168.160.129:8080/test05_cloud
#http://192.168.160.130:8080/test05_cloud
}
- 重启Nginx
- 访问首页: 路径写全称
标签：动静,nginx,分离,html,192.168,Nginx,文件夹,cloud 来源： https://blog.csdn.net/weixin_54163882/article/details/117717377