Nginx的应用之动静分离

Nginx 的动静分离

我们通过中间件将动态请求和静态请求进行分离，减少了不必要的请求消耗和延时。

动静分离后，即使动态服务不可用，但静态资源不会受到影响。

应用实例

1、准备环境

系统 角色 主机名 IP 服务
CentOS 7.2 反向代理 Nginx_Proxy 192.168.1.10 Nginx：v1.16.1
CentOS 7.2 静态资源 Nginx_Static 192.168.1.11 Nginx：v1.16.1
CentOS 7.2 动态资源 Tomcat_Server 192.168.1.12 Tomcat/7.0.76

2、配置服务器

2.1、在Nginx Static主机中配置静态资源（以图片为例）

[root@Nginx_Static]# vim /etc/nginx/conf.d/static.conf
server {
        listen 80;
        server_name static.com;
        root /data/www/static;
        index index.html;

        location ~* .*\.(png|jpg|gif)$ {
                root /data/www/static/images;
        }
}
#准备存放图片的目录及图片
[root@Nginx_Static]# mkdir -pv /data/www/static/images
[root@Nginx_Static]# wget -O /data/www/static/images/nginx.png http://nginx.org/nginx.png
[root@Nginx_Static]# systemctl restart nginx

2.2、在 Tomcat_Server主机中配置动态资源（以随机数为例）

#安装Tomcat，并编辑随机数的jsp文件
[root@Tomcat_Server]# yum -y install tomcat
[root@Tomcat_Server]# mkdir /usr/share/tomcat/webapps/ROOT
[root@Tomcat_Server]# vim /usr/share/tomcat/webapps/ROOT/java.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>

#重启tomcat服务
[root@Tomcat_Server]#

2.3、在Nginx_Proxy主机上配置代理，实现访问jsp和png

[root@Nginx_Proxy]# vim /etc/nginx/conf.d/proxy.conf
upstream static {
	server 192.168.1.11:80;
}
upstream java {
	server 192.168.1.12:8080;
}

server {
	listen 80;
	server_name proxy.com;
	location / {
		root /data/www/whole;
		index index.html;
	}
	location ~ .*\.(png|jpg|gif)$ {
		proxy_pass http://static;
	}
	location ~ .*\.jsp$ {
		proxy_pass http://java;
	}
}
#重启nginx
[root@Nginx_Proxy]# systemctl restart nginx

2.4、通过代理服务器测试访问动态及静态资源

2.5、在Nginx_Proxy主机上将动态和静态资源合并为html文件

[root@Nginx_Proxy]# mkdir /data/www/whole
[root@Nginx_Proxy]# vim /data/www/whole/index.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://proxy.com/java.jsp",
        success: function(data) {
                $("#get_data").html(data)
        },
        error: function() {
                alert("fail!!,请刷新再试!");
        }
        });
});
</script>
        <body>
                <h1>测试动静分离</h1>
                <img src="http://proxy.com/nginx.png">
                <div id="get_data"></div>
        </body>
</html>

2.6、使用浏览器测试访问，动态及静态资源能否加载在一个html文件中

2.7、关闭静态资源的nginx服务后，发现静态内容无法访问，但动态内容可以正常浏览

2.8、关闭动态资源的tomcat服务后，发现动态内容无法访问，但静态内容可以正常浏览

posted @ 2019-08-26 23:29  zh_Revival  阅读(329)  评论(0)  编辑  收藏  举报