⑪.nginx动静分离

1.准备静态资源

[root@RainGod bin]# cat /etc/nginx/conf.d/static.conf 
server{
        listen 81;
#        server_name 185.184.223.120;
        root /html/code/image;
        index index.html;
        access_log /var/log/nginx/static_access.log main;
        error_log  /var/log/nginx/static_error.log warn;

        location ~ .*.(png|jpg|gif)$ {
                gzip on;
        }
}

2.准备动态资源

[root@Nginx ~]# wget -O /soft/package/tomcat9.tar.gz 
http://mirror.bit.edu.cn/apache/tomcat/tomcat-9/v9.0.7/bin/apache-tomcat-9.0.7.tar.gz
[root@Nginx ~]# mkdir /soft/app
[root@Nginx ~]# tar xf /soft/package/tomcat9.tar.gz -C /soft/app/

[root@Nginx ~]# vim /soft/app/apache-tomcat-9.0.7/webapps/ROOT/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>

3.准备负载均衡反向代理配置文件

[root@RainGod bin]# cat /etc/nginx/conf.d/185.184.223.120.conf 
upstream static {
        server 127.0.0.1:81;
}

upstream java {
        server 127.0.0.1:8080;
}

server {
        listen 80;
        server_name 185.184.223.120;

        location / {
                root /html/code;
                index index.html;
        }

        location ~ .*.(png|jpg|gif)$ {
                proxy_pass http://static;
                include proxy_params;
        }

        location  ~ .*.jsp$ {
                proxy_pass  http://java;
                include proxy_params;
        }

}

4准备动静结合的html页面

[root@RainGod bin]# cat /html/code/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({
        type: "GET",
        url: "http://185.184.223.120/java_test.jsp",
        success: function(data) {
                $("#get_data").html(data)
        },
        error: function() {
                alert("fail!!,请刷新再试!");
        }
        });
});
</script>
        <body>
                <h1>测试动静分离</h1>
                <img src="http://185.184.223.120/wangyu.png">
                <div id="get_data"></div>
        </body>
</html>
原文地址:https://www.cnblogs.com/yangtao416/p/14676141.html