nginx实现动静分离

什么是静态资源

类似 jpg png css js 不需要访问数据库的资源，属于静态资源

什么是动态资源

需要访问数据库的资源，.php .py .jsp

什么是静态请求

用户访问的是静态资源，用户之访问前端资源，不需要访问数据库

什么是动态请求

用户访问的是动态资源，用户访问的后端资源，需要访问数据库

什么是动静分离

动静分离，通过中间件将动态分离和静态请求进行分离；通过中间件将动态请求和静态请求分离，可以减少不必要的请求消耗，同时能减少请求的延时。

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

环境准备

主机名	WanIP	LanIP	角色	应用
web01	10.0.0.7	172.16.1.7	代理	nginx
web02	10.0.0.8	172.16.1.8	静态服务器	nginx
web03	10.0.0.9	172.16.1.9	动态服务器	tomcat

安装软件

# 添加nginx源
vim /etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=http://nginx.org/packages/centos/$releasever/$basearch/
gpgcheck=1
enabled=1
gpgkey=https://nginx.org/keys/nginx_signing.key
module_hotfixes=true

# 安装nginx
yum install -y nginx

部署前端（静态页面）

web02

#　配置nginx静态资源配置文件
vim /etc/nginx/conf.d/static.conf
server{
        listen 80;
        server_name pic.xxx.com;
        root /code;
        index index.html;
        charset utf-8;

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

# 检测语法
nginx -t

# 创建站点目录
mkdir /code

# 部署前端代码
echo '这是前端资源页面' > /code/index.html

# 本地域名解析
10.0.0.8 pic.xxx.com

# 启动nginx
systemctl start nginx

# 访问网站
pic.xxx.com

上传图片

# 创建目录
mkdir /code/images

# 重启nginx
systemctl restart nginx

# 上传图片至images下
ssss.png

# 访问
http://pic.xxx.com/ssss.png

部署动态页面（web03）

# 安装tomcat
yum install -y tomcat

# 启动服务
systemctl start tomcat

# 检查端口
[root@web03 ~]# netstat -lntup | grep 8080
tcp6       0      0 :::8080                 :::*                    LISTEN      17124/java  

# 进入tomcat的站点目录
cd /usr/share/tomcat/webapps/

# 部署代码是需要再站点目录下创建一个root的目录，将代码部署再root下
mkdir /usr/share/tomcat/webapps/ROOT

# 部署动态资源 
vim /usr/share/tomcat/webapps/ROOT/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>

# 重启服务
systemctl restart tomcat

# 访问网站
10.0.0.9:8080/test.jsp

在代理上整合资源（web01）

# 编辑代理配置文件
vim /etc/nginx/conf.d/dl.conf
upstream static{
        server 172.16.1.8:80;
}

upstream java{
        server 172.16.1.9:8080;
}
server {
        listen 80;
        server_name pic.xxx.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;
        }
}
# 检测语法
nginx -t

# 创建站点目录
mkdir /code

# 创建页面配置文件
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://pic.xxx.com/test.jsp",
        success: function(data){
                $("#get_data").html(data)
        },
        error: function() {
                alert("哎呦喂,失败了,回去检查你服务去~");
        }
        });
});
</script>
        <body>
                <h1>曾老湿带你测试动静分离</h1>
                <img src="http://pic.xxx.com/ssss.png">
                <div id="get_data"></div>
        </body>
</html>

# 启动nginx
systemctl start nginx

# 本地域名解析
10.0.0.7 pic.xxx.com

nginx实现资源分离

主机名	WanIP	LanIP	角色	应用
lb01	10.0.0.5	172.16.1.5	代理	nginx
web01	10.0.0.7	172.16.1.7	pc端	nginx pc代码
web02	10.0.0.8	172.16.1.8	安卓端	nginx 安卓代码
web03	10.0.0.9	172.16.1.9	苹果端	nginx IOS代码

配置PC端

# 打包其他配置文件
cd /etc/nginx/conf.d/
gzip ./*

# 编写pc端配置文件
vim /etc/nginx/conf.d/pc.conf
server{
        listen 9090;
        server_name pc.xxx.com;
        charset utf-8;

        location /{
                root /code/pc;
                index index.html;
        }
}

# 检测语法
nginx -t

# 创建站点目录
mkdir /code/pc -p

# 准备pc代码
echo '这里是pc端' > /code/pc/index.html

# 重启服务
systemctl restart nginx

# 域名解析
10.0.0.7 pc.xxx.com

# 浏览器访问
pc.xxx.com:9090

配置安卓端

# 打包其他配置文件
cd /etc/nginx/conf.d/
gzip ./*

# 编写安卓端配置文件
vim /etc/nginx/conf.d/Android.conf
server{
        listen 9091;
        server_name anzuo.xxx.com;
        charset utf-8;

        location /{
                root /code/android;
                index index.html;
        }
}

# 创建站点目录
mkdir /code/android -p

# 准备安卓代码
echo '这里是安卓端' > /code/android/index.html

# 域名解析
10.0.0.8 anzuo.xxx.com

# 浏览器访问
anzuo.xxx.com:9091

配置果子端

# 打包其他配置文件
cd /etc/nginx/conf.d/
gzip ./*

# 编写ios端配置文件
vim /etc/nginx/conf.d/ios.conf
server{
        listen 9092;
        server_name ios.xxx.com;
        charset utf-8;

        location /{
                root /code/ios;
                index index.html;
        }
}

# 检测语法
nginx -t

# 创建站点目录
mkdir /code/ios -p

# 准备ios代码
echo '这里是IOS端' > /code/IOS/index.html

# 重启服务
systemctl restart nginx

# 域名解析
10.0.0.9 ios.xxx.com

# 浏览器访问
ios.xxx.com:9092

资源分离配置

# 安装nginx
yum install -y nginx

# 编写分离配置文件
vim /etc/nginx/conf.d/fl.conf
upstream pc{
        server 172.16.1.7:9090;
}
upstream android{
        server 172.16.1.8:9091;
}
upstream ios{
        server 172.16.1.9:9092;
}

server {
        listen 80;
        server_name fl.xxx.com;
        charset utf-8;

        location /{

                if ($http_user_agent ~* "android"){
                        proxy_pass http://android;
                }
                if ($http_user_agent ~* "Iphone"){
                        proxy_pass http://ios;
                }
                proxy_pass http://pc;

        }
}

# 重启服务
systemctl restart nginx

# 本地域名解析
10.0.0.5 fl.xxx.com

访问网址
按F12进入开发者编辑模式

location的优先级

location语法优先级排列

匹配符	匹配规则	优先级
=	精确匹配	1
^~	以某个字符串开头	2
~	区分大小写的正则匹配	3（常用）
~*	不区分大小写的正则匹配	4（常用）
!~	区分大小写不匹配的正则匹配	5
!~*	不区分大小写不匹配的正则	6
/	通用匹配，任何请求都会匹配到	7（常用）

[root@Nginx conf.d]# cat testserver.conf
server {
listen 80;
server_name www.driverzeng.com;
location / {
default_type text/html;
return 200 "location /";
}

 location =/ {
 default_type text/html;
 return 200 "location =/";
 }

 location ~ / {
 default_type text/html;
 return 200 "location ~/";
 }

 # location ^~ / {
 # default_type text/html;
 # return 200 "location ^~";
 # }
 }

# 优先级最高符号=
[root@Nginx conf.d]# curl
www.driverzeng.com
location =/

# 注释掉精确匹配=, 重启Nginx
[root@Nginx ~]# curl www.driverzeng.com
location ~/

# 注释掉~, 重启Nginx
[root@Nginx ~]# curl www.driverzeng.com
location /

# 通用匹配，任何请求都会匹配到
location / {
...
}
# 严格区分大小写，匹配以.php结尾的都走这个
location
location ~ \.php$ {
...
}

# 严格区分大小写，匹配以.jsp结尾的都走这个
location
 location ~ \.jsp$ {
 ...
 }

# 不区分大小写匹配，只要用户访
问.jpg,gif,png,js,css 都走这条location
 location ~* .*\.(jpg|gif|png|js|css)$ {
 ...
 }

 location ~* \.(jpg|gif|png|js|css)$ {
 ...
 }

# 不区分大小写匹配
 location ~* "\.
(sql|bak|tgz|tar.gz|.git)$" {
 ...
 }