Nginx教程
Nginx实现动静分离
本文主要是介绍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实现动静分离的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
Nginx发布学习：从入门到实践的简单教程10-29
-
Nginx发布：新手入门教程10-28
-
nginx 怎么设置文件上传最大20M限制-icode9专业技术文章分享10-21
-
关闭 nginx的命令是什么?-icode9专业技术文章分享10-17
-
Nginx实用篇：实现负载均衡、限流与动静分离09-17
-
宝塔nginx新增8022端口方法步骤-icode9专业技术文章分享08-21
-
nginx配置，让ws升级为wss访问的方法步骤-icode9专业技术文章分享08-21
-
nginx ws代理配置方法步骤-icode9专业技术文章分享08-15
-
nginx 让访问带有/relid的地址返回404 ,例子 /relid-x-0.36-y-131.html-icode9专业技术文章分享08-14
-
nginx 判断地址有/statics/的路径，指向到/home/html/statics/目录-icode9专业技术文章分享08-14
-
解锁Nginx日志的宝藏：GoAccess——你的实时、交互式Web日志分析神器！07-24
-
fail2ban nginx03-29
-
install nginx proxy manager03-18
-
44从零开始用Rust编写nginx，命令行参数的设计与解析及说明01-24
-
比Nginx更好用的Gateway！01-22
栏目导航
