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服务后，发现动态内容无法访问，但静态内容可以正常浏览
