ruyu-blog部署详细教程
版权声明
本着开源共享、共同学习的精神:
本文是在 博主Ruyu 文章:《项目部署文档》https://www.kuailemao.xyz/article/48 基础上增加了自己实践过程的一些细节,转载无需和我联系,但请注明文章来源。如果侵权之处,请联系博主进行删除,谢谢~
环境准备
1.1.安装Docker
官方网站地址:https://docs.docker.com/engine/install/#server 命令:
下载所需工具包
sudo yum install -y yum-utils
设置阿里云镜像源
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"
],
"live-restore": true
}
添加好后按下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
测试是否安装成功:
遇到问题------(本人部署过程中没有遇到过)
- 报错 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当前的用户列表
rabbitmqctl 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:
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://localhost:99/
# 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: http://192.168.222.128:9000
#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.运行博客后台
与上面同样的方式,找到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容器或者直接停止掉所有容器。您可以使用以下命令:
# 停止mysql容器
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
后台效果