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>