Nginx动静分离
动静分离,通过中间件将动态请求和静态请求进⾏分离, 分离资源, 减少不必要的请求消耗, 减少请求延时。
好处: 动静分离后, 即使动态服务不可⽤, 但静态资源不会受到影响
通过中间件将动态请求和静态请求分离
image.png
1.Nginx动静分离应⽤案例
image.png
image.png
1.在 192.168.69.113 静态资源
[root@Nginx conf.d]# cat access.conf
server{
listen 80;
root /soft/code;
index index.html;
location ~ .*\.(png|jpg|gif)$ {
gzip on;
root /soft/code/images;
}
}
//准备⽬录, 以及静态相关图⽚
[root@Nginx ~]# wget -O /soft/code/images/nginx.png http://nginx.org/nginx.png
2.在 192.168.69.113 准备动态资源
[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>
image.png
3.在 192.168.69.112 配置负载均衡代理调度, 实现访问 jsp 和 png
upstream static {
server 192.168.69.113:80;
}
upstream java {
server 192.168.69.113:8080;
}
server {
listen 80;
server_name 192.168.69.112;
location / {
root /soft/code;
index index.html;
}
location ~ .*\.(png|jpg|gif)$ {
proxy_pass http://static;
include proxy_params;
}
location ~ .*\.jsp$ {
proxy_pass http://java;
include proxy_params;
}
}
测试访问静态资源
image.png
测试访问动态资源
image.png
4.在 192.168.69.112 proxy 代理上编写动静整合 html ⽂件
[root@Nginx ~]# cat /soft/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://192.168.69.112/java_test.jsp",
success: function(data) {
$("#get_data").html(data)
},
error: function() {
alert("fail!!,请刷新再试!");
}
});
});
</script>
<body>
<h1>测试动静分离</h1>
<img src="http://192.168.69.112/nginx.png">
<div id="get_data"></div>
</body>
</html>
测试动静分离整合
image.png
当停⽌ Nginx 后, 强制刷新⻚⾯会发现静态内容⽆法访问, 动态内容依旧运⾏正常
image.png
