当前位置:首页 > Nginx > 正文内容

Nginx实现动静分离

5年前 (2019-09-21)Nginx525

Nginx动静分离基本概述

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

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

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

image.png


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


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;
    .....
}


多台服务器实现动静分离

image.png



环境准备

系统作用服务地址
Centos7.5负载均衡nginx proxy10.0.0.5
Centos7.5静态资源nginx static10.0.0.7
Centos7.5动态资源tomcat server10.0.0.8


web01配置静态资源

[root@web01 ~]# cd /etc/nginx/conf.d/
[root@web01 conf.d]# cat ds_oldboy.conf 
server {
        listen 80;
        server_name pic.qmf.com;
        root /code;
        index index.html;
        location ~* .*\.(jpg|png|gif)$ {
                root /code/images;
        }
}

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

#创建图片目录
[root@web01 conf.d]# mkdir /code/images/

#上传一个静态文件
[root@web01 conf.d]# cd /code/images/
[root@web01 images]# rz cjk.gif
[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



web02配置动态资源

[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 Page</TITLE>
    </HEAD>
    <BODY>
        <%
            Random rand = new Random();
            out.println("<h1>随机数:<h1>");
            out.println(rand.nextInt(99)+100);
        %>
    </BODY>
</HTML>
[root@web02 webapps]# systemctl start tomcat


负载均衡上调度

[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 pic.qmf.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


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

#编辑配置文件
[root@lb01 ~]# cat /etc/nginx/conf.d/proxy_ds.conf
upstream static {
        server 172.16.1.7:80;
}
upstream java {
        server 172.16.1.8:8080;
}
server {
        listen 80;
        server_name pic.qmf.com;
        
        location / {
            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;
        }
}

[root@lb01 ~]# mkdir -p /code


#编辑整合后的index.html
[root@lb01 ~]# cat /code/index.html
<html>
<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://pic.qmf.com/java_test.jsp",
        success: function(data){
                $("#get_data").html(data)
        },
        error: function() {
                alert("哎呦喂,失败了,回去检查你服务去~");
        }
        });
});
</script>
        <body>
                <h1>带你测试动静分离</h1>
                <img src="http://pic.qmf.com/cjk.gif">
                <div id="get_data"></div>
        </body>
</html>

Nginx资源分离场景实践

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


根据Iphone、安卓、pc跳转不通的页面环境规划

系统版本主机角色外网IP内网IP提供端口
CentOS7.5负载均衡10.0.0.5172.16.1.580
CentOS7.5提供Android页面
172.16.1.79090
CentOS7.5提供Iphone页面
172.16.1.79091
CentOS7.5提供pc页面
172.16.1.79092

配置后端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;
        }
}


为后端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


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

[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.qmf.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;
        }
}

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


PC端访问

image.png


浏览器模拟IPhone

image.png


浏览器模拟Android

image.png


实际线上的配置

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


“Nginx实现动静分离” 的相关文章

Nginx实现七层负载均衡

Nginx实现七层负载均衡

Nginx负载均衡当我们的Web服务器直接面向用户,往往要承载大量并发请求,单台服务器难以负荷,使用多台Web服务器组成集群,前端使用Nginx负载均衡,将请求分散的打到后端服务器集群中,实现负载的分发。那么会大大提升系统的吞吐率、请求性能、高容灾所以说当海量用户请求过来以后,它同样是请求调度节点,...

Nginx实现四层负载均衡

Nginx实现四层负载均衡

Nginx四层负载均衡四层负载均衡是基于传输层协议包来封装的(如:TCP/IP),七层是指的应用层,他的组装在四层的基础之上,无论四层还是七层都是指的OSI网络模型。四层负载均衡应用场景1、四层+七层来做负载均衡,四层可以保证七层的负载均衡的高可用性;如:nginx就无法保证自己的服务高可用,需要依...

Nginx作为缓存WEB服务

Nginx作为缓存WEB服务

通常情况下缓存是用来减少后端压力, 将压力尽可能的往前推, 减少后端压力,提高网站并发延时1.缓存常见类型服务端缓存代理缓存, 获取服务端内容进行缓存客户端浏览器缓存Nginx代理缓存原理2.缓存配置语法proxy_cache配置语法Syntax: proxy_cache zon...

keepalived高可用

1、keepalived    通过vrrp协议实现的高可用.             虚拟路由冗余协议    ...