1.Nginx动静分离基本概述

动静分离, 通过中间件将动静分离和静态请求进行分离。
那为什么要通过中间件将动态请求和静态请求进行分离? 减少不必要的请求消耗, 同时能减少请求的延时。
通过中间件将动态请求和静态请求分离，逻辑图如下
09.Nginx动静分离实战 - 图1

动静分离只有好处: 动静分离后, 即使动态服务不可用, 但静态资源不会受到影响

2.Nginx动静分离场景实践

09.Nginx动静分离实战 - 图2
Nginx动静分离实践应用案例

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服务器上配置动态资源

  1. [root@web01 ~]# yum install -y tomcat
  2. [root@web01 ~]# mkdir /usr/share/tomcat/webapps/ROOT
  3. [root@web01 ~]# vim /usr/share/tomcat/webapps/ROOT/java_test.jsp
  4. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  5. <HTML>
  6.     <HEAD>
  7.         <TITLE>JSP Test Page</TITLE>
  8.     </HEAD>
  9.     <BODY>
  10.       <%
  11.         Random rand = new Random();
  12.         out.println("<h1>Random number:</h1>");
  13.         out.println(rand.nextInt(99)+100);
  14.       %>
  15.     </BODY>
  16. </HTML>
  17. #重启tomcat服务
  18. [root@web01 ~]# systemctl start tomcat

3.在负载均衡10.0.0.5上配置调度, 实现访问jsp和png

  1. root@lb01 conf.d]# cat ds_proxy.conf 
  2. upstream static {
  3.         server 10.0.0.7:80;
  4. }
  5. upstream java {
  6.         server 10.0.0.8:8080;
  7. }
  8. server {
  9.         listen 80;
  10.         server_name ds.oldboy.com;
  11.         location / {
  12.                 root /soft/code;
  13.                 index index.html;
  14.         }
  15.         location ~ .*\.(png|jpg|gif)$ {
  16.                 proxy_pass http://static;
  17.                 include proxy_params;
  18.         }
  19.         location  ~ .*\.jsp$ {
  20.                 proxy_pass http://java;
  21.                 include proxy_params;
  22.         }
  23. }
  24. [root@lb01 conf.d]# systemctl restart nginx

4.通过负载测试访问静态资源
09.Nginx动静分离实战 - 图3
5.通过负载测试访问动态资源
09.Nginx动静分离实战 - 图4
6.在负载均衡10.0.0.5上整合动态和静态资源的html文件

  1. [root@lb01 ~]# mkdir /soft/code -p
  2. [root@lb01 ~]# cat /soft/code/index.html
  3. <html lang="en">
  4. <head>
  5.         <meta charset="UTF-8" />
  6.         <title>测试ajax和跨域访问</title>
  7.         <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  8. </head>
  9. <script type="text/javascript">
  10. $(document).ready(function(){
  11.         $.ajax({
  12.         type: "GET",
  13.         url: "http://ds.oldboy.com/java_test.jsp",
  14.         success: function(data) {
  15.                 $("#get_data").html(data)
  16.         },
  17.         error: function() {
  18.                 alert("fail!!,请刷新再试!");
  19.         }
  20.         });
  21. });
  22. </script>
  23.         <body>
  24.                 <h1>测试动静分离</h1>
  25.                 <img src="http://ds.oldboy.com/nginx.png">
  26.                 <div id="get_data"></div>
  27.         </body>
  28. </html>

7.测试动态和静态资源是否能正常加载在一个html文件中
09.Nginx动静分离实战 - 图5
8.当使用systemctl stop nginx停止Nginx后, 会发现静态内容无法访问, 动态内容依旧运行正常
09.Nginx动静分离实战 - 图6
9.当使用systemctl stop tomcat停止tomcat后, 静态内容依旧能正常访问, 动态内容将不会被请求到
09.Nginx动静分离实战 - 图7

3.Nginx资源分离场景实践

Nginx通过负载均衡实现手机与PC调度至不同的后端节点应用案例
1.根据iphone、安卓、pc跳转不同的页面环境规划

系统版本 主机角色 外网IP 内网IP 提供端口
CentOS7.5 负载均衡 10.0.0.5 172.16.1.5 80
CentOS7.5 提供Android页面 172.16.1.7 9090
CentOS7.5 提供Iphone页面 172.16.1.7 9091
CentOS7.5 提供pc页面 172.16.1.7 9092

2.配置后端WEB节点的Nginx配置

  1. [root@web01 conf.d]# cat sj.conf 
  2. server {
  3.     listen 9090;
  4.     location / {
  5.         root /code/android;
  6.         index index.html;
  7.     }
  8. }
  9. server {
  10.     listen 9091;
  11.     location / {
  12.         root /code/iphone;
  13.         index index.html;
  14.     }
  15. }
  16. server {
  17.     listen 9092;
  18.     location / {
  19.         root /code/pc;
  20.         index index.html;
  21.     }
  22. }

2.为后端WEB节点配置对应的网站目录以及代码

  1. [root@web01 conf.d]# mkdir -p /code/{android,iphone,pc}
  2. [root@web01 conf.d]# echo "PC" > /code/pc/index.html
  3. [root@web01 conf.d]# echo "Iphone" > /code/iphone/index.html
  4. [root@web01 conf.d]# echo "Android" > /code/android/index.html
  5. #检查语法并重载Nginx服务
  6. [root@web01 conf.d]# nginx -t
  7. [root@web01 conf.d]# systemctl restart nginx

2.配置负载均衡服务，根据不同的浏览器调度到不同的资源池

  1. [root@lb01 conf.d]# cat sj_proxy.conf 
  2. upstream iphone {
  3.     server 172.16.1.7:9091;
  4. }
  5. upstream android {
  6.     server 172.16.1.7:9090;
  7. }
  8. upstream pc {
  9.     server 172.16.1.7:9092;
  10. }
  11. server {
  12.     listen 80;
  13.     server_name sj.oldboy.com;
  14.     location / {
  16.     #默认跳转至pc站点
  17.     proxy_pass http://pc;
  18.     include proxy_params;
  20.         #如果客户端是Iphone则跳转到iphone的资源池
  21.         if ($http_user_agent ~* "Iphone") {
  22.             proxy_pass http://iphone;
  23.         }
  25.         #如果客户端是Android则跳转到android的资源池
  26.         if ($http_user_agent ~* "Android"){
  27.             proxy_pass http://android;
  28.         }
  30.         #如果客户端是IE浏览器，则返回403错误。
  31.         if ($http_user_agent ~* "msie"){
  32.             return 403;
  33.         }
  34.     }
  35. }

3.直接使用浏览器访问，返回默认的结果
09.Nginx动静分离实战 - 图8
4.如果通过android设备访问，效果如下。
09.Nginx动静分离实战 - 图9
4.如果通过Iphone设备访问，效果如下。
09.Nginx动静分离实战 - 图10