ruyu-blog部署详细教程

提示

版权声明

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

本文是在 博主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

遇到的问题：

已加载插件：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

测试是否安装成功：

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

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

信息

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

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容器或者直接停止掉所有容器。您可以使用以下命令：

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

后台效果