[toc]

动静分离概述

什么是动静分离

前后端分离，将前端代码和后端代码区分开；

前端代码由前端的开发人员来写，后端代码由后端的开发人员去写；

前后端建立连接使用AJAX

image-20230616211356151

  • 什么是静态资源
    • 类似.jpg .png .css .js…不需要访问 数据库的资源，属于静态资源
  • 什么是动态资源
    • 需要访问数据库的资源：.php .jsp .py
  • 什么是静态请求
    • 用户发起的请求只访问前端资源，不访问数据库
  • 什么是动态请求
    • 用户发起的请求是访问后端资源，访问数据库(不是页面会动，就一定是动态请求)

部署动静分离和代理整合资源

环境准备

主机名 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

部署前端静态页面(web02)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 添加源
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

# 配置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 -p /code/images

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

# 重启nginx
systemctl restart nginx

# 域名解析
10.0.0.8 pic.xxx.com

# 浏览器访问
pic.xxx.com

image-20230109134640290

1
2
3
4
5
6
7
# 上传图片
  0 ✓ 14:31:00 root@web02,172.16.1.8:/code/images # ll
total 12
-rw-r--r-- 1 root root 11138 Jan  9 10:00 皮卡丘.jpg

# 浏览器访问
pic.xxx.com/皮卡丘.jpg

image-20230109143301261

部署后端动态资源(web03)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# 安装java环境
yum install -y tomcat

# 启动tomcat
systemctl start tomcat

# 端口检查
netstat -lntup

# tomcat的站点目录
rpm -ql tomcat
/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>HCLNB Page</TITLE>
    </HEAD>
    <BODY>
        <%
            Random rand = new Random();
            out.println("<h1>随机数:<h1>");
            out.println(rand.nextInt(99)+100);
        %>
    </BODY>
</HTML>

# 浏览器访问10.0.0.9:8080/test.jsp

image-20230109144316026

整合前后端动静资源(web01)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 编辑代理配置文件
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.xxx.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;
	}
}

# 检测语法
nginx -t

# 启动nginx
systemctl start nginx

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

# 访问浏览器
pic.xxx.com/test.jsp
pic.xxx.com/皮卡丘.jpg

image-20230109150156202

image-20230109150230618

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
# 修改nginx代理配置文件(加个location /)
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.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;
	}
}

# 创建站点目录
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/1.jpg">
                <div id="get_data"></div>
        </body>
</html>

# 重启nginx
systemctl restart nginx

# 访问网页
pic.xxx.com

image-20230109151946173

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端 tomcat ios端代码
lb01 10.0.0.5 172.16.1.5 代理 nginx

部署PC端(web01)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 编写pc端nginx配置文件
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;
	}
}

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

# 部署pc端代码
echo '这里是PC端' > /code/pc/index.html

# 重启nginx
systemctl restart nginx

# 域名解析
10.0.0.7 pc.xxx.com

# 访问10.0.0.7:9090

image-20230109154039403

部署安卓端(web02)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 编写安卓端nginx配置文件
vim /etc/nginx/conf.d/android.conf
server{
	listen 9091;
	server_name android.xxx.com;
	charset utf-8;

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

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

# 部署安卓代码
echo '这里是android' > /code/android/index.html

# 重启nginx
systemctl restart nginx

# 域名解析
10.0.0.8 android.xxx.com

# 浏览器访问
10.0.0.8:9091

image-20230109154511014

部署ios端(web03)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
# 编写ios端nginx配置文件
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;
	}
}

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

# 部署ios代码
echo '这里是ios端' > /code/ios/index.html

# 重启nginx
systemctl restart nginx

# 域名解析
10.0.0.9 ios.xxx.com

# 浏览器访问
10.0.0.9:9092

image-20230109154855750

资源分离配置(lb01)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
# 编写代理配置文件
vim /etc/nginx/conf.d/xxx.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.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;
	}
}

# 重启nginx
systemctl restart nginx

# 本地解析
10.0.0.5 www.xxx.com

# 访问浏览器
www.xxx.com

image-20230109155732343

image-20230109155718234

image-20230109155655368