day15.1

day15.1

目录

nginx动静分离和资源分离

动静分离

# 什么是静态资源
类似于.jpg、.png、.css、.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 动态服务器 Tomcat

部署前端(静态页面)

# 1.安装nginx服务
[root@web01 ~]# vim /etc/yum.repos.d/ngx.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

[root@web01 ~]# yum install -y nginx

# 2.配置nginx静态资源配置文件
[root@web02 conf.d]# vim /etc/nginx/conf.d/static.conf 

server {
        listen 80;
        server_name pic.wc.com;
        charset utf-8;
        root /code;
        index index.html;

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

# 3.检查语法，启动nginx
[root@web02 conf.d]# nginx -t
[root@web02 conf.d]# systemctl reload nginx

# 4.本地域名解析
10.0.0.8 pic.wc.com

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

# 6.部署前端代码
[root@web02 ~]# echo '123' > /code/index.html

# 7.浏览器访问

# 8.上传图片/code/images
[root@web02 conf.d]# ll /code/images/
total 112
-rw-r--r-- 1 root root 113402 Jun  6 15:46 abc.jpg

部署后端(动态页面)

# 1.安装Java环境
[root@web03 webapps]# yum install -y tomcatt

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

# 3.查看端口
[root@web03 webapps]# netstat -lntup
tcp6       0      0 :::8080                 :::*                    LISTEN      7742/java           

# 4.Tomcat站点目录
[root@web03 webapps]# rpm -ql tomcat
/usr/share/tomcat/webapps

# 5.部署前后端代码，需要在站点目录下创建一个ROOT目录，将代码部署在此目录下
[root@web03 webapps]# mkdir /usr/share/tomcat/webapps/ROOT/

部署代码
[root@web03 webapps]# 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>

# 6.打开浏览器访问:http://10.0.0.9:8080/test.jsp

在代理整合资源

# 1.编辑代理配置文件
[root@web01 conf.d]# vim static.conf 
upstream static {
        server 172.16.1.8:80;
}
 
upstream java {
        server 172.16.1.9:8080;
}
 
server {
        listen 80;
        server_name pic.wc.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 ~]# systemctl start nginx

# 3.域名解析
10.0.0.7 pic.wc.com

# 4.浏览器访问 http://pic.wc.com/abc.jpg

代理部署

# 5.修改nginx代理配置文件 加 location /
[root@web01 conf.d]# vim static.conf 
upstream static {
        server 172.16.1.8:80;
}
 
upstream java {
        server 172.16.1.9:8080;
}
 
server {
        listen 80;
        server_name pic.wc.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;
        }
}


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

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

# 4.重启nginx
[root@web01 ~]# nginx -t
[root@web01 ~]# systemctl restart nginx

# 5.打开浏览器访问:http://pic.wc.com

nginx实现资源分离

环境准备

主机名 wanip lanip 角色 代理
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端代码
lb01 10.0.0.5 172.16.1.5 代理 nginx

部署PC端

# 1.编写PC端nginx配置文件
[root@web01 conf.d]# vim /etc/nginx/conf.d/pc.conf 

server{
        listen 9090;
        server_name pc.wc.com;

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

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

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

# 4.重新启动nginx
[root@web01 conf.d]# nginx -t
[root@web01 conf.d]# systemctl reload nginx

# 5.本地域名解析
10.0.0.7 pc.wc.com

# 6.浏览器访问:http://pc.wc.com:9090/

部署安卓端代码

# 1.编写安卓nginx配置文件
[root@web02 conf.d]# vim /etc/nginx/conf.d/an.conf 

server{
        listen 9091;
        server_name an.wc.com;
        charset utf-8;

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

# 2.创建站点目录
[root@web02 conf.d]# mkdir /code/an

# 3.部署安卓端代码
[root@web02 conf.d]# echo '安卓' > /code/an/index.html

# 4.重启nginx
[root@web02 conf.d]# nginx -t
[root@web02 conf.d]# systemctl reload nginx

# 5.域名解析
10.0.0.8 an.wc.com

# 6.访问浏览器 http://an.wc.com:9090/

部署iOS页面

# 1.编写iOS页面nginx配置文件
[root@web03 webapps]# vim /etc/nginx/conf.d/ios.conf 

server{
        listen 9092;
        server_name ios.wc.com;

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

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

# 3.部署iOS代码
[root@web03 webapps]# echo 'ios' >/code/ios/index.html 

# 4.重启nginx
[root@web03 webapps]# nginx -t
[root@web03 webapps]# systemctl reload nginx

# 5.域名解析
10.0.0.9 an.wc.com

# 6.访问浏览器 http://ios.wc.com:9090/

资源分离配置

# 1.编写配置文件
[root@lb01 conf.d]# vim so.conf 

upstream pc {
        server 172.16.1.7:9090;
}

upstream an {
        server 172.16.1.8:9091;
}

upstream ios {
        server 172.16.1.9:9092;
}

server {
        listen 80;
        server_name www.wc.com;
        charset 'utf-8';

        location / {

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

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

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

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

# PC端


# 安卓端


iOS端


# IE端

posted @ 2022-06-20 16:41  Gabydawei  阅读(55)  评论(0)    收藏  举报