一.动静分离
通过中间件将动态请求和静态请求分离>>减少不必要的请求消耗,减少请求延时。 ‘
二.配置动静分离
2.1
nginx服务器 redhat7 Nginx 10.10.11.221
tomcat服务器 redhat7 tomcat+jdk 10.10.11.19
2.2 准备测试文件
A:
[root@liujie code]# vim /opt/app/code/test_mysite.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({ //ajax调用 进行动态请求
type: "GET",
url: "http://liujie.com/java_test.jsp",
success: function(data) {
$("#get_data").html(data)
},
error: function() {
alert("fail!!!,请刷新再试!");
}
});
});
</script>
<body>
<h1>测试动静分离</h1>
<img src="http://liujie.com/img/nginx.png"/> //请求一张静态图片
<div id="get_data"><div>
</body>
</html>
B:为nginx静态请求准备图片
[root@liujie code]# cd /opt/app/code/img/
[root@liujie img]# ll
total 4
-rw-r--r-- 1 root root 2103 Aug 8 2017 nginx.png
C:准备tomcat的动态页面
[root@tomcat ROOT]# cd /usr/local/tomcat/webapps/ROOT/
[root@tomcat ROOT]# ll
total 192
-rw-r----- 1 root root 27235 Nov 3 13:42 asf-logo-wide.svg
-rw-r----- 1 root root 713 Nov 3 13:39 bg-button.png
-rw-r----- 1 root root 1918 Nov 3 13:39 bg-middle.png
-rw-r----- 1 root root 1392 Nov 3 13:39 bg-nav-item.png
-rw-r----- 1 root root 1401 Nov 3 13:39 bg-nav.png
-rw-r----- 1 root root 3103 Nov 3 13:39 bg-upper.png
-rw-r----- 1 root root 21630 Nov 3 13:39 favicon.ico
-rw-r----- 1 root root 12290 Nov 3 13:42 index.jsp
-rw-r--r-- 1 root root 343 Aug 8 2017 java_test.jsp //动态页面
-rw-r----- 1 root root 7142 Nov 3 13:42 RELEASE-NOTES.txt
-rw-r----- 1 root root 5581 Nov 3 13:42 tomcat.css
-rw-r----- 1 root root 2066 Nov 3 13:39 tomcat.gif
vim java_test.jsp //用于生成动态数字
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<HTML>
<HEAD>
<TITLE>JSP Test Page</TITLE>
</HEAD>
<BODY>
<%
Random rand = new Random();
out.println("<h1>Random number:</h1>");
out.println(rand.nextInt(99)+100);
%>
</BODY>
</HTML>
2.3 新建nginx下虚拟server
[root@liujie code]# vim /etc/nginx/conf.d/test_mysite.conf
upstream java_api{
server 10.10.11.19:8080; // 转发的服务器,upstream 为负载均衡做准备
}
server {
listen 80;
server_name liujie.com;
#charset koi8-r;
access_log /var/log/nginx/log/host.access.log main;
root /opt/app/code; // 静态资源存放目录
location ~ .*.jsp$ {
proxy_pass http://java_api; // 动态请求的转发
proxy_set_header Host $host;
#index index.html index.htm;
}
location ~ \.(jpg|png|gif)$ { // 静态请求直接读取
expires 1h;
gzip on;
}
location /{
index index.html index.htm;
}
error_page 500 502 503 504 404 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
三.测试页面
重启nginx tomcat
3.1 需要配置谷歌浏览器,使浏览器支持跨域
首先需要关闭谷歌浏览器的所有窗口
右击谷歌浏览器图标——>属性。弹出属性对话框。在目标栏最后添加 –args –disable-web-security –user-data-dir 注意空格
再次打开谷歌会提示:
3.2访问页面:
刷新数字会变 则请求到了tomcat
停止tomcat:
静态页面正常展示