引言
今天我们来记录下动静分离的使用场景。
动静分离
通过中间件将动态请求和静态请求分离
作用是分离资源,减少不必要的请求消耗,减少请求延时
因为静态资源如果也放在服务端请求,会消耗cpu的运算,造成不必要的消耗。
如果不实现动静分离,应该是怎样的流程呢?
一个请求会去请求中间件,然后由中间件把请求转给框架进行对应的加载,框架会去执行对应的一段程序,然后再返回数据资源。
场景:
首先我来展示下这次的演示示例html,包含了对静态资源及动态资源的请求。
<html lang=en">
<head>
<meta charset="UTF-8"/>
<title>测试ajax和跨域访问</title>
<script src=http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function()){
$.ajax({
type:"GET",
url:"http://jeson.t.imooc.io/java_test.jsp",
success: function(data){
$("#get_data").html(data)
},
error:function(){
alert("fail!!!,请刷新再试!")
}
});
}
</script>
<body>
<h1>测试动静分离</h1>
<image src="http://jeson.t.imooc.io/img/nginx.png"/>
<div id="get_data"></div>
</body>
</html>
静态资源是请求的图片资源
动态资源是ajax请求的jsp页面。
下面我们来看看nginx中的一些配置信息:
vi /etc/nginx/conf.d/test_mysite.conf
upstream java_api{
server 127.0.0.1:8080;
}
server {
listen 80;
server_name localhost;
#charset koi8-r;
access_log /var/log/nginx/host.access.log main;
root /opt/app/code
location ~ \.jsp$ {
proxy_pass http://java_api;
index index.html index.htm;
}
location ~ \.(jpg|png|gif)$ {
expires 1h;
gzip on;
}
location / {
index index.html index.htm;
}
}