Nginx动静分离


一.动静分离

通过中间件将动态请求和静态请求分离>>减少不必要的请求消耗,减少请求延时。 ‘


二.配置动静分离

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:
静态页面正常展示