ruyu-blog 部署详细教程
环境准备
1.1.安装 Docker
官方网站地址:https://docs.docker.com/engine/install/#server命令:
下载所需工具包
sudo yum install -y yum-utils
遇到的问题:
已加载插件:fastestmirror, langpacks
Loading mirror speeds from cached hostfile
Could not retrieve mirrorlist http://mirrorlist.centos.org/?release=7&arch=x86_64&repo=os&infra=stock error was
14: curl#6 - "Could not resolve host: mirrorlist.centos.org; 未知的错误"
One of the configured repositories failed (未知),
and yum doesn't have enough cached data to continue. At this point the only
safe thing yum can do is fail. There are a few ways to work "fix" this:
1. Contact the upstream for the repository and get them to fix the problem.
2. Reconfigure the baseurl/etc. for the repository, to point to a working
upstream. This is most often useful if you are using a newer
distribution release than is supported by the repository (and the
packages for the previous distribution release still work).
3. Run the command with the repository temporarily disabled
yum --disablerepo=<repoid> ...
4. Disable the repository permanently, so yum won't use it by default. Yum
will then just ignore the repository until you permanently enable it
again or use --enablerepo for temporary usage:
yum-config-manager --disable <repoid>
or
subscription-manager repos --disable=<repoid>
5. Configure the failing repository to be skipped, if it is unavailable.
Note that yum will try to contact the repo. when it runs most commands,
so will have to try and fail each time (and thus. yum will be be much
slower). If it is a very temporary problem though, this is often a nice
compromise:
yum-config-manager --save --setopt=<repoid>.skip_if_unavailable=true
Cannot find a valid baseurl for repo: base/7/x86_64
这个问题是由于无法解析 CentOS 镜像列表的主机名导致的,通常是网络问题或 DNS 配置不正确造成的。下载阿里云的 repo 文件,然后再次验证:sudo yum install -y yum-utils
curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo
或者参考:linux 镜像源错误
设置阿里云镜像源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
1.1.1 安装 Docker Engine(遇到选择一路按 y 回车)
sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
启动 Docker 服务
sudo systemctl start docker
测试是否安装成功(正确显示版本表示安装成功)
docker -v
1.1.2 设置国内镜像
vi /etc/docker/daemon.json
添加以下代码:
{
"registry-mirrors": [
"https://mirror.ccs.tencentyun.com",
"https://hub.uuuadc.top",
"https://docker.anyhub.us.kg",
"https://dockerhub.jobcher.com",
"https://dockerhub.icu",
"https://docker.ckyl.me",
"https://docker.awsl9527.cn",
"https://docker.m.daocloud.io"
],
"live-restore": true
}
或者
{
"registry-mirrors": [
"https://docker.1ms.run",
"https://docker.m.daocloud.io",
"https://docker.1panel.top"
],
"live-restore": true
}
或者
{
"registry-mirrors": [
"https://docker.m.daocloud.io",
"https://noohub.ru",
"https://huecker.io",
"https://dockerhub.timeweb.cloud",
"https://0c105db5188026850f80c001def654a0.mirror.swr.myhuaweicloud.com",
"https://5tqw56kt.mirror.aliyuncs.com",
"https://docker.1panel.live",
"http://mirrors.ustc.edu.cn/",
"http://mirror.azure.cn/",
"https://hub.rat.dev/",
"https://docker.ckyl.me/",
"https://docker.chenby.cn",
"https://docker.hpcloud.cloud",
"https://docker.m.daocloud.io"
],
"live-restore": true
}
镜像源地址来源于:https://blog.csdn.net/jundao1997/article/details/141756747
Docker/DockerHub 国内镜像源/加速列表(长期维护 0926 更新):https://cloud.tencent.com/developer/article/2454486
添加好后按下 esc,然后输入:wq 退出保存
依次执行以下命令,重新启动 Docker 服务。
systemctl daemon-reload
service docker restart
检查是否生效
docker info
是否有以下信息:
1.1.3 安装 Docker Compose
下载地址:https://github.com/docker/compose/releases/download/1.28.6/docker-compose-Linux-x86_64 下载后把文件重命名 docker-compose !!!
cd /usr/local/bin
rz #直接通过rz导入文件
验证码是否上传成功
将可执行权限应用于二进制文件:
sudo chmod +x /usr/local/bin/docker-compose
测试是否安装成功:
docker-compose --version
#输出
[root@localhost ~]# docker-compose --version
docker-compose version 1.28.6, build 5db8d86f
测试是否安装成功:
遇到问题------(本人部署过程中没有遇到过)
- 报错 Error: Nothing to do
解决办法,更新 yum 源:
yum -y update
1.2 部署 Mysql
依次执行创建挂载目录
mkdir -p /data/mysql/data;
mkdir -p /data/mysql/conf;
创建 yml 文件
vim /data/mysql/docker-compose.yml
填入配置,添加好后按下 esc,然后输入:wq 退出保存
注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器
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
创建 Mysql 配置文件
vim /data/mysql/conf/my.cnf
[mysqld]
default-storage-engine=INNODB # 创建新表时将使用的默认存储引擎
character-set-server=utf8mb4 # 设置mysql服务端默认字符集
pid-file = /var/run/mysqld/mysqld.pid # pid文件所在目录
socket = /var/run/mysqld/mysqld.sock # 用于本地连接的socket套接字
datadir = /var/lib/mysql # 数据文件存放的目录
symbolic-links=0
sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION # 定义mysql应该支持的sql语法,数据校验等!
允许最大连接数
max_connections=200
同一局域网内注意要唯一
server-id=3306
开启二进制日志功能 & 日志位置存放位置`/var/lib/mysql`
#log-bin=mysql-bin
log-bin=/var/lib/mysql/mysql-bin
binlog 格式
1. STATEMENT:基于 SQL 语句的模式,binlog 数据量小,但是某些语句和函数在复制过程可能导致数据不一致甚至出错;
2. MIXED:混合模式,根据语句来选用是 STATEMENT 还是 ROW 模式;
3. ROW:基于行的模式,记录的是行的完整变化。安全,但 binlog 会比其他两种模式大很多;
binlog_format=ROW
FULL:binlog 记录每一行的完整变更 MINIMAL:只记录影响后的行
binlog_row_image=FULL
日志文件大小
max_binlog_size=100M
定义清除过期日志的时间(这里设置为 7 天)
expire_logs_days=7
================= ↑↑↑ mysql 主从同步配置 end ↑↑↑ =================
[mysql]
default-character-set=utf8mb4
[client]
default-character-set=utf8mb4 # 设置 mysql 客户端默认字符集
#cd到对应目录下
cd /data/mysql
#创建容器并启动
docker-compose up -d
看见以下信息代表成功
记得防火墙开对应的端口号 !!!一定要记得换端口和复杂密码,不然等着被比特币勒索!!!
navicate 测试链接成功
最后新建一个 blog 数据库,我已经新建了 blog 数据库,图中为演示。把项目目录下的 sql 文件放进去运行!!!
1.3.部署 Redis
创建挂载目录
mkdir -p /data/redis
创建 yml 文件
vim /data/redis/docker-compose.yml
填入配置,添加好后按下 esc,然后输入:wq 退出保存
注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器
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 不加,无法连接!
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
到对应目录下启动容器
cd /data/redis
docker-compose up -d
#如果需要强制重新构建
docker-compose up --force-recreate -d
看见以上信息代表成功
记得防火墙开启对应的端口!!!
使用工具测试连接
1.4.部署 RabbitMQ
docker pull 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 f765634fe9c9 /bin/bash
docker exec -it 容器id /bin/bash
运行 web 插件
rabbitmq-plugins enable rabbitmq_management
浏览器运行,您的服务器 ip+端口:http://ip:15672/ 比如我的本地虚拟机 ip 是:192.168.222.128,浏览器输入:http://192.168.222.128:15672/
默认用户名和密码是guest
解决:⚠ All stable feature flags must be enabled after completing an upgrade. [Learn more]
全部启用
解决不显示图表问题
正常首页应该是这样
解决方法:
查看所有容器(看 id)
docker ps -a
进入容器内部
docker exec -it 容器id /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 容器Id
修改密码:
进入容器内部
查看 RabbitMQ 当前的用户列表
bashrabbitmqctl list_users
修改密码
rabbitmqctl change_password 用户名 '[密码]'
1.5.部署 Minio
创建挂载目录
mkdir -p /data/minio
创建 yml 文件
vim /data/minio/docker-compose.yml
填入配置,添加好后按下 esc,然后输入:wq 退出保存
注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器
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
#如果需要强制重新构建
docker-compose up --force-recreate -d
打开对应的控制台: http://ip:9001/ 您的服务器 ip+端口:http://ip:9001/ 比如我的本地虚拟机 ip 是:192.168.222.128,浏览器输入:http://192.168.222.128:9001/记得服务器防火墙开启 9000,9001 端口!!!使用对应的账号密码登录!
默认账号:admin 默认密码:12345678
创建一个对应的桶
输入桶的名称:blog,然后点击右下角 Create Bucket
设置访问权限,把【Private】权限改成【Custom】
将以下信息填写在 Write Policy(图二)
{
"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/**"
]
}
]
}
创建密钥
密钥只要第一次可见,创建后记得保存好
1.6.部署音乐后端
拉取镜像
docker pull binaryify/netease_cloud_music_api
运行
docker run -p 3000:3000 --name netease_cloud_music_api -d binaryify/netease_cloud_music_api
记得服务器防火墙开启对应端口!!!
1.7.部署一言接口
信息
详情部署请点击:docker 部署一言接口服务
2.申请第三方登录
2.1.Gitee
4.1.拉取项目
项目地址:kuailemao/Ruyu-Blog
小白请下载最新的发行版本
拉取命令,提前安装好 git
git clone git@gitee.com:kuailemao/ruyu-blog.git
4.2.运行后端
使用 idea 打开,下载后端依赖
【blog-backend/src/main/resources】目录下新建 application-dev.yml
添加 application-dev.yml 配置
spring:
security:
jwt:
key: jwt-key
# jwt 的有效时间(天)
expire: 7
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.222.128:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
username: root
password: 123456
data:
redis:
# redis 端口
port: 6379
# redis 地址
host: 192.168.222.128
# redis 密码
password: 123456
# redis连接超时时间(毫秒)
timeout: 10000
# 数据库索引,默认为0
database: 1
jackson:
date-format: yyyy-MM-dd HH:mm:ss
time-zone: GMT+8
rabbitmq:
# rabbitmq 地址
host: 192.168.222.128
# rabbitmq 端口
port: 5672
# rabbitmq 用户名
username: guest
# rabbitmq 密码
password: guest
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: #填写自己的邮箱,例如:123456@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.222.128:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
user: root
password: 123456
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://blog.seasir.top/
# 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:
# minio地址+9000端口
endpoint: https://minio.seasir.top
#endpoint: http://192.168.80.128:9000 (本地虚拟机填写这个配置)
#endpoint: http://云服务器IP:9000 (通过frp填写这个配置)
#endpoint: https://minio.seasir.top (通过域名解析填写这个配置,如配置SSL证书需要加上https)
#minio 访问密钥
accessKey: #必填!上传自己的 accessKey
#minio 密钥
secretKey: #必填!上传自己的 secretKey
桶名称
bucketName: blog
把上面准备好的环境找到对应的地方配置好各种 ip 跟端口或者密钥,运行 BlogBackendApplication
看到以下信息,恭喜你,后端启动成功!
遇到的问题提示以下报错:
原因是数据库没改对,把[]去掉
#错误的
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://[192.168.222.128]:[3306]/blog?useSSL=false&allowPublicKeyRetrieval=true
#正确的
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.222.128:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
#第87行
dataSource:
quartz_jobs:
driver: com.mysql.cj.jdbc.Driver
URL: jdbc:mysql://192.168.222.128:3306/blog?useSSL=false&allowPublicKeyRetrieval=true
4.3.运行前端
前提具备条件:
- pnpm >= 8.12.0
- node >= 16.17.0
4.3.1.运行博客前台
- 找到打开
kuailemao-blog
目录
右键打开终端
运行命令
pnpm install
打开\ruyu-blog/blog-frontend/kuailemao-blog/目录下的【.env.development】配置文件,填写好对应的配置信息
# 开发环境配置
NODE_ENV = development
博客代理地址
VITE_APP_BASE_API = '/api'
项目后端地址(来自 blog-frontend/kuailemao-admin/.env.development 配置文件中 VITE_APP_BASE_URL)
VITE_SERVE='http://localhost:8088/'
前台域名
VITE_FRONTEND_URL = 'http://localhost:99/'
音乐代理地址
VITE_MUSIC_BASE_API = '/wapi'
第三方开源集成的音乐前端地址,如果不配置上面菜单栏就不会出现音乐选项
VITE_MUSIC_FRONTEND_URL = ''
左下角音乐后台
VITE_MUSIC_SERVE='http://192.168.222.128:3000/'
自己部署的一言接口,如果不填写会默认使用官网的接口,官网接口有每分钟 qps 限制,有时会得不到想要的结果
VITE_YIYAN_API = ''
pnpm run dev
看到以上信息访问链接后恭喜你运行成功!!!
4.3.2.运行博客后台
4.3.2.运行博客后台
与上面同样的方式,找到kuailemao-admin
文件夹,打开终端 运行命令:
pnpm install
打开 blog-frontend/kuailemao-admin/配置文件目录下的【.env.development】配置文件,填写好对应的配置信息
# 开发环境
代理前缀
VITE_APP_BASE_API=/api
后端地址
VITE_APP_BASE_URL=http://localhost:8088
VITE_APP_LOAD_ROUTE_WAY=BACKEND
#minio ip 地址+9001 上传端口
VITE_APP_DOMAIN_NAME=http://192.168.222.128:9001
VITE_APP_BASE_API_DEV=/dev-api
VITE_APP_BASE_URL_DEV=http://localhost:8080
The title of your application (string)
#标题
VITE_GLOB_APP_TITLE="antdv-pro"
是否显示侧边配置按钮
VITE_APP_PROD=true
pnpm dev
看到以上信息访问链接后恭喜你运行成功!!!
效果如下:
账号:admin 密码:123456
4.3.3.音乐模块(可选)
5.部署
5.1.部署后端
5.1.1.构建生成 jar 包
idea 运行打包命令
得到一个打包好的 Jar 包
5.1.2.上传 jar 包
#新建backend文件夹
mkdir /blog/backend -p
#进入backend文件夹
cd /blog/backend
上传打包文件,把你打包好的后端 Jar 包上传
rz # Enter
#验证是否上传成功
ls
#或者
ll
#输出 blog-backend-0.0.1-SNAPSHOT.jar 或者 总用量 91480 -r--------. 1 root root 93672039 8月 11 04:14 blog-backend-0.0.1-SNAPSHOT.jar
5.1.3.创建后端镜像
新建 Dockerfile
#进入backend文件夹
cd /blog/backend
#新建Dockerfile文件
vim Dockerfile
写入 Dockerfile 内容配置:(覆盖掉原来文件的内容)
添加好后按下 esc,然后输入:wq 退出保存
注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器
# 使用官方的OpenJDK 17镜像作为基础镜像
FROM openjdk:17
# 设置工作目录
WORKDIR /app
# 复制项目的jar文件到容器中
COPY blog-backend-0.0.1-SNAPSHOT.jar /app/app.jar
# 暴露应用运行的端口
EXPOSE 8088
# 运行Spring Boot应用
ENTRYPOINT ["java", "-jar", "/app/app.jar"]
5.1.4.构建后端镜像
警告
#构建后端镜像前确保镜像已经停止 首次部署请跳过此步骤
#运行后端容器前记得终止掉原来mysql、redis、rabbitmq容器或者直接停止掉所有容器。您可以使用以下命令:
# 停止后端容器
docker stop ruyu-blog-hd
# 停止redis容器
docker stop redis:7.2.3
# 停止rabbitmq容器
docker stop rabbitmq
#或者停止所有正在运行的Docker容器
docker stop $(docker ps -q)
#启动所有停止的Docker容器
docker start $(docker ps -aq)
#删除后端容器
docker rm ruyu-blog-hd
docker build . -t ruyu-blog-hd
5.1.5.运行后端容器
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd
5.1.6.启动后端镜像
docker start ruyu-blog-hd
5.1.7.验证后端容器
docker ps
成功输出如下图
记得服务器防火墙开启对应端口!!!
5.2.部署前台
5.2.1.填写配置文件
提示
不填写也可以打包到服务器,也可以运行
找到 kuailemao-blog 目录下面的生产环境配置文件
# 生产环境配置
NODE_ENV = production
博客代理地址
VITE_APP_BASE_API = '/api'
项目后端地址(来自 blog-frontend/kuailemao-admin/.env.development 配置文件中 VITE_APP_BASE_URL)
VITE_SERVE='http://服务器 IP:8088/'
前台域名(没有配就填写正确 ip)
VITE_FRONTEND_URL = 'http://服务器 IP:99/'
音乐代理地址
VITE_MUSIC_BASE_API = '/wapi'
第三方开源集成的音乐前端地址,如果不配置上面菜单栏就不会出现音乐选项
VITE_MUSIC_FRONTEND_URL = ''
左下角音乐后端地址
VITE_MUSIC_SERVE='http://服务器 IP:3000/'
自己部署的一言接口,如果不填写会默认使用官网的接口,官网接口有每分钟 qps 限制,有时会得不到想要的结果
VITE_YIYAN_API = ''
5.2.1.打包前台项目
运行打包命令
pnpm build
等待打包完成,根目录下面出现 dist 命令
5.2.3.上传 dist 文件夹
回到服务器,运行命令
# 新建blog-qt文件夹
mkdir /blog/blog-qt -p
# 进入blog-qt文件夹
cd /blog/blog-qt/
把打包好的 dist 文件夹上传,建议用 Xftp 上传更快,路径在:/blog/blog-qt
rz
5.2.4.创建前台镜像
vim Dockerfile
填入配置,添加好后按下 esc,然后输入:wq 退出保存
注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器
FROM nginx
MAINTAINER 博客前台
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
新建 default.conf 配置文件
vim default.conf
填入配置,添加好后按下 esc,然后输入:wq 退出保存
注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器
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.222.128: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.222.128: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;
}
}
5.2.5.构建前台镜像
警告
#构建前台镜像前确保镜像已经停止 首次部署请跳过此步骤
#停止前台容器
docker stop blog-qt
#删除前台容器
docker rm blog-qt
<!-- 导航到/blog/blog-qt/目录下 -->
cd /blog/blog-qt/
# 构建前台镜像
docker build . -t blog-qt
5.2.6.运行前台镜像
docker run --name blog-qt -d -p 80:80 blog-qt
5.2.7.验证前台容器
docker ps -a
前台效果
二级域名反向代理,后台访问效果
5.3.部署后台
5.3.1.填写配置文件
提示
不填写也可以打包到服务器,也可以运行
找到对应的生产环境配置文件
填写后端前台生产环境配置
VITE_APP_BASE_API=/api
#服务器ip+8088端口
VITE_APP_BASE_URL=http://服务器IP:8088
# The title of your application (string)
VITE_GLOB_APP_TITLE="antdv-pro"
VITE_APP_PROD=false
5.3.2.打包后台项目
打包命令
pnpm build
看见以下信息后表示打包成功
5.3.3.上传 dist 目录
回到服务器,运行命令
#新建blog-ht文件夹
mkdir /blog/blog-ht
#进入blog-ht文件夹
cd /blog/blog-ht
把打包好的 dist 文件夹上传,建议用 Xftp 上传更快,路径在:/blog/blog-ht
5.3.4.创建后台镜像
vim Dockerfile
填入配置,添加好后按下 esc,然后输入:wq 退出保存
注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器
FROM nginx
MAINTAINER 博客后台
RUN rm /etc/nginx/conf.d/default.conf
ADD default.conf /etc/nginx/conf.d/
COPY dist/ /usr/share/nginx/html/
新建 default.conf 配置文件
vim default.conf
填入后台 nginx 配置
server {
listen 81; # 监听端口
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.222.128: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.222.128:3000/; # 转发请求的目标地址
}
# 配置错误页面
error_page 404 /404.html; # 404错误页
location = /404.html {
internal; # 不接受外部访问
root /usr/share/nginx/html; # 404错误页文件所在目录
}
}
5.3.5.构建后台镜像
警告
#构建后台镜像前确保镜像已经停止 首次部署请跳过此步骤
#停止后台容器
docker stop blog-ht
#删除后台容器
docker rm blog-ht
<!-- 导航到/blog/blog-ht目录下 -->
cd /blog/blog-ht
<!-- 构建后台镜像 -->
docker build . -t blog-ht
5.3.6.运行后台镜像
docker run --name blog-ht -d -p 81:81 blog-ht
5.3.7.验证后台镜像
docker ps -a
后台效果