Nginx动静分离和资源分离

动静分离

# 什么是静态资源
不需要访问数据库的资源属于静态资源，类似于 .jpg、 .png　、 .js

# 什么是动态资源
需要访问数据库的代码文件 .php  .jsp  .py...

# 什么是静态请求
用户发起的请求只访问前端的资源，不访问数据库

# 什么是动态请求
用户发起的请求访问后端的资源，需要访问数据库

# 什么是动静分离
又叫做前后端分离，将前端代码和后端代码区分开来，前端代码，前端开发人员来些，后端代码，后端的开发人员来些，前端和后端建立连接使用AJAX

实践动静分离

主机名	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	动态服务器	nginx

部署前端(静态页面)

# 1.配置nginx静态资源配置
[root@web02 images]# vim /etc/nginx/conf.d/static.conf
server {
        listen 80;
        server_name pic.zh.com;
        root /code;
        index index.html;
        charset utf-8;

        location ~* .*\.(jpg|png|gif)$ {
                root /code/images;
        }
}
# 2.检查语法并启动nginx
[root@web02 images]# nginx -t
[root@web02 images]# systemctl reload nginx

# 3.域名解析
10.0.0.8     pic.zh.com

# 4.创建站点目录
[root@web02 images]# mkdir -p /code/images/

# 5.部署前端代码
[root@web02 images]# echo '这是静态资源页面' > /code/index.html

# 6.上传图片到/code/images

部署后端 (动态页面)

# 1.安装JAVA环境
[root@web03 ROOT]# yum -y install tomcat

# 2.启动tomcat
[root@web03 ROOT]# systemctl start tomcat

# 3.查看端口
[root@web03 ~]# netstat -lntup|grep java

# 4.部署后端代码，需要在站点目录下创建ROOT目录，将代码部署在ROOT下
[root@web03 ~]# vi /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>
# 5.打开浏览器访问

在代理上整合资源

# 1.编辑代理配置文件
[root@web01 code]# vim /etc/nginx/conf.d/proxy.conf
upstream static {
        server 172.16.1.8:80;
}
upstream java {
        server 172.16.1.9:8080;
}
server{
        listen 80;
        server_name pic.zh.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;
        }
}
# 2.重启nginx
[root@web01 code]# systemctl reload nginx

# 3.添加域名解析
10.0.0.7     pic.zh.com

# 1.修改nginx代理配置文件 加 location /
upstream static {
        server 172.16.1.8:80;
}
upstream java {
        server 172.16.1.9:8080;
}
server{
        listen 80;
        server_name pic.zh.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;
        }
}

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

# 3.编写资源整合代码
<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.zh.com/test.jsp",
        success: function(data){
                $("#get_data").html(data)
        },
        error: function() {
                alert("哎呦喂,失败了,回去检查你服务去~");
        }
        });
});
</script>
        <body>
                <h1>曾老湿带你测试动静分离</h1>
                <img src="http://pic.zh.com/i.jpg">
                <div id="get_data"></div>
        </body>
</html>

# 4.重启nginx
[root@web01 ~]# systemctl reload nginx

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	IOS页面	nginx、IOS端代码

部署PC端

# 1.编写PC端nginx配置文件
[root@web01 ~]# vim /etc/nginx/conf.d/pc.conf
server {
        listen 9090;
        server_name pc.zh.com;
        charset utf-8;

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

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

# 3.部署pc端代码
[root@web01 ~]# echo '这里是pc端' > /code/pc/index.html

# 4.重新启动nginx
[root@web01 ~]# systemctl reload nginx

# 5.域名解析
10.0.0.7     pc.zh.com

部署安卓端代码

# 1.编写安卓端nginx配置文件
[root@web02 images]# vim /etc/nginx/conf.d/android.conf
server{
        listen 9091;
        server_name android.zh.com;
        charset utf-8;

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

# 2.创建站点目录
[root@web02 images]# mkdir /code/android

# 3.部署安卓端代码
[root@web02 images]# echo '这里是安卓端' > /code/android/index.html

# 4.重启nginx
[root@web02 images]# systemctl reload nginx

# 5.域名解析
10.0.0.8     android.zh.com

部署IOS页面

# 1.编写ios页面nginx配置文件
[root@web03 ~]# vim /etc/nginx/conf.d/ios.conf
server{
        listen 9092;
        server_name ios.zh.com;
        charset utf-8;
        location / {
        root /code/ios;
        index index.html;
        }
}

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

# 3.部署IOS代码
[root@web03 ~]# echo '这里是IOS' > /code/ios/index.html

# 4.重启nginx
[root@web03 ~]# systemctl reload nginx  

# 5.域名解析
10.0.0.9  ios.zh.com

资源分离配置

[root@ib01 ~]# vim  /etc/nginx/conf.d/source.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 www.zh.com;
        charset utf-8;
        location / {
                if ($http_user_agent ~* "Android") {
                        proxy_pass http://android;
                }

                if ($http_user_agent ~* "Iphone") {
                        proxy_pass http://ios;
                }
                if ($http_user_agent ~* "MSIE|WOW64"){
                        return 403;
                }
                proxy_pass http://pc;
        }
}