ruyu-blog部署详细教程

tip

版权声明

本着开源共享、共同学习的精神：

本文是在 博主Ruyu 文章：《项目部署文档》https://www.kuailemao.xyz/article/48 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

Gitee地址

Github地址

环境准备

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

测试是否安装成功：

遇到问题------(本人部署过程中没有遇到过)

1. 报错 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

修改密码：

1. 进入容器内部

2. 查看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.部署一言接口

info

详情部署请点击：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.运行博客前台

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.音乐模块（可选）

info

这个页面是单独部署的并非集成在项目内，需要的自己参考开源大佬的文档部署

详情部署请点击：音乐模块(可选)

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.构建后端镜像

warning

#构建后端镜像前确保镜像已经停止  首次部署请跳过此步骤

#运行后端容器前记得终止掉原来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.填写配置文件

tip

不填写也可以打包到服务器，也可以运行

找到 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.构建前台镜像

warning

#构建前台镜像前确保镜像已经停止  首次部署请跳过此步骤

#停止前台容器
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.填写配置文件

tip

不填写也可以打包到服务器，也可以运行

找到对应的生产环境配置文件

填写后端前台生产环境配置

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.构建后台镜像

warning

#构建后台镜像前确保镜像已经停止  首次部署请跳过此步骤

#停止后台容器
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

后台效果