docker部署ruoyi-vue-pro前后端详细笔记

docker部署ruoyi-vue-pro前后端详细笔记

参考：YuDaoCloud：Docker 部署 - 那个码农

1.准备工作

1.1 需要准备服务器，安装bt面板方便操作

if [ -f /usr/bin/curl ];then curl -sSO https://download.bt.cn/install/install_panel.sh;else wget -O install_panel.sh https://download.bt.cn/install/install_panel.sh;fi;bash install_panel.sh ed8484bec

安装完成

会出现面板登录地址和账号密码，前往登录

可能遇到的问题

1.2 无法访问的情况：

1.防火墙没放行对应的端口
2.防火墙放行了，但是云服务器的安全组没有放行
3.若是轻量型应用服务器，也要到服务器官网放行

命令：

firewall-cmd --zone=public --list-ports
firewall-cmd --zone=public --add-port=13366/tcp --permanent
firewall-cmd --zone=public --list-ports
firewall-cmd --reload

以后遇到无法访问都可能是防火墙问题，放行对应的端口即可

登录后，需要绑定手机号

然后选择LNMP一键安装，本文是使用docker运行nginx，redis，server，php7.2，数据库是使用本地mysql5.7（方便使用navicat工具进行管理）

1.3 安装docker

1.3.1.懒人版：

dnf install -y device-mapper-persistent-data lvm2 
yum -y install dnf
dnf install -y device-mapper-persistent-data lvm2
dnf config-manager --add-repo=https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
dnf install 'dnf-command(config-manager)'
dnf config-manager --add-repo=https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
dnf list docker-ce
dnf install -y docker-ce --nobest
dnf install -y docker-ce
docker -v
systemctl start docker
systemctl enable docker

如果报错无命令，使用下面命令安装

yum -y install dnf

继续安装

dnf install -y device-mapper-persistent-data lvm2

设置镜像源

dnf config-manager --add-repo=https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

如果报错，应该是叫你安装管理工具，使用下面命令即可

dnf install 'dnf-command(config-manager)'

安装好后继续添加源

dnf config-manager --add-repo=https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

查看版本

dnf list docker-ce

安装

dnf install -y docker-ce --nobest

报错的话，除掉后面的nobest

dnf install -y docker-ce

安装后查看版本

docker -v

启动并且设置为开机自启动

systemctl start docker
systemctl enable docker

1.3.2 安装redis （docker）

执行如下命令，使用 Docker 启动 Redis 容器。

docker run -d --name redis --restart=always -p 6379:6379 m.daocloud.io/docker.io/redis

• 端口是 6379，密码未设置

1.3.3 安装nginx（docker）

Nginx 挂载到服务器的目录：

• /work/nginx/conf.d 用于存放配置文件

• /work/nginx/html 用于存放网页文件

• /work/nginx/logs 用于存放日志

• /work/nginx/cert 用于存放 HTTPS 证书

创建主目录和子目录

mkdir -p /work/nginx/{conf.d,html,logs,cert}

设置权限（确保 Docker 容器可读写）

chmod -R 755 /work/nginx

创建 /work/nginx 目录，并在该目录下新建 nginx.conf 文件，避免稍后安装 Nginx 报错。内容如下：

user  nginx;
worker_processes  1;
​
events {worker_connections  1024;
}
​
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
​
http {include       /etc/nginx/mime.types;default_type  application/octet-stream;sendfile        on;keepalive_timeout  65;
​log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';
#    access_log  /var/log/nginx/access.log  main;
​gzip on;gzip_min_length 1k;     # 设置允许压缩的页面最小字节数gzip_buffers 4 16k;     # 用来存储 gzip 的压缩结果gzip_http_version 1.1;  # 识别 HTTP 协议版本gzip_comp_level 2;      # 设置 gzip 的压缩比 1-9。1 压缩比最小但最快，而 9 相反gzip_types text/plain application/x-javascript text/css application/xml application/javascript; # 指定压缩类型gzip_proxied any;       # 无论后端服务器的 headers 头返回什么信息，都无条件启用压缩
​include /etc/nginx/conf.d/*.conf; ## 加载该目录下的其它 Nginx 配置文件
}

然后去到宝塔面板关闭原来一开始安装的nginx，下面是停止后的图

启动 Nginx

① 执行如下命令，使用 Docker 启动 Nginx 容器。

docker run -d \
--name nginx --restart always \
-p 80:80 -p 443:443 \
-e "TZ=Asia/Shanghai" \
-v /work/nginx/nginx.conf:/etc/nginx/nginx.conf \
-v /work/nginx/conf.d:/etc/nginx/conf.d \
-v /work/nginx/logs:/var/log/nginx \
-v /work/nginx/cert:/etc/nginx/cert \
-v /work/nginx/html:/usr/share/nginx/html \
m.daocloud.io/docker.io/nginx

② 执行 docker ps 命令，查看到 Nginx 容器的状态是 UP 的。

1.3.4 mysql配置允许远程navicat连接

一开始使用phpdamin连接，通过面板，注意，需要开启ssl，不然会报错

修改root密码，点击数据库-->点击root密码即可，然后开启nacvicat远程连接数据库

参考：navicat 远程云服务器的mysql问题-CSDN博客

随后在自己电脑上成功连接

恭喜你🎉，至此，你已经完成基础环境的安装了；

可以在面板上点击docker-->容器，看到自己创建的容器

下面是本文重头戏前后端打包部署！

2.后端部署

2.1 配置文件修改

激活配置：（application.yaml）

修改登录验证图片的文字水印 （application.yml）

修改数据库等重要信息，与自己的服务器ip配对（application-dev.yaml）

⚠️给出mysql5.x跟mysql8的配置（本文用的是5.7）

#          url: jdbc:mysql://ip:3306/ruoyi-vue-pro?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true&rewriteBatchedStatements=true # MySQL Connector/J 8.X 连接的示例url: jdbc:mysql://ip:3306/ruoyi-vue-pro?useSSL=true&allowPublicKeyRetrieval=true&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true # MySQL Connector/J 5.X 连接的示例

redis，微信小程序id等，下面是参考

server:port: 48080
​
--- #################### 数据库相关配置 ####################
​
spring:autoconfigure:exclude:- org.springframework.boot.autoconfigure.quartz.QuartzAutoConfiguration # 默认 local 环境，不开启 Quartz 的自动配置- de.codecentric.boot.admin.server.config.AdminServerAutoConfiguration # 禁用 Spring Boot Admin 的 Server 的自动配置- de.codecentric.boot.admin.server.ui.config.AdminServerUiAutoConfiguration # 禁用 Spring Boot Admin 的 Server UI 的自动配置- de.codecentric.boot.admin.client.config.SpringBootAdminClientAutoConfiguration # 禁用 Spring Boot Admin 的 Client 的自动配置# 数据源配置项datasource:druid: # Druid 【监控】相关的全局配置web-stat-filter:enabled: truestat-view-servlet:enabled: trueallow: # 设置白名单，不填则允许所有访问url-pattern: /druid/*login-username: # 控制台管理用户名和密码login-password:filter:stat:enabled: truelog-slow-sql: true # 慢 SQL 记录slow-sql-millis: 100merge-sql: truewall:config:multi-statement-allow: truedynamic: # 多数据源配置druid: # Druid 【连接池】相关的全局配置initial-size: 5 # 初始连接数min-idle: 10 # 最小连接池数量max-active: 20 # 最大连接池数量max-wait: 600000 # 配置获取连接等待超时的时间，单位：毫秒time-between-eviction-runs-millis: 60000 # 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位：毫秒min-evictable-idle-time-millis: 300000 # 配置一个连接在池中最小生存的时间，单位：毫秒max-evictable-idle-time-millis: 900000 # 配置一个连接在池中最大生存的时间，单位：毫秒validation-query: SELECT 1 # 配置检测连接是否有效test-while-idle: truetest-on-borrow: falsetest-on-return: falseprimary: masterdatasource:master:
#          url: jdbc:mysql://8.138.40.47:3306/ruoyi-vue-pro?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true&rewriteBatchedStatements=true # MySQL Connector/J 8.X 连接的示例url: jdbc:mysql://47.17.2.5:3306/ruoyi-vue-pro?useSSL=true&allowPublicKeyRetrieval=true&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true # MySQL Connector/J 5.X 连接的示例username: rootpassword: 123456slave: # 模拟从库，可根据自己需要修改 # 模拟从库，可根据自己需要修改lazy: true # 开启懒加载，保证启动速度
#          url: jdbc:mysql://8.138.40.47:3306/ruoyi-vue-pro?useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true&nullCatalogMeansCurrent=true&rewriteBatchedStatements=true # MySQL Connector/J 8.X 连接的示例url: jdbc:mysql://47.17.2.5/ruoyi-vue-pro?useSSL=true&allowPublicKeyRetrieval=true&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true # MySQL Connector/J 5.X 连接的示例username: rootpassword: 123456
​# Redis 配置。Redisson 默认的配置足够使用，一般不需要进行调优data:redis:host: 47.17.2.5 # 地址
#      host: 8.138.40.47 # 地址port: 6379 # 端口database: 1 # 数据库索引password: 123456syz@ # 密码，建议生产环境开启
​
--- #################### 定时任务相关配置 ####################
​
# Quartz 配置项，对应 QuartzProperties 配置类
spring:quartz:auto-startup: true # 测试环境，需要开启 Jobscheduler-name: schedulerName # Scheduler 名字。默认为 schedulerNamejob-store-type: jdbc # Job 存储器类型。默认为 memory 表示内存，可选 jdbc 使用数据库。wait-for-jobs-to-complete-on-shutdown: true # 应用关闭时，是否等待定时任务执行完成。默认为 false ，建议设置为 trueproperties: # 添加 Quartz Scheduler 附加属性，更多可以看 http://www.quartz-scheduler.org/documentation/2.4.0-SNAPSHOT/configuration.html 文档org:quartz:# Scheduler 相关配置scheduler:instanceName: schedulerNameinstanceId: AUTO # 自动生成 instance ID# JobStore 相关配置jobStore:# JobStore 实现类。可见博客：https://blog.csdn.net/weixin_42458219/article/details/122247162class: org.springframework.scheduling.quartz.LocalDataSourceJobStoreisClustered: true # 是集群模式clusterCheckinInterval: 15000 # 集群检查频率，单位：毫秒。默认为 15000，即 15 秒misfireThreshold: 60000 # misfire 阀值，单位：毫秒。# 线程池相关配置threadPool:threadCount: 25 # 线程池大小。默认为 10 。threadPriority: 5 # 线程优先级class: org.quartz.simpl.SimpleThreadPool # 线程池类型jdbc: # 使用 JDBC 的 JobStore 的时候，JDBC 的配置initialize-schema: NEVER # 是否自动使用 SQL 初始化 Quartz 表结构。这里设置成 never ，我们手动创建表结构。
​
--- #################### 消息队列相关 ####################
​
# rocketmq 配置项，对应 RocketMQProperties 配置类
rocketmq:name-server: 127.0.0.1:9876 # RocketMQ Namesrv
​
spring:# RabbitMQ 配置项，对应 RabbitProperties 配置类rabbitmq:host: 127.0.0.1 # RabbitMQ 服务的地址port: 5672 # RabbitMQ 服务的端口username: guest # RabbitMQ 服务的账号password: guest # RabbitMQ 服务的密码# Kafka 配置项，对应 KafkaProperties 配置类kafka:bootstrap-servers: 127.0.0.1:9092 # 指定 Kafka Broker 地址，可以设置多个，以逗号分隔
​
--- #################### 服务保障相关配置 ####################
​
# Lock4j 配置项
lock4j:acquire-timeout: 3000 # 获取分布式锁超时时间，默认为 3000 毫秒expire: 30000 # 分布式锁的超时时间，默认为 30 毫秒
​
--- #################### 监控相关配置 ####################
​
# Actuator 监控端点的配置项
management:endpoints:web:base-path: /actuator # Actuator 提供的 API 接口的根目录。默认为 /actuatorexposure:include: '*' # 需要开放的端点。默认值只打开 health 和 info 两个端点。通过设置 * ，可以开放所有端点。
​
# Spring Boot Admin 配置项
spring:boot:admin:# Spring Boot Admin Client 客户端的相关配置client:url: http://127.0.0.1:${server.port}/${spring.boot.admin.context-path} # 设置 Spring Boot Admin Server 地址instance:service-host-type: IP # 注册实例时，优先使用 IP [IP, HOST_NAME, CANONICAL_HOST_NAME]# Spring Boot Admin Server 服务端的相关配置context-path: /admin # 配置 Spring
​
# 日志文件配置
logging:file:name: ${user.home}/logs/${spring.application.name}.log # 日志文件名，全路径
​
--- #################### 微信公众号相关配置 ####################
wx:mp: # 公众号配置（必填），参见 https://github.com/Wechat-Group/WxJava/blob/develop/spring-boot-starters/wx-java-mp-spring-boot-starter/README.md 文档app-id: wx0fc626fe05ddfb99 # 测试号（自己的 wx2ee5bbbb1fd812dc）secret: d2e5580b7c937bb9949910818b44aa7c# 存储配置，解决 AccessToken 的跨节点的共享config-storage:type: RedisTemplate # 采用 RedisTemplate 操作 Redis，会自动从 Spring 中获取key-prefix: wx # Redis Key 的前缀http-client-type: HttpClient # 采用 HttpClient 请求微信公众号平台miniapp: # 小程序配置（必填），参见 https://github.com/Wechat-Group/WxJava/blob/develop/spring-boot-starters/wx-java-miniapp-spring-boot-starter/README.md 文档appid: wx2ee5bbbb1fd812dc # wenhualian的接口测试号secret: bf350f2e1386ac7a5c10d636fdbcdfb2config-storage:type: RedisTemplate # 采用 RedisTemplate 操作 Redis，会自动从 Spring 中获取key-prefix: wa # Redis Key 的前缀http-client-type: HttpClient # 采用 HttpClient 请求微信公众号平台
#wx: # 参见 https://github.com/Wechat-Group/WxJava/blob/develop/spring-boot-starters/wx-java-mp-spring-boot-starter/README.md 文档
#  mp:
#    # 公众号配置(必填)
#    app-id: wx041349c639b268b
#    secret: 5abee51948c9f8cb37ce280e814bd0
#    # 存储配置，解决 AccessToken 的跨节点的共享
#    config-storage:
#      type: RedisTemplate # 采用 RedisTemplate 操作 Redis，会自动从 Spring 中获取
#      key-prefix: wx # Redis Key 的前缀
#      http-client-type: HttpClient # 采用 HttpClient 请求微信公众号平台
#  miniapp: # 小程序配置（必填），参见 https://github.com/Wechat-Group/WxJava/blob/develop/spring-boot-starters/wx-java-miniapp-spring-boot-starter/README.md 文档
#    appid: wx63c28e3248a3e7
#    secret: 6f270509227ae1296bbf1c8cb97aed
#    config-storage:
#      type: RedisTemplate # 采用 RedisTemplate 操作 Redis，会自动从 Spring 中获取
#      key-prefix: wa # Redis Key 的前缀
#      http-client-type: HttpClient # 采用 HttpClient 请求微信公众号平台
​
--- #################### 芋道相关配置 ####################
​
# 芋道配置项，设置当前项目所有自定义的配置
yudao:pay:order-notify-url: http://47.17.2.5/admin-api/pay/notify/order # 支付渠道的【支付】回调地址refund-notify-url: http://47.17.2.5/admin-api/pay/notify/refund # 支付渠道的【退款】回调地址transfer-notify-url: https://47.17.2.5/admin-api/pay/notify/transfer # 支付渠道的【转账】回调地址demo: false # 开启演示模式tencent-lbs-key: TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E # QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
​
justauth:enabled: truetype:DINGTALK: # 钉钉client-id: dingvrnreaje3qvzhxgclient-secret: i8E6iZyDvZj51JIb0tYsYfVQYOks9Cq1lgryEjFRqC79P3iJcrxEwT6Qk2QvLrLIignore-check-redirect-uri: trueWECHAT_ENTERPRISE: # 企业微信client-id: wwd411c69a39ad54client-secret: 1wTb7hYT2TUbIeHGXGo7T0odav1ic10mLdyyATOwagent-id: 1000004ignore-check-redirect-uri: true# noinspection SpringBootApplicationYamlWECHAT_MINI_APP: # 微信小程序client-id: ${wx.miniapp.appid}client-secret: ${wx.miniapp.secret}ignore-check-redirect-uri: trueignore-check-state: true # 微信小程序，不会使用到 state，所以不进行校验WECHAT_MP: # 微信公众号client-id: ${wx.mp.app-id}client-secret: ${wx.mp.secret}ignore-check-redirect-uri: truecache:type: REDISprefix: 'social_auth_state:' # 缓存前缀，目前只对 Redis 缓存生效，默认 JUSTAUTH::STATE::timeout: 24h # 超时时长，目前只对 Redis 缓存生效，默认 3 分钟
​
​
--- #################### iot相关配置 TODO 芋艿：再瞅瞅 ####################
iot:emq:# 账号username: anhaohao# 密码password: ahh@123456# 主机地址hostUrl: tcp://chaojiniu.top:1883# 客户端Id，不能相同，采用随机数 ${random.value}client-id: ${random.int}# 默认主题default-topic: test# 保持连接keepalive: 60# 清除会话(设置为false,断开连接，重连后使用原来的会话 保留订阅的主题，能接收离线期间的消息)clearSession: true

关闭演示（application-dev.yaml 能够进行数据库写入删除操作）

2.2 下面进行打包：

mvn clean package -Dmaven.test.skip=true

mac可以使用命令scp传输

scp yudao-server.jar root@ip:/root

输入账号密码即可

构建镜像

① 在 /work/projects/yudao-server 目录下（没有就创建），新建 Dockerfile 文件，用于制作后端项目的 Docker 镜像。编写内容如下：

FROM m.daocloud.io/docker.io/eclipse-temurin:21-jre
​
## 创建目录，并使用它作为工作目录
RUN mkdir -p /yudao-server
WORKDIR /yudao-server
## 将后端项目的 Jar 文件，复制到镜像中
COPY yudao-server.jar app.jar
​
## 设置 TZ 时区
## 设置 JAVA_OPTS 环境变量，可通过 docker run -e "JAVA_OPTS=" 进行覆盖
ENV TZ=Asia/Shanghai JAVA_OPTS="-Xms512m -Xmx512m"
​
## 暴露后端项目的 48080 端口
EXPOSE 48080
​
## 启动后端项目
ENTRYPOINT java ${JAVA_OPTS} -Djava.security.egd=file:/dev/./urandom -jar app.jar

② 执行如下命令，构建名字为 yudao-server 的 Docker 镜像。

cd /work/projects/yudao-server
docker build -t yudao-server .

③ 在 /work/projects/yudao-server 目录下，新建 Shell 脚本 deploy.sh，使用 Docker 启动后端项目。编写内容如下：

#!/bin/bash
set -e
​
## 第一步：删除可能启动的老 yudao-server 容器
echo "开始删除 yudao-server 容器"
docker stop yudao-server || true
docker rm yudao-server || true
echo "完成删除 yudao-server 容器"
​
## 第二步：启动新的 yudao-server 容器 \
echo "开始启动 yudao-server 容器"
docker run -d \
--name yudao-server \
-p 48080:48080 \
-e "SPRING_PROFILES_ACTIVE=dev" \
-v /work/projects/yudao-server:/root/logs/ \
yudao-server
echo "正在启动 yudao-server 容器中，需要等待 60 秒左右"

• 应用日志文件，挂载到服务器的的 /work/projects/yudao-server 目录下

• 通过 SPRING_PROFILES_ACTIVE 设置为 dev 开发环境

启动后端

① 执行 sh deploy.sh 命令，使用 Docker 启动后端项目。日志如下：

开始删除 yudao-server 容器
yudao-server
yudao-server
完成删除 yudao-server 容器
开始启动 yudao-server 容器
0dfd3dc409a53ae6b5e7c5662602cf5dcb52fd4d7f673bd74af7d21da8ead9d5
正在启动 yudao-server 容器中，需要等待 60 秒左右

② 执行 docker logs yudao-server 命令，查看启动日志。看到如下内容，说明启动完成：

3.前端部署

3.1 修改配置文件

3.2 打包dist上传

打包命令

npm run build:dev

打包好的dist文件夹里的所有文件放到服务器的

/work/nginx/html下

3.3 创建nginx配置文件

在/work/nginx/conf.d，创建ruoyi-vue-pro.conf文件

server {listen       80;server_name  139.9.196.247; ## 重要！！！修改成你的外网 IP/域名
​location / { ## 前端项目root   /usr/share/nginx/html/yudao-admin-ui;index  index.html index.htm;try_files $uri $uri/ /index.html;}
​location /admin-api/ { ## 后端项目 - 管理后台proxy_pass http://192.168.0.213:48080/admin-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
​location /app-api/ { ## 后端项目 - 用户 Appproxy_pass http://192.168.0.213:48080/app-api/; ## 重要！！！proxy_pass 需要设置为后端项目所在服务器的 IPproxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
​
}

3.4 命令验证重启服务

docker exec nginx nginx -t

docker exec nginx nginx -s reload

4.访问测试