09-Nginx动静分离

小半 • 2022年12月25日下午5:06 • 后端开发 • 阅读 304

1、Nginx动静分离基本概诉

(1) 什么是动静分离？

动静分离是指通过中间件将动态请求和静态请求进行分离。

(2) 为什么要通过中间件将动态请求和静态请求进行分离？

为了减少不必要的请求消耗，同时能减少请求的延时。

(3) 通过中间件进行动静分离逻辑图

2、Nginx动静分离场景实践

(1) 为了可以观察到效果，将动态和静态分别单独设置（企业中动静都在一台server上）

(2) 环境规划

     主机名     应用环境      IP地址       用途
    Nginx-5     Nginx+PHP   192.168.2.5  动态资源
    Nginx-6     Nginx+PHP   192.168.2.6  静态资源
   7-Proxy1-8     Nginx     192.168.2.8  负载均衡

(3) 在`192.168.2.6`服务器上配置静态资源

[root@Nginx-6 conf.d]# cat ds.zxc.com.conf
server {
 listen 80;
 server_name ds.zxc.com;
 root /soft/code;
 index index.html;
 location ~* .*.(png|jpg|gif)$ {
  root /soft/code/images;
 }
}

#准备目录，以及静态相关图片
[root@Nginx-6 conf.d]# mkdir /soft/code/images -p
[root@Nginx-6 conf.d]# wget -O /soft/code/images/nginx.png http://nginx.org/nginx.png
[root@Nginx-6 conf.d]# systemctl restart nginx

(4) 在`192.168.2.5`服务器上配置动态资源

[root@Nginx-5 conf.d]# yum install -y tomcat
[root@Nginx-5 conf.d]# mkdir /usr/share/tomcat/webapps/ROOT
[root@Nginx-5 conf.d]# vim /usr/share/tomcat/webapps/RO0T/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>

#重启tomcat服务
[root@Nginx-5 conf.d]# systemeTE start tomcat

(5) 在负载均衡`192.168.2.8`上配置调度，实现访问`jsp`和`png`

[root@7-Proxy1-8 conf.d]# cat ds_proxy.conf
upstream static {
 server 192.168.2.6:80;
}

upstream java {
 server 192.168.2.5:8080;
}

server {
 listen 80;
 server_name ds.zxc.com;
 location / {
  root /soft/code;
  index index.html;
 }
 location ~* ^.*.(png|jpg|mp4|gif)${
  proxy_pass http://static;
  include proxy_params;
 }
 location ~ .*.jsp$ {
  proxy_pass http://java;
  include proxy_params;
 }
}

#重启Nginx
[root@7-Proxy1-8 conf.d]# systemctl restart nginx
 #静态测试   在浏览器中访问 ds.zxc.com/nginx.pnp
 #动态测试   在浏览器中访问 ds.zxc.com/java_test.jsp

(6) 在负载均衡`192.168.2.8`上整合出静态和动态资源的`html文件`

[root@7-Proxy1-8 conf.d]# mkdir /soft/code -p
[root@7-Proxy1-8 conf.d]# cat /soft/code/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://ds.zxc.com/java_test.jsp",
 success: function(data){
 $("#get_data").html(data)
 },
 error: function() {
 alert( "fail!!,请刷新再试!");
 }
 });
});
</script>
 <body>
  <h1>测试动静分离</h1>
  <img src="http://ds.zxc.com/nginx.png">
  <div id="get_data"></div>
 </body>
</html>

#直接访问 dc.zxc.com 就可以看见动静都在html上