1、基本概述

web中静态资源和动态资源的概念。

  • 静态资源：即前端的固定页面，包含了HTML、CSS、JS和图片的资源，不需要查数据库也不需要后台服务处理返回，直接能够显示的页面。具体的形式为：客户端发送请求到web服务器，web服务器仅是从内存中获取响应的文件返回给客户端，客户端解析并渲染显示出来。
  • 动态资源：请求需要后台程序处理（比如从数据库中读取数据），由后台程序将结果返回给web服务器，web服务器再返回给客户端解析并渲染显示出来。

2、工作原理

Nginx中动静分离的大致思路。

为了将静态资源和动态资源分离开，将静态资源部署在Nginx上，动态资源还是在后端服务器上。如果是静态资源的请求，则直接从Nginx配置的静态资源目录下获取资源；如果是动态资源的请求，则利用Nginx的反向代理，将请求转发到后台服务器中获取动态资源，从而实现动静分离。

需要注意的是，实际项目中，静态资源一般也不直接部署在Nginx服务器上，而是通过CDN服务获取静态资源。

动静分离只有好处：

  • 动静分离后, 即使动态服务不可用, 但静态资源不会受到影响
  • 减少不必要的请求消耗, 同时能减少请求的延时

7、动静分离 - 图1
7、动静分离 - 图2

3、应用案例

0.环境准备 | 系统 | 服务 | 服务 | 地址 | | —- | —- | —- | —- | | CentOS7.5 | 负载均衡 | Nginx Proxy | 10.0.0.5 | | CentOS7.5 | 静态资源 | Nginx Static | 10.0.0.7 | | CentOS7.5 | 动态资源 | Tomcat Server | 10.0.0.8 |

1.在_10.0.0.7_服务器上配置静态资源

  1. [root@web01 conf.d]# cat ds_oldboy.conf
  2. server{
  3.         listen 80;
  4.         server_name ds.oldboy.com;
  5.         root /soft/code;
  6.         index index.html;
  7.         location ~* .*\.(png|jpg|gif)$ {
  8.                 root /soft/code/images;
  9.         }
  10. }
  11. # 准备目录, 以及静态相关图片
  12. [root@web01 ~]# mkdir /soft/code/images -p
  13. [root@web01 ~]# wget -O /soft/code/images/nginx.png http://nginx.org/nginx.png
  14. [root@web01 ~]# systemctl restart nginx

2.在_10.0.0.8_服务器上配置动态资源

[root@web01 ~]# yum install -y tomcat
[root@web01 ~]# mkdir /usr/share/tomcat/webapps/ROOT
[root@web01 ~]# vim /usr/share/tomcat/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>
#重启tomcat服务
[root@web01 ~]# systemctl start tomcat

3.在负载均衡_10.0.0.5_上配置调度, 实现访问_jsp_和_png_

root@lb01 conf.d]# cat ds_proxy.conf 
upstream static {
        server 10.0.0.7:80;
}
upstream java {
        server 10.0.0.8:8080;
}
server {
        listen 80;
        server_name ds.oldboy.com;
        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;
        }
}
[root@lb01 conf.d]# systemctl restart nginx

4.通过负载测试访问静态资源
7、动静分离 - 图3
5.通过负载测试访问动态资源
7、动静分离 - 图4
6.在负载均衡_10.0.0.5_上整合动态和静态资源的_html_文件

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

7.测试动态和静态资源是否能正常加载在一个_html_文件中
7、动静分离 - 图5
8.当使用_systemctl stop nginx_停止_Nginx_后, 会发现静态内容无法访问, 动态内容依旧运行正常
7、动静分离 - 图6
9.当使用_systemctl stop tomcat_停止_tomcat_后, 静态内容依旧能正常访问, 动态内容将不会被请求到
7、动静分离 - 图7