JavaScript 已禁用

为了获得更好的体验,请启用JavaScript,或点击下方链接跳转:

跳转至百度
Skip to content

ruyu-blog 部署详细教程

Gitee 地址

Github 地址

环境准备

1.1.安装 Docker

官方网站地址:https://docs.docker.com/engine/install/#server命令:

下载所需工具包

bash
sudo yum install -y yum-utils

image-20240811132111646

遇到的问题:

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

shell
curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo

或者参考:linux 镜像源错误

设置阿里云镜像源

bash
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

image-20240811132215074

1.1.1 安装 Docker Engine(遇到选择一路按 y 回车)

bash
sudo yum install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

image-20240811132259865

启动 Docker 服务

bash
 sudo systemctl start docker

测试是否安装成功(正确显示版本表示安装成功)

bash
docker -v

img

1.1.2 设置国内镜像

bash
vi  /etc/docker/daemon.json

添加以下代码:

bash
{
    "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
}

或者

bash
{
  "registry-mirrors": [
    "https://docker.1ms.run",
    "https://docker.m.daocloud.io",
    "https://docker.1panel.top"
  ],
    "live-restore": true
}

或者

bash
 {
  "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 退出保存

image-20240811132513429

依次执行以下命令,重新启动 Docker 服务。

bash
systemctl daemon-reload
bash
service docker restart

检查是否生效

bash
docker info

是否有以下信息:

image-20240811132819749

1.1.3 安装 Docker Compose

下载地址:https://github.com/docker/compose/releases/download/1.28.6/docker-compose-Linux-x86_64 下载后把文件重命名 docker-compose !!!

bash
cd /usr/local/bin
rz #直接通过rz导入文件

image-20240811133251213

验证码是否上传成功

image-20240811133333988

将可执行权限应用于二进制文件:

bash
sudo chmod +x /usr/local/bin/docker-compose

测试是否安装成功:

bash
docker-compose --version

#输出
[root@localhost ~]# docker-compose --version
docker-compose version 1.28.6, build 5db8d86f

测试是否安装成功:

img

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

  1. 报错 Error: Nothing to do

img

解决办法,更新 yum 源:

bash
yum -y update

1.2 部署 Mysql

依次执行创建挂载目录

bash
mkdir -p /data/mysql/data;
bash
mkdir -p /data/mysql/conf;

创建 yml 文件

bash
vim /data/mysql/docker-compose.yml

填入配置,添加好后按下 esc,然后输入:wq 退出保存

注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器

bash
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 配置文件

bash
vim /data/mysql/conf/my.cnf
bash
[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 客户端默认字符集
bash
#cd到对应目录下
cd /data/mysql
#创建容器并启动
docker-compose up -d

image-20240811135624505

看见以下信息代表成功

img

记得防火墙开对应的端口号 !!!一定要记得换端口和复杂密码,不然等着被比特币勒索!!!

navicate 测试链接成功

image-20240811134940156

最后新建一个 blog 数据库,我已经新建了 blog 数据库,图中为演示。把项目目录下的 sql 文件放进去运行!!!

recording

1.3.部署 Redis

创建挂载目录

bash
mkdir -p /data/redis

创建 yml 文件

bash
vim /data/redis/docker-compose.yml

填入配置,添加好后按下 esc,然后输入:wq 退出保存

注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器

bash
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"]

创建挂载的配置文件

shell
vim /data/redis/redis.conf

注意:protected-mode no 不加,无法连接!

bash
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

到对应目录下启动容器

bash
cd /data/redis
docker-compose up -d
#如果需要强制重新构建
docker-compose up --force-recreate -d

image-20240811135731675

看见以上信息代表成功

记得防火墙开启对应的端口!!!

img

使用工具测试连接

image-20240811135922792

1.4.部署 RabbitMQ

bash
docker pull rabbitmq

根据下载的镜像创建和启动容器

bash
docker run -d --hostname my-rabbit --name rabbit -p 15672:15672 -p 5672:5672 rabbitmq

参数说明:

bash
-d 后台运行容器;
--name 指定容器名;
-p 指定服务运行的端口(5672:应用访问端口;15672:控制台Web端口号);
-v 映射目录或文件;
--hostname  主机名(RabbitMQ的一个重要注意事项是它根据所谓的 “节点名称” 存储数据,默认为主机名);
-e 指定环境变量;(RABBITMQ_DEFAULT_VHOST:默认虚拟机名;RABBITMQ_DEFAULT_USER:默认的用户名;RABBITMQ_DEFAULT_PASS:默认用户名的密码)

查看正在运行容器

bash
docker ps

image-20240811140111747

进入容器内部,比如我自己的:docker exec -it f765634fe9c9 /bin/bash

bash
docker exec -it 容器id /bin/bash

运行 web 插件

bash
rabbitmq-plugins enable rabbitmq_management

img

浏览器运行,您的服务器 ip+端口:http://ip:15672/ 比如我的本地虚拟机 ip 是:192.168.222.128,浏览器输入:http://192.168.222.128:15672/

img

默认用户名和密码是guest

image-20240811140626498

解决:⚠ All stable feature flags must be enabled after completing an upgrade. [Learn more]

全部启用

image-20240811140902920

解决不显示图表问题

正常首页应该是这样

img

解决方法:

查看所有容器(看 id)

bash
docker ps -a

进入容器内部

bash
docker exec -it 容器id /bin/bash

进入指定目录

bash
cd /etc/rabbitmq/conf.d/

修改 management_agent.disable_metrics_collector = false

bash
echo management_agent.disable_metrics_collector = false > management_agent.disable_metrics_collector.conf

退出容器

bash
exit

重启容器

bash
docker restart 容器Id

修改密码:

  1. 进入容器内部

  2. 查看 RabbitMQ 当前的用户列表

    bash
    rabbitmqctl list_users

    img

修改密码

bash
rabbitmqctl change_password 用户名 '[密码]'

1.5.部署 Minio

创建挂载目录

bash
mkdir -p /data/minio

创建 yml 文件

bash
vim /data/minio/docker-compose.yml

填入配置,添加好后按下 esc,然后输入:wq 退出保存

注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器

bash
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

到对应目录下启动容器

bash
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

image-20240812003329621

创建一个对应的桶

image-20240812003420907

输入桶的名称:blog,然后点击右下角 Create Bucket

image-20240812003549865

设置访问权限,把【Private】权限改成【Custom】

img

image-20240812003659349

将以下信息填写在 Write Policy(图二)

bash
{
    "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/**"
            ]
        }
    ]
}

image-20240811142237847

创建密钥

密钥只要第一次可见,创建后记得保存好

img

image-20240812003715494

1.6.部署音乐后端

拉取镜像

bash
docker pull binaryify/netease_cloud_music_api

image-20240812003938193

运行

bash
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

小白请下载最新的发行版本

img

拉取命令,提前安装好 git

bash
git clone git@gitee.com:kuailemao/ruyu-blog.git

img

4.2.运行后端

使用 idea 打开,下载后端依赖

image-20240812004257952

【blog-backend/src/main/resources】目录下新建 application-dev.yml

image-20240812004427075

添加 application-dev.yml 配置

bash
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

image-20240812004612802

看到以下信息,恭喜你,后端启动成功!

image-20240812004836528

遇到的问题提示以下报错:

1723395136268

1723395136256

原因是数据库没改对,把[]去掉

bash
    #错误的
    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 目录

img

右键打开终端

img

运行命令

bash
pnpm install

img

打开\ruyu-blog/blog-frontend/kuailemao-blog/目录下的【.env.development】配置文件,填写好对应的配置信息

bash
# 开发环境配置
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 = ''
bash
pnpm run dev

img

看到以上信息访问链接后恭喜你运行成功!!!

img

4.3.2.运行博客后台

4.3.2.运行博客后台

与上面同样的方式,找到kuailemao-admin文件夹,打开终端 运行命令:

shell
pnpm install

打开 blog-frontend/kuailemao-admin/配置文件目录下的【.env.development】配置文件,填写好对应的配置信息

bash
# 开发环境
代理前缀

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
shell
pnpm dev

img

看到以上信息访问链接后恭喜你运行成功!!!

效果如下:

账号:admin 密码:123456

img

4.3.3.音乐模块(可选)

信息

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

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

img

5.部署

5.1.部署后端

5.1.1.构建生成 jar 包

idea 运行打包命令

img

得到一个打包好的 Jar 包

img

5.1.2.上传 jar 包

bash
#新建backend文件夹
mkdir /blog/backend -p

#进入backend文件夹
cd /blog/backend

上传打包文件,把你打包好的后端 Jar 包上传

bash
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

bash
#进入backend文件夹
cd /blog/backend

#新建Dockerfile文件
vim Dockerfile

写入 Dockerfile 内容配置:(覆盖掉原来文件的内容)

添加好后按下 esc,然后输入:wq 退出保存

注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器

bash
# 使用官方的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"]

image-20240812005927275

5.1.4.构建后端镜像

警告

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

#运行后端容器前记得终止掉原来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

bash
docker build . -t ruyu-blog-hd

image-20240812010004567

5.1.5.运行后端容器

bash
docker run --name ruyu-blog-hd -d -p 8088:8088 ruyu-blog-hd

image-20240812010159849

5.1.6.启动后端镜像

bash
docker start ruyu-blog-hd

5.1.7.验证后端容器

bash
docker ps

成功输出如下图

image-20240812010235419

记得服务器防火墙开启对应端口!!!

5.2.部署前台

5.2.1.填写配置文件

提示

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

找到 kuailemao-blog 目录下面的生产环境配置文件

img

bash
# 生产环境配置
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.打包前台项目

运行打包命令

bash
pnpm build

img

等待打包完成,根目录下面出现 dist 命令

img

5.2.3.上传 dist 文件夹

回到服务器,运行命令

bash
# 新建blog-qt文件夹
mkdir /blog/blog-qt -p

# 进入blog-qt文件夹
cd /blog/blog-qt/

把打包好的 dist 文件夹上传,建议用 Xftp 上传更快,路径在:/blog/blog-qt

bash
rz

5.2.4.创建前台镜像

bash
vim Dockerfile

填入配置,添加好后按下 esc,然后输入:wq 退出保存

注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器

bash
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 配置文件

bash
vim default.conf

填入配置,添加好后按下 esc,然后输入:wq 退出保存

注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器

bash
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 转发,如下配置

bash
# 定义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;
        }
    }

img

5.2.5.构建前台镜像

警告

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

#停止前台容器
docker stop blog-qt
#删除前台容器
docker rm blog-qt
bash
<!-- 导航到/blog/blog-qt/目录下 -->
cd /blog/blog-qt/

# 构建前台镜像
docker build . -t blog-qt

image-20240812010345015

5.2.6.运行前台镜像

bash
docker run --name blog-qt -d -p 80:80 blog-qt

5.2.7.验证前台容器

bash
docker ps -a

image-20240812010440613

前台效果

二级域名反向代理,后台访问效果

img

5.3.部署后台

5.3.1.填写配置文件

提示

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

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

img

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

bash
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.打包后台项目

打包命令

bash
pnpm build

看见以下信息后表示打包成功

img

img

5.3.3.上传 dist 目录

回到服务器,运行命令

bash
#新建blog-ht文件夹
mkdir /blog/blog-ht

#进入blog-ht文件夹
cd /blog/blog-ht

把打包好的 dist 文件夹上传,建议用 Xftp 上传更快,路径在:/blog/blog-ht

5.3.4.创建后台镜像

bash
vim Dockerfile

填入配置,添加好后按下 esc,然后输入:wq 退出保存

注意坑!!!填写配置检测前面是不是没有黏贴上,建议用 FinalShell 自带文本编辑器

bash
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 配置文件

bash
vim default.conf

填入后台 nginx 配置

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

警告

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

#停止后台容器
docker stop blog-ht
#删除后台容器
docker rm blog-ht
bash
<!-- 导航到/blog/blog-ht目录下 -->
cd /blog/blog-ht

<!-- 构建后台镜像 -->
docker build . -t blog-ht

image-20240812010536086

5.3.6.运行后台镜像

bash
docker run --name blog-ht -d -p 81:81 blog-ht

5.3.7.验证后台镜像

bash
docker ps -a

image-20240812010601490

后台效果

作者:威威

版权:此文章版权归 威威 所有,如有转载,请注明出处!

链接:可点击右上角分享此页面复制文章链接

最后更新于:

最近更新