前后端分离
2194 字
11 分钟
前后端分离

前后端分离
[TOC]
环境准备

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

- ==我们先用单台进行实现!==
web03: 前端+后端 —》 10.0.0.9db02: mysql —》 10.0.0.52
配置数据库
'手动编译安装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 -lhtotal 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]# lltotal 0lrwxrwxrwx 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 mysqluid=223(mysql) gid=223(mysql) groups=223(mysql)
(6)创建配置文件[root@db02 ~]# vim /etc/my.cnf# mysql的配置文件'这里是cnf✅️,不是conf❌️'# 这是MySQL的标准后缀[mysqld]user=mysqlbasedir=/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/33062026-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 554272026-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/mysqldbasedir=/app/tools/mysql/datadir=/app/data/3306/
(11)启动数据库[root@db02 ~]# /etc/init.d/mysqld startStarting MySQL.Logging to '/app/data/3306/db02.err'.. SUCCESS!# 成功启动![root@db02 ~]# netstat -tnulp | grep 3306tcp6 :::3306 LISTEN 55744/mysqldtcp6 :::33060 LISTEN 55744/mysqld[root@db02 ~]# mysql --versionmysql Ver 8.0.28 for Linux on x86_64
(12)创建exam库&用户并授权[root@db02 ~]# mysqlWelcome 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> quitBye
(13)登录测试[root@db02 ~]# mysql -uexam -p1 -h 172.16.1.52mysql> quitBye# 成功登录!
(14)导入数据库数据[root@db02 ~]# cd /server/tmp/[root@db02 tmp]# rz# 上传[root@db02 tmp]# lsxzs-mysql.sql[root@db02 tmp]# mysql exam <xzs-mysql.sql配置后端代码
[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]# lsapplication-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[root@web03 backend]# lsapplication-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 8000tcp 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

配置前端
'我们这里先实现单节点的部署!'# 前后端代码都先部署在web03上,先不拆分!================================(1)上传前端代码[root@web03 ~]# mkdir /server/tmp[root@web03 ~]# cd /server/tmp/[root@web03 tmp]# rz# 上传![root@web03 tmp]# lsexam-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]# lsexam-web-前端[root@web03 frontend]# mv exam-web-前端/* .[root@web03 frontend]# rm -rf exam-web-前端/[root@web03 frontend]# lsadmin student
(2)配置安装nginx[root@web03 ~]# vim /etc/yum.repos.d/nginx.repo[nginx-stable]name=nginx stable repobaseurl=https://nginx.org/packages/centos/7/$basearch/gpgcheck=0enabled=1[root@web03 ~]# yum makecachenginx stable repo 4.2 kB/s | 113 kBMetadata cache created.# 建立缓存![root@web03 ~]# yum -y install nginx[root@web03 ~]# rpm -qa | grep nginxnginx-1.26.1-2.el7.ngx.x86_64
(3)配置server[root@web03 ~]# cd /etc/nginx/conf.d/[root@web03 conf.d]# vim exam.confserver { 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 -tnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: 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

集群部署

扩展后端web
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/
后端四层代理
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 -tnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: configuration file /etc/nginx/nginx.conf test is successful[root@lb02 conf.d]# systemctl restart nginx
前端页面
'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 0drwxr-xr-x 4 root root 70 Mar 26 18:21 admindrwxr-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.confserver { 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 -tnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: 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.comhttp://admin.kpyun.comhttp://stu.kpyun.com'都是可以访问的!'
'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 -tnginx: [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 -tnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: 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
前端负载均衡
'lb01配置负载均衡'[root@lb01 ~]# cd /etc/nginx/conf.d/[root@lb01 conf.d]# vim exam.confupstream 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 -tnginx: the configuration file /etc/nginx/nginx.conf syntax is oknginx: 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
文章分享
如果这篇文章对你有帮助,欢迎分享给更多人!
相关文章智能推荐
1
Tomcat动静分离
Web服务Tomcat动静分离与多端适配实战,通过Redis共享Session、Nginx正则分发及User-Agent路由
2
Tomcat开篇
Web服务Tomcat应用服务器入门,涵盖JDK部署、server.xml层级、WAR包部署与Nginx反向代理集群
3
函数与数组
Shell脚本Shell函数定义与数组操作,涵盖局部/全局变量、递归函数及数组遍历
4
循环与case多分支
Shell脚本Shell循环结构与case多分支语句,涵盖for/while/until循环及实战脚本
5
数值运算与if条件判断
Shell脚本Shell数值运算方法与if条件判断结构,涵盖整数/字符串比较及文件测试
随机文章随机推荐



