12.Nginx之动静分离

时间:2019-08-30
本文章向大家介绍12.Nginx之动静分离,主要包括12.Nginx之动静分离使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1. Nginx动静分离基本概述

动静分离,通过中间件将动静分离和静态请求进行分离;

通过中间件将动态请求和静态请求分离,可以建上不必要的请求消耗,同事能减少请求的延时。

通过中间件将动态请求和静态请求分离,逻辑图如下

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


2. Nginx动静分离场景实践

单台服务器实现动静分离

location / {
    root /code/wordpress;
    index.php;
}
location ~* ^.*\.(png|jpg|mp4|)${
    root /code/wordpress/images;
    gzip on;
    .....
}
location ~ \.php$ {
    fastcgi_pass 127.0.0.1:9000;
    .....
}

多台服务器实现动静分离

2.1 环境准备

系统 作用 服务 地址
Centos7.5 负载均衡 nginx proxy 10.0.0.5
Centos7.5 静态资源 nginx static 10.0.0.7
Centos7.5 动态资源 tomcat server 10.0.0.8

2.2 在10.0.0.7上配置静态资源

[root@web01 ~]# cd /etc/nginx/conf.d/
[root@web01 conf.d]# cat ds_oldboy.conf 
server {
        listen 80;
        server_name ds.oldboy.com;
        root /soft/code;
        index index.html;

        location ~* .*\.(jpg|png|gif)$ {
                root /soft/code/images;
        }
}
[root@web01 conf.d]#

#配置一个主页
[root@web01 conf.d]# echo "ceshi" > /soft/code/index.html

#上传一个静态文件
[root@web01 conf.d]# cd /soft/code/images/
[root@web01 images]# rz

[root@web01 conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@web01 conf.d]# nginx -s reload

2.3 在10.0.0.8上配置动态资源

[root@web02 ~]# yum install -y tomcat
[root@web02 ~]# mkdir /usr/share/tomcat/webapps/ROOT
[root@web02 ~]# cat /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>
[root@web02 ~]#

[root@web02 webapps]# systemctl start tomcat

2.4 在负载均衡10.0.0.5上配置调度,实现访问jsp和jpg

[root@lb01 conf.d]# cat proxy_ds.conf 
upstream static {
        server 172.16.1.7:80;
}

upstream java {
        server 172.16.1.8:8080;
}

server {
        listen 80;
        server_name ds.oldboy.com;

        location ~* .*\.(jpg|png|gif)$ {
                proxy_pass http://static;
                proxy_set_header Host $http_host;
        }

        location ~ \.jsp {
                proxy_pass http://java;
                proxy_set_header Host $http_host;
        }
}

[root@lb01 conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@lb01 conf.d]# nginx -s reload

2.5 配置本地hosts,通过负载访问动态与静态资源

动态资源 ↓

静态资源 ↓

2.6 在负载均衡10.0.0.5上整合动态和静态的html文件

[root@lb01 ~]# mkdir /code -p
[root@lb01 ~]# cat /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/test.png">
                <div id="get_data"></div>
        </body>
</html>

2.7 在负载均衡10.0.0.5上配置nginx配置文件

[root@lb01 conf.d]# cat proxy_ds.conf 
upstream static {
        server 172.16.1.7:80;
}
upstream java {
        server 172.16.1.8:8080;
}
server {
        listen 80;
        server_name ds.oldboy.com;
        root /code;
        index index.html;

        location ~* .*\.(jpg|png|gif)$ {
                proxy_pass http://static;
                proxy_set_header Host $http_host;
        }

        location ~ \.jsp {
                proxy_pass http://java;
                proxy_set_header Host $http_host;
        }

}

2.8 浏览访问测试动静分离是否能成功

可以尝试关掉静态或者动态的服务,测试是否互不影响


3. Nginx资源分离场景实践

Nginx通过负载均衡实现手机与PC调度至不通的后端节点应用案例

3.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

3.2 配置后端WEB节点的Nginx配置

[root@web01 conf.d]# vim sj.conf
server {
        listen 9090;
        location / {
                root /code/android;
                index index.html;
        }
}

server {
        listen 9091;
        location / {
                root /code/iphone;
                index index.html;
        }
}

server {
        listen 9092;
        location / {
                root /code/pc;
                index index.html;
        }
}

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

[root@web01 conf.d]# mkdir /code/{android,iphone,pc}
[root@web01 conf.d]# echo "我是安卓" > /code/android/index.html
[root@web01 conf.d]# echo "我是iphone" > /code/iphone/index.html
[root@web01 conf.d]# echo "我是computer" > /code/pc/index.html

3.4 配置负载均衡服务,根据不同的浏览器调度到不同的资源地

[root@lb01 conf.d]# vim /etc/nginx/conf.d/proxy_sj.conf
upstream android {
        server 172.16.1.7:9090;
}

upstream iphone {
        server 172.16.1.7:9091;
}

upstream pc {
        server 172.16.1.7:9092;
}

server {
        listen 80;
        server_name sj.haoda.com;
        charset 'utf-8';

        location / {

                #如果客户端来源是Android则跳转到Android的资源;
                if ($http_user_agent ~* "Android") {
                        proxy_pass http://android;
                }

                #如果客户端来源是Iphone则跳转到Iphone的资源;
                if ($http_user_agent ~* "Iphone") {
                        proxy_pass http://iphone;
                }

                #如果客户端是IE浏览器则返回403错误;
                if ($http_user_agent ~* "MSIE") {
                        return 403;
                }

                #默认跳转pc资源;
                proxy_pass http://pc;
        }
}

3.5 使用浏览器访问,查看结果

3.5.1 使用浏览器直接访问,查看结果

3.5.2 使用浏览器模拟IPhone访问,查看结果

3.5.3 使用浏览器模拟Android访问,查看结果

3.6 实际线上的配置

server {
        listen 80;
        server_name   www.oldboy.com;
        if ($http_user_agent ~* "Android|Iphone") {
                rewrite ^/$ https://sj.oldboy.com redirect;
        }       
}

原文地址:https://www.cnblogs.com/chenmiao531759321/p/11436171.html