详细版
实战：docker部署全网最美博客ruyu-blog(简洁、唯美、丝滑)(小白喜欢的手把手文档)(最新)-v5-2024.7.21(测试成功)(详细版)
目录
[toc]
版权声明
本着开源共享、共同学习的精神：
本文是在 博主Ruyu 文章：《Ruyu-Blog 博客项目部署文档》https://www.kuailemao.xyz/article/48 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~
强烈推荐：
博主Ruyu ：
Ruyu-Blog开源博客gitee地址：https://gitee.com/kuailemao/ruyu-blog
Ruyu-Blog开源博客网站地址：https://www.kuailemao.xyz/
博客介绍
基于 SpringBoot3 + Vue3 + TypeScript+ Mysql + Redis + RabbitMQ + SpringSecurity 的前后台个人博客系统。
==项目特点==
- 前端参考了众多优秀博客大佬设计，页面美观，响应式布局
- 后台管理基于 Antdv Pro 后台通用框架二次开发
- 前后端分离，Docker Compose 一键部署
- 采用 RABC 权限模型，使用 SpringSecurity 进行权限管理
- 支持动态权限修改、动态菜单和路由
- 文章、分类、标签、时间轴、树洞、留言板、聊天、友链等模块
- 站长介绍、公告、电子时钟、随机文章、每日鸡汤、网站资讯
- 支持代码高亮、图片预览、黑夜模式、点赞、收藏、评论等功能
- 评论支持在线预览、Markdown、表情包
- 发送友链申请、通过等自动发送邮件提醒
- 接入第三方 gitee、github登录，减少注册成本
- 文章编辑使用 Markdown 编辑器
- 实现日志管理（操作、登录），服务监控、用户、菜单、角色、权限管理
- 使用 自己搭建 minio 进行图片存储（避免了使用第三方对象存储被刷流量问题）😍
- 使用 Spring Aop + Redis 对接口进行了限流处理（每分钟）,后端使用 JSR 303 对参数校验，使用 Spring Aop + RabbitMQ 对后台操作日志处理
- 采用 Restful 风格的 API，注释完善，后端代码使用了大量 stream 流编程方式，代码非常美观
- ……
==技术介绍==
前台前端（博客）： Vue3 + Pinia + Vue Router + TypeScript + Axios + Element Plus + Echarts……
后台启动（管理）： Vue3 + Pinia + Vue Router + TypeScript + Axios + Antdv Pro + Ant Design Vue……
后端： JDK17 + SpringBoot3 + SpringSecurity + Mysql + Redis + Quartz + RabbitMQ + Minio + Mybatis-Plus + Nginx + Docker……
其他： Gitee、Github 第三方登录
更新内容😉
次v5文档相对v4文档，更新如下2部分位置：
更新位置1：更新application.yml里mino api端口号为9000
cd /root/ruyu-blog-v1.2.0/blog-backend/
#vim src/main/resources/application.yml
之前作者部署文档里为9001，部署之后在发布文章时无法正常上传图片，会报如下错误。
更新位置2：给博客前端前台的default文件里添加选项
cd /root/ruyu-blog-v1.2.0/blog-frontend/kuailemao-blog
vim default.conf (覆盖源代码)
# 定义HTTP服务器
server {
listen 80; # 监听端口
server_name localhost; # 域名
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# 配置代理路径
location /api/ {
proxy_pass http://192.168.1.100:8088/; # 转发请求的目标地址
proxy_set_header Host $host; # 设置请求头中的Host字段
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 设置HTTP头中的X-Forwarded-For字段，表示客户端真实IP，多个IP用逗号隔开
proxy_set_header X-Real-IP $remote_addr; # 设置请求头中的X-Real-IP字段，表示客户端真实IP
client_max_body_size 100M;
}
# 配置代理路径
location /wapi/ {
proxy_pass http://192.168.1.100:3000/; # 转发请求的目标地址
}
# 配置错误页面
error_page 404 /404.html; # 404错误页
location = /404.html {
internal; # 不接受外部访问
root /usr/share/nginx/html; # 404错误页文件所在目录
}
}
更新3：把minio配置在了公网服务器上💖
为什么要把minio专门配置在公网服务器上？
因为我ruyu-blog是部署在家里局域网内的1台小主机上，然后通过frp出去（8080-blog-前端前台web，8081-admin-前端后台）提供服务。但是经测试，博客文章封面一直无法正常加载，经大佬指点，将minio配置在公网服务器上后，这个问题就可以解决了，效果如下。
更新4：增加从gitee登录及qq邮箱发送邮件功能
博客效果
- 个人搭建后效果
- 原作者博客项目： 前台：http://kuailemao.xyz 后台：http://blog.kuailemao.xyz 后台测试账号：Test 密码：123456
原作者截图效果
前台：
后台：
环境
软件环境
个人测试环境为：
win10
vmwareworkstation虚机（1台centos7.x虚机，192.168.1.100，可通公网，4c8g）
硬件环境
推荐
最低 2 核 4 G。（2c2g带不起来的😂）
本人组网环境
为什么要用这种方式呢？
因为穷哇啊啊啊，哈哈。😂（云服务器贼贵）
- 关于frp如何搭建，请看如下手把手教程：
https://onedayxyy.cn/docusaurus/docs/docker-install-frp 《实战：docker式部署frp内网穿透-2024.7.13(测试成功)》
==方案：云服务配置不高？那就用frp家用nuc小主机来跑ruyu-blog博客吧……==
frp部署文档： https://onedayxyy.cn/docusaurus/docs/docker-install-frp 《实战：docker式部署frp内网穿透-2024.7.13(测试成功)》 部署超简单 
frp部署超简单，只要有公网服务器就好。 部署frp后，可以公网ssh到家里笔记本 & 也可把家里笔记本的服务给暴漏到公网；
我的ecs云服务器就2c 2g，带不动ruyu-blog，家里有1台nuc(小主机)，同时也充当家里it学习电脑，因此我就在win10+vmwareworkstation李开了一台centos7做ruyu-blog部署（4c 8g），然后把这台linux机器给frp出去提供博客服务。（目前白天开机，晚上11:50就关机了） 耗电也不高，关机是因为我想让主机休息休息哈哈。 （后期可能考虑用树莓派来跑博客服务等……） 以上方案供参考。@ 你昨晚要的frps
源码
博客具体源码，请从作者git仓库获取，此百度网盘只包含基础环境所需软件。
Ruyu-Blog开源博客gitee地址：https://gitee.com/kuailemao/ruyu-blog
🍀自己实验所需完整代码
通过百度网盘分享的文件：v5-2024.7.17（原作者提供，个人测试后小白必会的手把手文档）...
链接：https://pan.baidu.com/s/17rgQSlH_298bf-9fIwXHSg?pwd=j2c7
提取码：j2c7
v5-2024.7.17（原作者提供，个人测试后小白必会的手把手文档）（修复上一版本代码问题）（推荐）
注意
推荐小白，以下配置完全按我文档的来，直接复制粘贴代码就好。此文档是经过我多次部署测试成功的，是自己踩了好多坑输出的，请完全放心使用。🤣
我们先把最美博客部署成功，后续可根据需求修改为自己的属性。（后续文档单独编写）
另外，课程里设计的实验代码、环境软件、docker镜像，我这里都打包放到了百度网盘链接，大家可自行下载。
以下没标注目录，一律都在root的家目录下！
/root目录下次文档里账号密码为测试环境信息，已脱敏。
注意点1：要拉取发版代码
注意：一定要拉取发版代码，如果拉取仓库最新代码的话，那么在pnpm install && pnpm run dev后，刷新页面后，会一直报500错误的哦……，特备注意。
- 如果拉取仓库最新代码的话，那么在pnpm install && pnpm run dev后，刷新页面后，会一直报500错误的哦
注意点2：要注意application.yml文件的配置
一定要注意/root/ruyu-blog-v1.2.0/blog-backend/src/main/resources/application.yml的配置：（不能配置错误）
当前正确版配置如下：
/root/ruyu-blog-v1.2.0/blog-backend/src/main/resources/application.yml
server:
port: 8088
spring:
security:
jwt:
key: jwt-key
# jwt 的有效时间（天）
expire: 7
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.1.100:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
username: root
password: [填写你的密码]
data:
redis:
# redis 端口
port: 6379
# redis 地址
host: 192.168.1.100
# redis 密码
password: [填写你的密码]
# redis连接超时时间（毫秒）
timeout: 10000
# 数据库索引，默认为0
database: 1
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
rabbitmq:
# rabbitmq 地址
host: 192.168.1.100
# rabbitmq 端口
port: 5672
# rabbitmq 用户名
username: guest
# rabbitmq 密码
password: [填写你的密码]
listener:
simple:
retry:
enabled: true #是否开启消费者重试
max-attempts: 3 #最大重试次数
initial-interval: 6000 #重试间隔时间（单位毫秒）
multiplier: 2 #间隔时间乘子，间隔时间*乘子=下一次的间隔时间，最大不能超过设置的最大间隔时间
max-interval: 10000 #重试最大时间间隔（单位毫秒）
# 邮箱队列名称
queue:
email: email_queue
log-login: log_login_queue
log-system: log_system_queue
# 邮箱交换机名称
exchange:
email: email_exchange
log: log_exchange
# 邮箱路由键
routingKey:
email: email_routing_key
log-login: log_routing_key_login
log-system: log_routing_key_system
mail:
host: smtp.qq.com
username: 2675263825@qq.com
password: [填写你的密码]
chat-gpt:
email: # 不可透露
password: # # 不可透露
properties:
mail.smtp.auth: true
mail.smtp.starttls.enable: true
servlet:
multipart:
max-file-size: 10MB
max-request-size: 10MB
quartz:
# 将 Quartz 持久化方式修改为 jdbc
job-store-type: jdbc
properties:
org:
quartz:
scheduler:
# 实例节点 ID 自动生成
instanceId: AUTO
jobStore:
class: org.quartz.impl.jdbcjobstore.JobStoreTX
dataSource: quartz_jobs
dataSource:
quartz_jobs:
driver: com.mysql.cj.jdbc.Driver
URL: jdbc:mysql://192.168.1.100:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
user: root
password: [填写你的密码]
mybatis:
mapper-locations: classpath:mapper/*.xml
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
global-config:
db-config:
# 逻辑删除
logic-delete-field: isDeleted
# 逻辑删除值
logic-delete-value: 1
# 逻辑未删除值
logic-not-delete-value: 0
# id 自增
id-type: auto
# springdoc-openapi项目配置，访问 http://127.0.0.1:8088/doc.html
springdoc:
swagger-ui:
path: /swagger-ui.html
tags-sorter: alpha
operations-sorter: alpha
api-docs:
path: /v3/api-docs
group-configs:
- group: 'default'
paths-to-match: '/**'
packages-to-scan: xyz.kuailemao
oauth:
# gitee 登录
gitee:
client-id: [填写你的信息]
client-secret: [填写你的信息]
redirect-uri: [填写你的信息]
# gitub 登录
github:
client-id:
client-secret:
redirect-uri:
web:
index:
# 网站前端首页
path: http://kuailemao.xyz/
# knife4j的增强配置，不需要增强可以不配
knife4j:
enable: true
setting:
language: zh_cn
http_pool:
max_total: 200
default_max_per_route: 100
connect_timeout: 5000
connection_request_timeout: 1000
socket_timeout: 65000
validate_after_inactivity: 2000
# 连接 minio
minio:
# 访问地址
endpoint: http://47.100.215.163:9000
accessKey: [填写你的信息]
secretKey: [填写你的信息]
# 桶名称
bucketName: blog
1、基础环境准备
1.上传涉及源码到服务器
上传本文档提供的软件包到服务器root用户根目录就好：
[root@nuc-frpc ~]# ll -h
total 313M
-rw-rw-rw- 1 root root 8.7M Jul 14 20:44 apache-maven-3.9.8-bin.tar.gz
-rw-rw-rw- 1 root root 57M Jul 14 20:44 docker-compose-linux-x86_64
-rw-rw-rw- 1 root root 175M Jul 14 20:44 jdk-17_linux-x64_bin.rpm
-rw-rw-rw- 1 root root 22M Jul 14 20:44 node-v16.20.2-linux-x64.tar.xz
-rw-rw-rw- 1 root root 24M Jul 14 20:44 Python-3.8.6.tgz
-rw-rw-rw- 1 root root 28M Jul 15 17:03 ruyu-blog-v1.2.0.zip
2.基础环境配置
关闭防火墙、selinux等系统配置：
systemctl stop firewalld
systemctl disable firewalld
systemctl stop NetworkManager
systemctl disable NetworkManager
setenforce 0
sed -i s/SELINUX=enforcing/SELINUX=disabled/ /etc/selinux/config
3.安装docker、docker-compose
（1）安装docker
直接粘贴执行就好：（如果docker已存在，忽略此步骤即可）
#初始环境
systemctl stop firewalld
systemctl disable firewalld
systemctl stop NetworkManager
systemctl disable NetworkManager
setenforce 0
sed -i s/SELINUX=enforcing/SELINUX=disabled/ /etc/selinux/config
yum install -y net-tools
yum install -y vim
yum install -y wget
yum install -y lrzsz
cd /etc/yum.repos.d/
#mkdir backup-`date +%F`
#mv * !$
wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
yum clean all
yum makecache
yum remove docker \
docker-client \
docker-client-latest \
docker-common \
docker-latest \
docker-latest-logrotate \
docker-logrotate \
docker-engine
yum install -y yum-utils device-mapper-persistent-data lvm2
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum makecache
#yum install docker-ce -y
yum install -y yum install docker-ce-19.03.9 docker-ce-cli-19.03.9 containerd.io #指定需要安装的版本号
systemctl start docker && systemctl enable docker
docker version
docker info
mkdir -p /etc/docker
echo > /etc/docker/daemon.json
tee /etc/docker/daemon.json <<EOF
{
"registry-mirrors": [
"https://hub.uuuadc.top",
"https://docker.anyhub.us.kg",
"https://dockerhub.jobcher.com",
"https://dockerhub.icu",
"https://docker.ckyl.me",
"https://docker.awsl9527.cn"
]
}
EOF
cat /proc/sys/net/ipv4/ip_forward
echo "net.ipv4.ip_forward = 1" >> /etc/sysctl.conf
sysctl -p
cat /proc/sys/net/ipv4/ip_forward
systemctl daemon-reload
systemctl restart docker
- 验证
docker version
（2）安装docker-compose
- 安装包：
下载二进制文件上传至 linux（课程资料已提供 docker-compose 二进制文件可直接上传）
github 地址：https://github.com/docker/compose/releases/
https://github.com/docker/compose/releases/download/v2.23.0/docker-compose-linux-x86_64
- 配置
#上传包
#[root@harbor ~]# ll -h docker-compose-linux-x86_64
#-r-------- 1 root root 12M 7月 24 2020 docker-compose-Linux-x86_64
#（1）配置
cd /root
mv docker-compose-linux-x86_64 /usr/local/bin/docker-compose
#添加执行权限
chmod +x /usr/local/bin/docker-compose
#（2）验证
docker-compose --version
- 验证：
docker-compose --version
4.安装nodejs、pnpm、maven、python3
安装次部分是为了构建springboot项目。
（1）安装nodejs
- 下载软件包
访问 Node.js 官方网站并下载适用于你的 Linux 版本的二进制包。(之类直接用我提供的软件包就好)
https://nodejs.org/zh-cn/download/prebuilt-binaries
- 上传软件包并配置
#（1）上传软件包
#[root@devops8 ~]# ll -h node-v16.20.2-linux-x64.tar.xz
#-rw-rw-rw- 1 root root 22M Jul 10 12:33 node-v16.20.2-linux-x64.tar.xz
#（2）解压并配置PATH
cd /root
tar -xf node-v16.20.2-linux-x64.tar.xz
mv node-v16.20.2-linux-x64 /usr/local/nodejs
echo 'export PATH=/usr/local/nodejs/bin:$PATH' >> /etc/profile
source /etc/profile
#（3）验证
node -v
npm -v
- 验证：
[root@nuc-frpc ~]# node -v
v16.20.2
[root@nuc-frpc ~]# npm -v
8.19.4
（2）安装pnpm
npm install -g pnpm@8.12.0
pnpm --version
#设置npm和pnpm均为国内源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
pnpm config set registry https://mirrors.huaweicloud.com/repository/npm/
- 验证
（3）安装jdk17
- 下载 JDK 17：
访问 Oracle JDK 17 下载页面 或 OpenJDK 下载页面 下载适用于 Linux 的 JDK 17 压缩包。
https://www.oracle.com/java/technologies/downloads/?er=221886#java17
- 上传、解压并配置
cd /root
rpm -ivh jdk-17_linux-x64_bin.rpm
java -version
- 验证
（4）安装maven
- 下载安装包
https://maven.apache.org/download.cgi
https://dlcdn.apache.org/maven/maven-3/3.9.8/binaries/apache-maven-3.9.8-bin.tar.gz
- 配置
cd /root
tar xf apache-maven-3.9.8-bin.tar.gz -C /usr/local/
cd /usr/local/apache-maven-3.9.8/
echo 'export M2_HOME=/usr/local/apache-maven-3.9.8' >> /etc/profile
echo 'export PATH=$M2_HOME/bin:$PATH' >> /etc/profile
source /etc/profile
mvn -v
- 验证
mvn -v
- 配置maven源为阿里源
#vim /usr/local/apache-maven-3.9.8/conf/settings.xml
#搜索mirror，注释或删除默认配置，替换为如下配置
<mirror>
<id>aliyunmaven</id>
<mirrorOf>*</mirrorOf>
<name>阿里云公共仓库</name>
<url>https://maven.aliyun.com/repository/public</url>
</mirror>
配置前：
配置后：
注意xml的注释语法为：
（5）源码编译安装python3
为什么要安装python3呢，因为在构建前端时，需要有oython3的支持，否则源码编译报错。
- 直接执行如下代码
##1、安装依赖包
sudo yum groupinstall "Development Tools" -y
sudo yum install openssl-devel bzip2-devel libffi-devel -y
##2、下载并编译安装
cd /root/
#wget https://www.python.org/ftp/python/3.8.6/Python-3.8.6.tgz
#wget https://onedayxyy.cn/scripts/centos7_install_python3.8.6/Python-3.8.6.tgz
tar xzf Python-3.8.6.tgz
cd Python-3.8.6
./configure --enable-optimizations
make altinstall
##3、验证
python3.8 --version
##4、删除软件包
cd /root
rm -rf Python-3.8.6.tgz Python-3.8.6
echo "Python3.8.6 has installed finished！！！"
#配置下软 连接，这里暂时不配置软连接，配置了会导致yum无法正常使用（yum依赖2版本python）
#rm -rf /usr/bin/python
#ln -s /usr/local/bin/python3.8 /usr/bin/python
- 验证
python
#exit()退出
- 未安装python3时后续pnpm 运行时报错如下
5.申请第三方登录
1.Gitee
http://[后端地址]:[端口]/oauth/gitee/callback
2.Github
6.申请邮件发送
1.QQ
2.163
2、本地运行项目
0.解压代码
cd /root
unzip ruyu-blog-v1.2.0.zip
cd ruyu-blog-v1.2.0
1.docker运行后端基础服务
基础服务包含：mysql、redis、rabbitmq、minio、netease_cloud_music_api。
（1）启动mysql容器
- 创建挂载目录
#创建挂载目录
mkdir -p /data/mysql/data
mkdir -p /data/mysql/conf
- 创建yml文件
vim /data/mysql/docker-compose.yml
version: '3'
services:
mysql:
image: mysql:8.0 #mysql版本
container_name: mysql
volumes:
- /data/mysql/data:/var/lib/mysql
- /data/mysql/conf/my.cnf:/etc/mysql/mysql.conf.d/mysqld.cnf
restart: always
ports:
- 3306:3306
environment:
MYSQL_ROOT_PASSWORD: 123456 #root用户密码
TZ: Asia/Shanghai
command: --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
- 启动服务
cd /data/mysql
docker-compose up -d
- 查看
docker ps
- 导入mysql数据
就是几条简单的mysql命令，按我的步骤来搞就好。不要配置错了哦。🤣
自己手动导入mysql数据
查看当前容器id:
cd /root
#docker ps查看mysql容器
[root@nuc-frpc ~]# docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
bbbf806a334b mysql:8.0 "docker-entrypoint.s…" 2 minutes ago Up 2 minutes 0.0.0.0:3306->3306/tcp, 33060/tcp mysql
[root@nuc-frpc ~]#
将宿主机本地blog.sql拷贝到mysql容器:
#拷贝sql到mysql的blog数据库
cd /root/ruyu-blog-v1.2.0
cd sql/
mv blog\(部署\).sql blog.sql
docker cp blog.sql mysql:/root
docker exec -it mysql bash
mysql -uroot -p123456 -e 'create database blog;'
mysql -uroot -p123456 blog < /root/blog.sql
（2）启动redis容器
- 创建挂载目录
#创建挂载目录
mkdir -p /data/redis
- 创建yml文件
vim /data/redis/docker-compose.yml
version: '3'
services:
redis:
image: redis:7.2.3
container_name: redis
restart: always
ports:
- 6379:6379
volumes:
- /data/redis/redis.conf:/etc/redis/redis.conf
- /data/redis/data:/data
- /data/redis/logs:/logs
command: ["redis-server","/etc/redis/redis.conf"]
- 创建挂载的配置文件
vim /data/redis/redis.conf
protected-mode no
port 6379
timeout 0
#rdb配置
save 900 1
save 300 10
save 60 10000
rdbcompression yes
dbfilename dump.rdb
dir /data
appendonly yes
appendfsync everysec
#设置你的redis密码
requirepass 123456
注意：protected-mode no 不加，无法连接！
- 启动服务
cd /data/redis
docker-compose up -d
- 验证：
docker ps
（3）启动rabbitmq容器
- 启动容器
docker run -d --hostname my-rabbit --name rabbit -p 15672:15672 -p 5672:5672 rabbitmq
参数说明：
-d 后台运行容器；
--name 指定容器名；
-p 指定服务运行的端口（5672：应用访问端口；15672：控制台Web端口号）；
-v 映射目录或文件；
--hostname 主机名（RabbitMQ的一个重要注意事项是它根据所谓的 “节点名称” 存储数据，默认为主机名）；
-e 指定环境变量；（RABBITMQ_DEFAULT_VHOST：默认虚拟机名；RABBITMQ_DEFAULT_USER：默认的用户名；RABBITMQ_DEFAULT_PASS：默认用户名的密码）
- 查看
docker ps
-
进入容器内部
比如我自己的：docker exec -it rabbit /bin/bash
运行web插件:
rabbitmq-plugins enable rabbitmq_management
浏览器运行:
默认用户名和密码是guest
解决：⚠ All stable feature flags must be enabled after completing an upgrade. [Learn more]
全部启用。
解决不显示图表问题
正常首页应该是这样：
解决方法：
-
查看所有容器（看id）
docker ps -a -
进入容器内部
docker exec -it afe350bdaf60 /bin/bash -
进入指定目录
cd /etc/rabbitmq/conf.d/ -
修改 management_agent.disable_metrics_collector = false
echo management_agent.disable_metrics_collector = false > management_agent.disable_metrics_collector.conf -
退出并重启容器
exit
docker restart rabbit
再次观察现象：
修改密码：（可选，本次先不修改密码）
- 进入容器内部
- 查看RabbitMQ当前的用户列表
rabbitmqctl list_users
修改密码：
rabbitmqctl change_password 用户名 '[密码]'
（4）启动minio容器
- 创建挂载目录
#创建挂载目录
mkdir -p /data/minio
- 创建yml文件
vim /data/minio/docker-compose.yml
version: '3'
services:
minio:
image: "minio/minio"
container_name: minio
ports:
- "9000:9000" # api 端口
- "9001:9001" # 控制台端口
environment:
MINIO_ROOT_USER: admin # 管理后台用户名
MINIO_ROOT_PASSWORD: 12345678 # 管理后台密码，最小8个字符
MINIO_COMPRESS: "off" # 开启压缩 on 开启 off 关闭
MINIO_COMPRESS_EXTENSIONS: "" # 扩展名 .pdf,.doc 为空 所有类型均压缩
MINIO_COMPRESS_MIME_TYPES: "" # mime 类型 application/pdf 为空 所有类型均压缩
volumes:
- /data/minio/data:/data/ # 映射当前目录下的data目录至容器内/data目录
- /data/minio/config:/root/.minio/ # 映射配置目录
command: server --address ':9000' --console-address ':9001' /data # 指定容器中的目录 /data
privileged: true
- 启动服务
cd /data/minio
docker-compose up -d
打开对应的控制台: http://192.168.1.100:9001/ **记得服务器防火墙开启9000，9001端口！！！使用对应的账号密码登录！**admin/12345678
- 创建一个对应的桶
- 设置访问权限
权限设置为Custom：将以下json填入所示图框。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": {
"AWS": [
"*"
]
},
"Action": [
"s3:GetBucketLocation"
],
"Resource": [
"arn:aws:s3:::blog"
]
},
{
"Effect": "Allow",
"Principal": {
"AWS": [
"*"
]
},
"Action": [
"s3:ListBucket"
],
"Resource": [
"arn:aws:s3:::blog"
],
"Condition": {
"StringEquals": {
"s3:prefix": [
"*"
]
}
}
},
{
"Effect": "Allow",
"Principal": {
"AWS": [
"*"
]
},
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::blog/**"
]
}
]
}
- 创建秘钥
（5）部署音乐后端
docker run -p 3000:3000 --name netease_cloud_music_api -d binaryify/netease_cloud_music_api
docker ps
2.运行后端(springboot)服务
- 编辑application.yml文件
cd /root/ruyu-blog-v1.2.0/blog-backend/
#vim src/main/resources/application.yml
编辑/root/ruyu-blog-v1.2.0/blog-backend/src/main/resources/application.yml内容为如下：
server:
port: 8088
spring:
security:
jwt:
key: jwt-key
# jwt 的有效时间（天）
expire: 7
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.1.100:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
username: root
password: [填写你的密码]
data:
redis:
# redis 端口
port: 6379
# redis 地址
host: 192.168.1.100
# redis 密码
password: [填写你的密码]
# redis连接超时时间（毫秒）
timeout: 10000
# 数据库索引，默认为0
database: 1
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
rabbitmq:
# rabbitmq 地址
host: 192.168.1.100
# rabbitmq 端口
port: 5672
# rabbitmq 用户名
username: guest
# rabbitmq 密码
password: [填写你的密码]
listener:
simple:
retry:
enabled: true #是否开启消费者重试
max-attempts: 3 #最大重试次数
initial-interval: 6000 #重试间隔时间（单位毫秒）
multiplier: 2 #间隔时间乘子，间隔时间*乘子=下一次的间隔时间 ，最大不能超过设置的最大间隔时间
max-interval: 10000 #重试最大时间间隔（单位毫秒）
# 邮箱队列名称
queue:
email: email_queue
log-login: log_login_queue
log-system: log_system_queue
# 邮箱交换机名称
exchange:
email: email_exchange
log: log_exchange
# 邮箱路由键
routingKey:
email: email_routing_key
log-login: log_routing_key_login
log-system: log_routing_key_system
mail:
host: smtp.qq.com
username: 2675263825@qq.com
password: [填写你的密码]
chat-gpt:
email: # 不可透露
password: # # 不可透露
properties:
mail.smtp.auth: true
mail.smtp.starttls.enable: true
servlet:
multipart:
max-file-size: 10MB
max-request-size: 10MB
quartz:
# 将 Quartz 持久化方式修改为 jdbc
job-store-type: jdbc
properties:
org:
quartz:
scheduler:
# 实例节点 ID 自动生成
instanceId: AUTO
jobStore:
class: org.quartz.impl.jdbcjobstore.JobStoreTX
dataSource: quartz_jobs
dataSource:
quartz_jobs:
driver: com.mysql.cj.jdbc.Driver
URL: jdbc:mysql://192.168.1.100:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
user: root
password: [填写你的密码]
mybatis:
mapper-locations: classpath:mapper/*.xml
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
global-config:
db-config:
# 逻辑删除
logic-delete-field: isDeleted
# 逻辑删除值
logic-delete-value: 1
# 逻辑未删除值
logic-not-delete-value: 0
# id 自增
id-type: auto
# springdoc-openapi项目配置，访问 http://127.0.0.1:8088/doc.html
springdoc:
swagger-ui:
path: /swagger-ui.html
tags-sorter: alpha
operations-sorter: alpha
api-docs:
path: /v3/api-docs
group-configs:
- group: 'default'
paths-to-match: '/**'
packages-to-scan: xyz.kuailemao
oauth:
# gitee 登录
gitee:
client-id: [填写你的信息]
client-secret: [填写你的信息]
redirect-uri: [填写你的信息]
# gitub 登录
github:
client-id:
client-secret:
redirect-uri:
web:
index:
# 网站前端首页
path: http://kuailemao.xyz/
# knife4j的增强配置，不需要增强可以不配
knife4j:
enable: true
setting:
language: zh_cn
http_pool:
max_total: 200
default_max_per_route: 100
connect_timeout: 5000
connection_request_timeout: 1000
socket_timeout: 65000
validate_after_inactivity: 2000
# 连接 minio
minio:
# 访问地址
endpoint: http://47.100.215.163:9000
accessKey: [填写你的信息]
secretKey: [填写你的信息]
# 桶名称
bucketName: blog
需要修改的地址为如上表示：（切记不能改错哦）
- 本地运行项目
cd /root/ruyu-blog-v1.2.0/blog-backend/
mvn spring-boot:run
耐心等待一会儿，等待maven下载依赖包。
看到这里就代表我们的springboot项目启动成功了。😊
3.运行前端
（1）运行前端前台
- 本地运行并启动项目
新打开一个终端：
cd /root/ruyu-blog-v1.2.0/blog-frontend/kuailemao-blog/
pnpm install && pnpm run dev
可以看到，启动成功了。
- 访问测试下
nice，完美。
（2）运行前端后台
新打开一个终端：
cd /root/ruyu-blog-v1.2.0/blog-frontend/kuailemao-admin/
pnpm install && pnpm run dev
- 访问测试
耐心等待一会儿：
输入账号密码，admin/123456
完美，接下来，我们就来部署下项目。
3、部署项目
这里，我们通过docker构建镜像，然后启动容器来提供博客服务。
1.部署后端
- 构建生成jar包
cd /root/ruyu-blog-v1.2.0/blog-backend
mvn clean
mvn clean package
可以看到，成功生成jar包：
- 生成docker镜像
cd /root/ruyu-blog-v1.2.0/blog-backend
#vim Dockerfile
写入Dockerfile内容：(覆盖掉原来文件的内容)
cat Dockerfile
# 使用官方的OpenJDK 17镜像作为基础镜像
FROM openjdk:17
# 设置工作目录
WORKDIR /app
# 复制项目的jar文件到容器中
COPY target/blog-backend-0.0.1-SNAPSHOT.jar /app/app.jar
# 暴露应用运行的端口
EXPOSE 8088
# 运行Spring Boot应用
ENTRYPOINT ["java", "-jar", "/app/app.jar"]
- 构建镜像
docker build . -t ruyu-blog-hd
docker images
- 运行容器
运行前记得终止掉原来本地运行的3个终端哦。
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd
- 验证
docker ps
2.部署前端
（1）运行前端前台
- 运行打包命令
cd /root/ruyu-blog-v1.2.0/blog-frontend/kuailemao-blog/
rm -rf dist
pnpm build
等待打包完成，根目录下面出现 dist 目录:
- 构建镜像
cd /root/ruyu-blog-v1.2.0/blog-frontend/kuailemao-blog
cat Dockerfile #本次使用代码提供的Dockerfile就好
cat Dockerfile
FROM nginx
MAINTAINER 博客前台
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
- 新建 nginx 配置文件
vim default.conf (覆盖源代码)
# 定义HTTP服务器
server {
listen 80; # 监听端口
server_name localhost; # 域名
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# 配置代理路径
location /api/ {
proxy_pass http://192.168.1.100:8088/; # 转发请求的目标地址
proxy_set_header Host $host; # 设置请求头中的Host字段
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 设置HTTP头中的X-Forwarded-For字段，表示客户端真实IP，多个IP用逗号隔开
proxy_set_header X-Real-IP $remote_addr; # 设置请求头中的X-Real-IP字段，表示客户端真实IP
client_max_body_size 100M;
}
# 配置代理路径
location /wapi/ {
proxy_pass http://192.168.1.100:3000/; # 转发请求的目标地址
}
# 配置错误页面
error_page 404 /404.html; # 404错误页
location = /404.html {
internal; # 不接受外部访问
root /usr/share/nginx/html; # 404错误页文件所在目录
}
}
==扩展：🤦♂️==
如果有域名，并且后台不想使用另外一个端口访问，假如 88，因为服务器只有一个 80端口，就可以使用nginx转发，如下配置
# 定义HTTP服务器
server {
listen 80; # 监听端口
server_name kuailemao.xyz; # 域名
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# 配置代理路径
location /api/ {
proxy_pass http://[域名/ip+端口]/; # 转发请求的目标地址，项目后端
proxy_set_header Host $host; # 设置请求头中的Host字段
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# 设置HTTP头中的X-Forwarded-For字段，表示客户端真实IP，多个IP用逗号隔开
proxy_set_header X-Real-IP $remote_addr; # 设置请求头中的X-Real-IP字段，表示客户端真实IP
}
# 配置代理路径
location /wapi/ {
proxy_pass http://[域名/ip+端口]/; # 转发请求的目标地址，音乐后端
}
# 配置错误页面
error_page 404 /404.html; # 404错误页
location = /404.html {
internal; # 不接受外 部访问
root /usr/share/nginx/html; # 404错误页文件所在目录
}
}
# 二级域名反向代理，访问后台
server {
listen 80;
server_name blog.kuailemao.xyz;
location / {
proxy_pass http://kuailemao.xyz:81/; # 实际的后台路径
client_max_body_size 100M;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
使用第二种方法记得服务器那边也要解析二级域名！！！(这里特别注意下：我们先不做过多研究，后续再研究这个问题。)
- 构建镜像
docker build . -t blog-qt
- 运行容器
docker run --name blog-qt -d -p 80:80 blog-qt
- 测试效果
访问效果：（博客是没有数据的）
- 作者效果：
（2）运行前端后台
这个方法和上面的 一样。
- 运行打包命令
cd /root/ruyu-blog-v1.2.0/blog-frontend/kuailemao-admin/
rm -rf dist
pnpm build
等待打包完成，根目录下面出现 dist 目录:
- 构建镜像
cd /root/ruyu-blog-v1.2.0/blog-frontend/kuailemao-admin/
cat Dockerfile #本次使用代码提供的Dockerfile就好
cat Dockerfile
FROM nginx
MAINTAINER 博客后台
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
- 新建 nginx 配置文件default.conf
vim default.conf (直接覆盖进去)
server {
listen 81;
server_name _;
# gzip config
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
root /usr/share/nginx/html;
include /etc/nginx/mime.types;
location / {
try_files $uri $uri/ /index.html;
}
location /api/ {
proxy_pass http://192.168.1.100:8088/; # 项目后端地址
client_max_body_size 100M;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
- 构建镜像
docker build . -t blog-ht
- 运行容器
docker run --name blog-ht -d -p 81:81 blog-ht
- 测试效果
输入账号/密码：admin/123456
4、测试
访问博客：
访问博客后台：
至此，一个有优美的前后端分离博客搭建成功了，完美。😊
关于我
我的博客主旨：
- 排版美观，语言精炼；
- 文档即手册，步骤明细，拒绝埋坑，提供源码；
- 本人实战文档都是亲测成功的，各位小伙伴在实际操作过程中如有什么疑问，可随时联系本人帮您解决问题，让我们一起进步！
🍀 微信二维码
x2675263825 （舍得）， qq：2675263825。
🍀 微信公众号
《云原生架构师实战》
🍀 个人主页：
🍀 知识库：
🍀 博客：
🍀 csdn
https://blog.csdn.net/weixin_39246554?spm=1010.2135.3001.5421
🍀 知乎
https://www.zhihu.com/people/foryouone
往期推荐
我的开源项目：
https://wiki.onedayxyy.cn/docs/OpenSource
玩转Typora+Docusuaurus+起始页交流群：
最后
好了，关于本次就到这里了，感谢大家阅读，最后祝大家生活快乐，每天都过的有意义哦，我们下期见！
