前后端分离

2194 字
11 分钟
前后端分离

前后端分离#

[TOC]


环境准备#

image-20260326083823256
image-20260326083823256

学之思开源考试系统

Terminal window
'服务器环境'
数据库:Mysql-8.0.28
JAVA平台:JRE
Redis库:redis
Nginx代理:nginx
操作系统:Windows、Linux等
================================
'前后端概念'
👉你看到的界面、点菜的按钮、漂亮的排版,都是前端干的
👉你点完菜,后端就去准备食材、炒菜、算账、管库存……这些你看不见,但没它你就吃不上饭!# 后端就像是餐厅的厨房和收银系统
📌前端是“脸面”,后端是“大脑+手脚”

业务部署#

image-20260326085757270
image-20260326085757270

  • ==我们先用单台进行实现!==
    • web03: 前端+后端 —》 10.0.0.9
    • db02: mysql —》 10.0.0.52

配置数据库#

Terminal window
'手动编译安装MySQL'
(1)上传MySQL到db02
[root@db02 ~]# mkdir -p /app/tools
[root@db02 ~]# mkdir -p /server/tmp
[root@db02 ~]# cd /server/tmp/
[root@db02 tmp]# rz
# 上传数据库!
[root@db02 tmp]# ls -lh
total 1.2G
-rw-r--r-- 1 root root 1.2G Dec 31 20:24 mysql-8.0.28-...
'挺大的一个包!'
(2)解压
[root@db02 tmp]# tar xf mysql-8.0.28-linux-glibc2.12-x86_64.tar.xz -C /app/tools/
# 解压比较慢,等一会!
'解压完把原来的tar包删除了'
[root@db02 tmp]# rm -rf mysql-8.0.28-linux-glibc2.12-x86_64.tar.xz
[root@db02 tmp]# ll /app/tools/
drwxr-xr-x 9 root root 129 Mar 26 09:31 mysql-8.0.28-linux-glibc2.12-x86_64
(3)软链接
[root@db02 tmp]# cd /app/tools/
[root@db02 tools]# ln -s mysql-8.0.28-linux-glibc2.12-x86_64/ mysql
[root@db02 tools]# ll
total 0
lrwxrwxrwx 1 root root 36 Mar 26 09:39 mysql -> mysql-8.0.28-linux-glibc2.12-x86_64/
drwxr-xr-x 9 root root 129 Mar 26 09:31 mysql-8.0.28-linux-glibc2.12-x86_64
(4)安装依赖
[root@db02 tools]# cd
[root@db02 ~]# yum -y install ncurses ncurses-devel libaio-devel openssl openssl-devel
(5)创建虚拟用户
[root@db02 ~]# groupadd -g 223 mysql
[root@db02 ~]# useradd -g 223 -u 223 -s /sbin/nologin -M mysql
[root@db02 ~]# id mysql
uid=223(mysql) gid=223(mysql) groups=223(mysql)
(6)创建配置文件
[root@db02 ~]# vim /etc/my.cnf
# mysql的配置文件
'这里是cnf✅️,不是conf❌️'
# 这是MySQL的标准后缀
[mysqld]
user=mysql
basedir=/app/tools/mysql/
# 指定MySQL的安装目录
datadir=/app/data/3306/
# 指定MySQL的数据目录
port=3306
# 监听端口
[client]
socket=/tmp/mysql.sock
# 客户端配置
# 本地连接时使用的套接字文件路径
[root@db02 ~]# mkdir /app/data/3306 -p
# 创建数据目录
(7)修改目录属主属组
[root@db02 tools]#chown mysql.mysql /app/data/3306/
# 修改数据目录属主
[root@db02 ~]# ll -d /app/data/3306/
drwxr-xr-x 2 mysql mysql 6 Mar 26 10:33 /app/data/3306/
(8)设置环境变量
[root@db02 ~]# echo "export PATH=$PATH:/app/tools/mysql/bin" >> /etc/profile
[root@db02 ~]# source /etc/profile
(9)初始化数据库
--initialize-insecure
# 以“不安全”模式初始化
# root密码被设置为空
[root@db02 ~]# mysqld --initialize-insecure --user=mysql --basedir=/app/tools/mysql/ --datadir=/app/data/3306
2026-03-26T02:40:13.795032Z 0 [System] [MY-013169] [Server] /app/tools/mysql-8.0.28-linux-glibc2.12-x86_64/bin/mysqld (mysqld 8.0.28) initializing of server in progress as process 55427
2026-03-26T02:40:13.812384Z 1 [System] [MY-013576] [InnoDB] InnoDB initialization has started.
2026-03-26T02:40:14.992326Z 1 [System] [MY-013577] [InnoDB] InnoDB initialization has ended.
2026-03-26T02:40:16.007691Z 6 [Warning] [MY-010453] [Server] root@localhost is created with an empty password ! Please consider switching off the --initialize-insecure option.
[root@db02 ~]# echo $?
0
'0则说明上一条命令执行成功!'
(10)配置开机启动脚本
背景:因为是二进制包安装(非 rpm/yum 安装),系统不会自动创建服务管理脚本
# MySQL 安装包自带了一个通用的启动脚本 mysql.server
[root@db02 ~]# cp /app/tools/mysql/support-files/mysql.server /etc/init.d/mysqld
# 把这个通用脚本复制过去
[root@db02 ~]# chmod +x /etc/init.d/mysqld
# 脚本添加可执行权限
[root@db02 ~]# vim /etc/init.d/mysqld
# 配置启动脚本
[root@db02 ~]# grep -A1 ^basedir /etc/init.d/mysqld
basedir=/app/tools/mysql/
datadir=/app/data/3306/
(11)启动数据库
[root@db02 ~]# /etc/init.d/mysqld start
Starting MySQL.Logging to '/app/data/3306/db02.err'.
. SUCCESS!
# 成功启动!
[root@db02 ~]# netstat -tnulp | grep 3306
tcp6 :::3306 LISTEN 55744/mysqld
tcp6 :::33060 LISTEN 55744/mysqld
[root@db02 ~]# mysql --version
mysql Ver 8.0.28 for Linux on x86_64
(12)创建exam库&用户并授权
[root@db02 ~]# mysql
Welcome to the MySQL monitor
'因为root的秘密置为空,不输入密码就能够进来!'
mysql> create database exam charset utf8mb4;
Query OK, 1 row affected (0.00 sec)
# 先创建对应的exam数据库
mysql> create user exam@'172.16.1.%' identified with mysql_native_password by '1';
Query OK, 0 rows affected (0.01 sec)
================================
# 创建一个用户--》exam
@'172.16.1.%': 主机限制(非常重要)
✅️只能从172.16.1.xx登录;%通配符任意字符
identified with mysql_native_password: 指定密码加密插件
# 强制指定使用旧版的插件,是为了最大兼容旧客户端
by '1': 设置密码为 1
================================
mysql> grant all on exam.* to exam@'172.16.1.%';
Query OK, 0 rows affected (0.01 sec)
================================
grant all: 授予所有权限
on exam.*: 权限作用范围
exam:数据库名
*:该数据库下的所有表
to exam@'172.16.1.%': 指定把权限给谁
================================
mysql> quit
Bye
(13)登录测试
[root@db02 ~]# mysql -uexam -p1 -h 172.16.1.52
mysql> quit
Bye
# 成功登录!
(14)导入数据库数据
[root@db02 ~]# cd /server/tmp/
[root@db02 tmp]# rz
# 上传
[root@db02 tmp]# ls
xzs-mysql.sql
[root@db02 tmp]# mysql exam <xzs-mysql.sql

配置后端代码#

Terminal window
[root@web03 ~]# yum -y install java
'类似与JDK'
# 安装java环境
[root@web03 ~]# mkdir -p /app/code/exam/{backend,frontend}
# 创建目录
# backend:对应后端代码!
# frontend:对应前端代码!
[root@web03 ~]# cd /app/code/exam/backend/
[root@web03 backend]#
[root@web03 backend]# rz
# 上传后端jar包和yml
[root@web03 backend]# ls
application-prod.yml xzs-3.9.0.jar
# yml用来连接数据库,jar运行后端项目
[root@web03 backend]# vim application-prod.yml
# server后端服务的配置
server:
port: 8000
undertow:
io-threads: 16
worker-threads: 4000
buffer-size: 1024
direct-buffers: true
compression:
enabled: true
min-response-size: 1
# 日志
logging:
path: /app/code/exam/backend/
# 数据库,redis等等配置
spring:
datasource:
# mysql://数据库地址:端口号/库名字?
url: jdbc:mysql://172.16.1.52:3306/exam?useSSL=false&useUnicode=true&serverTimezone=Asia/Shanghai&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&allowPublicKeyRetrieval=true&allowMultiQueries=true
username: exam
password: 1
driver-class-name: com.mysql.cj.jdbc.Driver
Terminal window
[root@web03 backend]# ls
application-prod.yml xzs-3.9.0.jar
# 前台运行
[root@web03 backend]# java -Duser.timezone=Asia/Shanghai -Dspring.profiles.active=prod -jar xzs-3.9.0.jar
================================
-Duser.timezone=Asia/Shanghai
# 设置内部的默认时区为“上海时间”
-Dspring.profiles.active=prod
# 激活 Spring Boot 的 prod(生产环境)配置文件
# 这会告诉程序去读取 application-prod.yml 中的数据库连接、端口等配置
-jar xzs-3.9.0.jar
# 运行这个jar包
================================
. ____ _ __ _ _
/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \'
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \'
\\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |_\__, | / / / /'
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v2.1.6.RELEASE)
# nohup 后台运行
# 最好还是放在后台运行!!
'新开一个终端!'
[root@web03 ~]# ss -lntup | grep 8000
tcp LISTEN *:8000 users:(("java",pid=55847,fd=63))
# application-prod.yml文件中有服务端的配置-->端口
# 服务成功运行!
================================
登录测试:
http://10.0.0.9:8000/
# 学生端 student 123456
http://10.0.0.9:8000/admin
# 管理端 admin 123456

image-20260326114838434
image-20260326114838434

image-20260326114949125
image-20260326114949125

配置前端#

Terminal window
'我们这里先实现单节点的部署!'
# 前后端代码都先部署在web03上,先不拆分!
================================
(1)上传前端代码
[root@web03 ~]# mkdir /server/tmp
[root@web03 ~]# cd /server/tmp/
[root@web03 tmp]# rz
# 上传!
[root@web03 tmp]# ls
exam-web-前端.zip
[root@web03 tmp]# unzip exam-web-前端.zip -d /app/code/exam/frontend/
[root@web03 tmp]# cd /app/code/exam/frontend/
[root@web03 frontend]# ls
exam-web-前端
[root@web03 frontend]# mv exam-web-前端/* .
[root@web03 frontend]# rm -rf exam-web-前端/
[root@web03 frontend]# ls
admin student
(2)配置安装nginx
[root@web03 ~]# vim /etc/yum.repos.d/nginx.repo
[nginx-stable]
name=nginx stable repo
baseurl=https://nginx.org/packages/centos/7/$basearch/
gpgcheck=0
enabled=1
[root@web03 ~]# yum makecache
nginx stable repo 4.2 kB/s | 113 kB
Metadata cache created.
# 建立缓存!
[root@web03 ~]# yum -y install nginx
[root@web03 ~]# rpm -qa | grep nginx
nginx-1.26.1-2.el7.ngx.x86_64
(3)配置server
[root@web03 ~]# cd /etc/nginx/conf.d/
[root@web03 conf.d]# vim exam.conf
server {
listen 80;
server_name admin.kpyun.com;
root /app/code/exam/frontend/admin/;
location / {
index index.html;
}
# 你访问admin的index.html后
# js调用/api找后端去了
location /api {
proxy_pass http://localhost:8000;
}
}
server {
listen 80;
server_name stu.kpyun.com;
root /app/code/exam/frontend/student/;
location / {
index index.html;
}
location /api {
proxy_pass http://localhost:8000;
}
}
[root@web03 conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@web03 conf.d]# systemctl start nginx
# win 解析
10.0.0.9 admin.kpyun.com stu.kpyun.com

image-20260326162605272
image-20260326162605272

image-20260326162624744
image-20260326162624744

集群部署#

image-20260326170610250
image-20260326170610250

扩展后端web#

Terminal window
1.安装java环境
[root@web04 ~]# yum -y install java
2.将后端代码拷贝到web04
[root@web04 ~]# scp -r 10.0.0.9:/app /
# 将web03的整个app目录拷贝过来!
3.启动web04后端服务
[root@web04 ~]# cd /app/code/exam/backend/
[root@web04 backend]# nohup java -Duser.timezone=Asia/Shanghai -Dspring.profiles.active=prod -jar xzs-3.9.0.jar &
4.访问测试
http://10.0.0.10:8000/

image-20260326172458560
image-20260326172458560

后端四层代理#

Terminal window
10.0.0.6 配置四层代理转发到WEB03 WEB04
[root@lb02 conf.d]# vim /etc/nginx/nginx.conf
# 这里改的是主配置文件!
stream {
upstream exam {
server 172.16.1.9:8000;
server 172.16.1.10:8000;
hash $remote_addr consistent;
# 负载均衡时的“会话保持”
# 确保来自同一个客户端 IP 的请求,始终被转发到同一台后端服务器上
# 要不然登录不上去
}
server {
listen 8000;
# 这里如果是80,顿口会冲突!
proxy_pass exam;
}
}
[root@lb02 conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@lb02 conf.d]# systemctl restart nginx

image-20260326181146723
image-20260326181146723

前端页面#

Terminal window
'web01配置'
[root@web01 ~]# mkdir -p /app/code/exam/
[root@web01 ~]# cd /app/code/exam/
[root@web01 exam]# scp -r 10.0.0.9:/app/code/exam/frontend .
[root@web01 exam]# ll frontend/
total 0
drwxr-xr-x 4 root root 70 Mar 26 18:21 admin
drwxr-xr-x 3 root root 57 Mar 26 18:21 student
# 这些都是前端的代码!
[root@web01 exam]# cd /etc/nginx/conf.d/
[root@web01 conf.d]# vim exam.conf
server {
listen 80;
server_name admin.kpyun.com;
root /app/code/exam/frontend/admin/;
location / {
index index.html;
}
location /api {
proxy_pass http://10.0.0.6:8000;
# 这里只是改了一个ip地址--》lb02
}
}
server {
listen 80;
server_name stu.kpyun.com;
root /app/code/exam/frontend/student/;
location / {
index index.html;
}
location /api {
proxy_pass http://10.0.0.6:8000;
}
}
[root@web01 conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
'[warn] conflicting server name "admin.kpyun.com" on 0.0.0.0:80, ignored'
# 刚开始报这个错误❌️是因为,我有多个域名都是admin.kpyun.com
# 删除一个就好了!
[root@web01 conf.d]# systemctl restart nginx
# 访问测试
10.0.0.7 admin.kpyun.com stu.kpyun.com
http://admin.kpyun.com
http://stu.kpyun.com
'都是可以访问的!'

image-20260326183341339
image-20260326183341339

Terminal window
'web02相同的配置'
[root@web02 ~]# cd /etc/nginx/conf.d/
[root@web02 conf.d]# scp 10.0.0.7:/etc/nginx/conf.d/exam.conf .
exam.conf 100% 429 512.7KB/s
[root@web02 conf.d]# mkdir -p /app
[root@web02 conf.d]# scp -r 10.0.0.7:/app /
[root@web02 conf.d]# nginx -t
nginx: [warn] conflicting server name "admin.kpyun.com" on 0.0.0.0:80, ignored
[root@web02 conf.d]# ll
-rw-r--r-- 1 root root 315 Mar 13 14:02 admin.conf
[root@web02 conf.d]# rm -rf admin.conf
[root@web02 conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@web02 conf.d]# systemctl restart nginx
'访问测试:'
10.0.0.8 admin.kpyun.com stu.kpyun.com

image-20260326184007984
image-20260326184007984

前端负载均衡#

Terminal window
'lb01配置负载均衡'
[root@lb01 ~]# cd /etc/nginx/conf.d/
[root@lb01 conf.d]# vim exam.conf
upstream exam {
server 172.16.1.7;
server 172.16.1.8;
}
server {
listen 80;
server_name admin.oldboy.com;
location / {
proxy_pass http://exam;
include lb_env;
}
}
server {
listen 80;
server_name stu.oldboy.com;
location / {
proxy_pass http://exam;
include lb_env;
}
}
[root@lb01 conf.d]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
[root@lb01 conf.d]# systemctl restart nginx
'测试访问'
10.0.0.5 admin.kpyun.com stu.kpyun.com

image-20260326185635258
image-20260326185635258

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

前后端分离
https://www.kpyun.fun/posts/web/tomcat/tomcat03/
作者
久棹
发布于
2026-01-12
许可协议
CC BY-NC-SA 4.0
Profile Image of the Author
久棹
只要胆子大,天天寒暑假!
公告
欢迎来到久棹的技术小站!本站专注 Linux 运维学习笔记分享,如有问题欢迎交流探讨 🎉
分类
标签
站点统计
文章
98
分类
11
标签
203
总字数
244,453
运行时长
0
最后活动
0 天前
站点信息
构建平台
Local
博客版本
Firefly v6.13.5
文章许可
CC BY-NC-SA 4.0

文章目录