21.nginx动静分离

Posted 柯正

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了21.nginx动静分离相关的知识，希望对你有一定的参考价值。

动静分离的前戏

注意：动静分离，不需要运维来做（开发）

动态请求：该用户请求，需要调用数据库中的数据

静态请求：该用户请求，不需要调用数据库

动态页面：后端开发写的需要调用数据库的页面（python，Java，C，php，nodejs...）

静态页面：前端开发写的，不需要调用数据库，直接访问的页面

部署nginx：专门存放前端写的静态页

部署tomcat：专门存放后端写的JAVA动态页面(resin)

部署nginx：专门存放前端写的静态页

部署php：专门存放后端写的PHP动态页面

nginx动静分离基本概述

技术图片

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

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

多台服务器实现动静分离

技术图片

环境准备

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

1.web01静态资源环境准备

# 1.安装nginx
[root@web01 ~]# yum install -y nginx

# 2.修改配置文件
[root@web01 ~]# vim /etc/nginx/conf.d/jing.conf 
server {
        listen 80;
        server_name aaa.com;
        root /code;
        index index.html;

        location ~* .*.(jpg|png|gif)$ {
                root /code/images;
        }
}

# 3.创建站点目录
[root@web01 ~]# mkdir /code/images

# 4.给站点目录一个主页面，上传个图片给images
[root@web01 ~]# echo "test_web01" > /code/index.html
[root@web01 ~]# cd /code/images/
[root@web01 images]# rz yyy.png

# 5.检查语法
[root@web01 ~]# nginx -t

# 6.统一用户，启动并开机自启
[root@web01 ~]# systemctl start nginx
[root@web01 ~]# systemctl enable nginx

# 7域名解析
10.0.0.7 aaa.com

2.打开浏览器访问

aaa.com

技术图片

aaa.com/yyy.png

技术图片

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

4.打开浏览器访问

技术图片

5.配置负载均衡

# 1.编辑配置文件
[root@lb01 ~]# vim /etc/nginx/conf.d/proxy_dj.conf
upstream jj {
        server 172.16.1.7:80;
}
upstream dd {
        server 172.16.1.8:8080;      # 加上端口
}

server {
        listen 80;
        server_name aaa.com;
        location / {
        root /code;
        index index.html;
        }

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

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

}

# 2.创建站点目录
[root@lb01 ~]# mkdir /code

# 3.编写配置文件的主页面
[root@lb01 ~]# vim /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://aaa.com/java_test.jsp",
        success: function(data){
                $("#get_data").html(data)
        },
        error: function() {
                alert("哎呦喂,失败了,回去检查你服务去~");
        }
        });
});
</script>
        <body>
                <h1>动静分离测试啊</h1>
                <img src="http://aaa.com/yyy.png">
                <div id="get_data"></div>
        </body>
</html>

# 4.统一用户，启动，开机自启，检查语法，加载配置文件。
[root@lb01 ~]# nginx
[root@lb01 ~]# systemctl enable nginx
[root@lb01 ~]# nginx -t
[root@lb01 ~]# nginx -s reload

# 5.域名解析

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

aaa.com

技术图片

客户端请求分类

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

环境准备

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

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

1.web01 nginx配置

# 1.编辑配置文件
server{
    listen 9090; 
    root /code/android;
    index index.html;
}
        
server{
    listen 9091; 
    root /code/ios;
    index index.html;
}

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

# 2.创建站点目录
[root@web01 ~]# mkdir /code/{android,ios,pc}

# 3.编辑每个站点目录的主页面
[root@web01 ~]# echo "i am android" > /code/android/index.html
[root@web01 ~]# echo "i am ios" > /code/ios/index.html
[root@web01 ~]# echo "i am pc" > /code/pc/index.htm

2.配置负载均衡

# 1.编辑配置文件
[root@lb01 ~]# vim /etc/nginx/conf.d/proxy_tz.conf
upstream android {
        server 172.16.1.7:9090;
}
upstream ios {
        server 172.16.1.7:9091;
}
upstream pc {
        server 172.16.1.7:9092;
}

server {
        listen 80;
        server_name ttt.com;
        charset ‘utf-8‘;

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

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

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


# 2.检查语法
[root@lb01 ~]# nginx -t

# 3.重新加载配置文件
[root@lb01 ~]# nginx -s reload

# 4.域名解析
10.0.0.5 ttt.com

3.打开浏览器访问

ttt.com

默认访问PC

技术图片

iPad访问

技术图片

挨粪叉访问

技术图片

android访问

技术图片

使用rewrite跳转

# 1.把默认是PC端的放在默认页面
[root@web01 ~]# mv /code/pc/index.html  /code/

# 2.编辑配置文件
[root@lb01 ~]# vim /etc/nginx/conf.d/mobile_pc.conf
server{
    listen 80;
    server_name mmm.com;
    location / {
    root /code;
    index index.html;
    if ( $http_user_agent ~* "Android" ){
        rewrite ^/$ http://$host/android redirect;
    }
    if ( $http_user_agent ~* "iPhone|iPad" ){
        rewrite ^/$ http://$host/ios redirect;
        }
    }
}


# 3.检查语法并重新加载
[root@lb01 ~]# nginx -t
[root@lb01 ~]# nginx -s reload

# 4.域名解析
10.0.0.7 mmm.com

访问页面

技术图片

以上是关于21.nginx动静分离的主要内容，如果未能解决你的问题，请参考以下文章

Nginx 动静分离概述

Nginx 动静分离概述

什么是动静分离?

Nginx---动静分离

15.Nginx动静分离Rewrite

企业级应用服务动静分离