服务器资源与角色身份角色ip版本服务器Gitlab10.0.0.133Rocky Linux 9服务器Jenkins10.0.0.134Rocky Linux 9服务器Web10.0.0.135Rocky Linux 9服务器APP10.0.0.137Rocky Linux 9服务器Database10.0.0.138Rocky Linux 9服务器Harbor10.0.0.139Rocky Linux 9中间件Harbor-2.14.2基于若依分离版ruoyi-vue项目的发布传统java项目因为前后端代码耦合度高修改某处需要整体重新打包复用性和可维护性较低。因代码的物理耦合导致部署时候需要部署在同一服务器对服务器资源要求较高服务器宕机对业务的影响巨大。因此前后端分离是目前主流的 Web 项目架构模式是将代码解耦后将前后端拆分成独立应用前端只需加载静态界面用户请求、业务处理通过后端完成前后端只需要通过API通信。这就意味着在部署上前后端可以部署在不同服务器甚至集群只需满足服务器基础通信就行。之前02-静态页面的发布就是前端的部署方式只是目前都是通过nodejs将前端构建打包成dist目录交给nginx代理而03-Maven项目的发布就是后端的部署方式也是通过maven将后端打包构建成jar包后使用java -jar启动通过Jenkins一键发布前后端分离项目其实就是通过一个任务同时完成前、后端的打包、发送、启动。因此目前的完整步骤是Jenkins拉取代码--进入前端目录构建前端--进入后端目录构建后端--分别发送前、后端构建产物到对应服务器--前端服务器启动nginx代理--后端服务器java -jar启动--浏览器成功访问业务请求处理正常基于服务器的发布一、源码准备1.Ruoyi-Vue介绍RuoYi-Vue是一个 Java EE 企业级快速开发平台基于经典技术组合Spring Boot、Spring Security、MyBatis、Jwt、Vue内置模块如部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告、代码生成等。在线定时任务配置支持集群支持多数据源支持分布式事务等。若依官网http://ruoyi.vip演示地址http://vue.ruoyi.vip代码下载https://gitee.com/y_project/RuoYi-Vue2.复制官方代码仓库首先将ruoyi-vue拉取到Gitlab仓库创建Gitlab空白仓库Ruoyi-Vue拉取gitee公有项目RuoYi-Vue到Gitlab服务器本地推送已拉取到本地的项目到创建好的Gitlab私有仓库# 镜像克隆Gitee仓库 git clone --mirror https://gitee.com/y_project/RuoYi-Vue.git ruoyi-vue-mirror.git cd ruoyi-vue-mirror.git # 替换远程仓库的推送地址为私有GitLab仓库 git remote set-url --push origin http://localhost:8765/root/Ruoyi-Vue.git # 推送到私有仓库 git push --mirror - 输入Gitlab的账号和密码复制仓库3.数据准备ruoyi-vue需要mysql和redis提供数据存储交互在Database服务器先安装mysql和redis后根据官方文档创建对应数据库导入sql脚本# 清理环境 yum -y erase rpm -qa | grep -E mysql|mariadb rm -rf /etc/my* /var/lib/mysql* /var/log/mysql* # 安装mysql的官方YUM仓库与指定安装8.0版本 yum install -y https://dev.mysql.com/get/mysql84-community-release-el9-2.noarch.rpm yum install -y mysql-community-server --enablerepo mysql80-community --disablerepo mysql-8.4-lts-community # 启动mysql并修改初始密码 systemctl start mysqld # 查看版本验证安装 mysql --version mysql Ver 8.0.42 for Linux on x86_64 (MySQL Community Server - GPL) # 跳过密码登录 mysqld --skip-grant-tables --usermysql mysql -uroot # 修改所有root密码 mysql ALTER USER rootlocalhost IDENTIFIED BY Pangle123; mysql ALTER USER root% IDENTIFIED BY Pangle123; mysql FLUSH PRIVILEGES; # 重启mysql pkill -9 mysql systemctl restart mysqld # 进入mysql创建数据库 mysql -uroot -pPangle123 mysql create database ry-vue; # Database服务下载ruoyi-vue git clone https://gitee.com/y_project/RuoYi-Vue.git cd RuoYi-Vue/sql/ # 导入sql脚本数据 mysql -uroot -pPangle123 -f ry-vue ry_20250522.sql mysql -uroot -pPangle123 -f ry-vue quartz.sql # 下载redis yum install redis # 编辑配置文件修改所有ip开放 vim /etc/redis/redis.conf ----------------------------------------------------------------------- bind 0.0.0.0 ----------------------------------------------------------------------- # 启动redis systemctl start redis4.通信要点Web项目请求大致流程是前端接收用户请求--将请求转发给后端--后端处理请求--读写数据库数据--逐级返回数据而因为前后端项目可部署在不同服务器上要满足流程的成功我们需要让前端、后端、数据库直接可以通信。通俗的说告诉前端后端在哪里、告诉后端数据库在哪里因此我们需要修改Gitlab中Ruoyi-Vue的相关配置让他们在发布到服务器后可以互相通信处理请求与数据配置redis地址打开ruoyi-admin/src/main/resources/application.yml点击编辑-编辑单个文件按以下修改后点击提交更改~~~ data: # redis 配置 redis: # 地址将localhost改为数据库服务器IP host: 10.0.0.138 # 端口默认为6379 port: 6379 ~~~配置mysql地址打开ruoyi-admin/src/main/resources/application-druid.yml点击编辑-编辑单个文件按以下修改后点击提交更改~~~ druid: # 主库数据源将localhost改为数据库服务器IP写入root用户密码 master: url: jdbc:mysql://10.0.0.138:3306/ry-vue?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLtrueserverTimezoneGMT%2B8 username: root password: Pangle123 ~~~为前端配置后端地址打开ruoyi-ui/vue.config.js点击编辑-编辑单个文件按以下修改后点击提交更改const baseUrl http://10.0.0.137:8080 // 后端接口将localhost改为App服务器IP完成以上配置我们就准备好了Ruoyi-Vue项目在发布前的所有源码配置后续只需要通过Jenkins对其进行自动化构建发布即可二、Jenkins任务配置1.新建任务拉取代码Jenkins主页点击新建任务任务名Ruoyi-Vue,选择自由风格项目确定源码管理选择Git写入Ruoyi-Vue的Gitlab地址因为我们是私有项目这里会显示鉴权失败因为私有项目的拉取需要账密或者令牌的验证点击添加Jenkins凭据类型就用Username with password账号密码形式用户名Gitlab的用户root密码root用户的密码描述在Jenkins中选择此账密的标识可以写入Gitlab私有仓库-账号-密码点击添加在Credentials选择刚配置的Gitlab私有仓库-账号-密码然后就可以看到之前鉴权失败的报错消失点击应用后保存先构建一次验证拉取代码步骤配置成功拉取代码2.打包前端在之前我们单个任务只需要对拉取到的后端代码用maven构建成jar包而Ruoyi-Vue的前端使用vue框架开发的可以将其依赖的静态资源等通过nodejs打包成dist包所以在Jenkins任务的构建步骤中主要完成nodejs打包前端成dist、maven构建后端成jar包- 下载NodeJS首先需要在Jenkins服务器安装nodejs# 下载并安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # 代替重启 shell \. $HOME/.nvm/nvm.sh # 下载并安装 Node.js nvm install 24 # 验证 Node.js 版本 node -v # Should print v24.14.0. # 验证 npm 版本 npm -v # Should print 11.9.0. # npm使用国内淘宝镜像 npm config set registry https://registry.npmmirror.com/- 配置全局工具查找命令位置Jenkins主页右上角设置--全局工具配置找到NodeJS安装点击新增NodeJS取消勾选自动安装别名Jenkins中此工具的标识配置为nodenpm安装目录之前查到的命令上层路径配置为/usr/bin应用后保存# 服务器查看node、npm命令安装位置 which node npm /usr/bin/node /usr/bin/npm打包前端- 打包前端包任务增加构建步骤,选择执行shell进入前端目录cd ruoyi-ui使用npm下载依赖npm install --registryhttps://registry.npmmirror.com根据依赖和源码打成dist包npm run build:prod点击应用后保存先构建验证打包前端步骤配置成功打包前端- 优化打包命令可以看到通过npm已将前端打包成dist目录但因为之后我们需要将dist包整个发送到Web服务器所以可以优化打包的命令通过zip命令将dist压缩为zip压缩包小体积方便后续发送并且通过BUILD_NUMBER环境变量命名压缩包BUILD_NUMBER是Jenkins内置的环境变量取值是该任务本次构建的构建号因为我们的Jenkins任务会多次运行每次都会多一个zip压缩包所以我们在构建之前先删除之前的压缩包最终优化后命令为cd ruoyi-ui rm -rf dist*.zip npm install --registryhttps://registry.npmmirror.com npm run build:prod zip -r dist-${BUILD_NUMBER}.zip ./dist/*3.构建后端- 工具确认之前的文档有通过maven构建jar包的过程所以Jenkins服务器已有maven若未按之前文档流程这里需要像NodeJS一样安装maven后配置全局工具- 构建后端任务增加构建步骤,选择执行shelljar包的构建依赖pom.xml文件Ruoyi-Vue的构建需要进入ruoyi-admin目录所以此处用shell命令进入目录cd ruoyi-admin任务增加构建步骤,选择调用顶层 Maven 目标Maven版本选择配置好的全局工具目标此构建步骤本质是执行mvn命令所以目标嵌入的就是mvn命令的选项和参数clean package -DskipTests依旧应用后保存立即构建验证配置构建后端4.运行前端- 配置web服务器在前端打包完成后就需要将其推送到web服务器这里我们使用Publish Over SSH插件可以使用这个插件配置连接指定服务器并执行相关命令、在Jenkins系统管理-插件管理中Available plugins搜索Publish Over SSH插件并安装在Jenkins系统管理-系统设置中拉到最下边可以看到该插件提供的相关设置点击新增添加web服务器相关信息Name自定义作为服务器在Jenkins中的标识Hostname为目标服务器IPUsername为登录用户名Remote Directory为登录目标服务器后的工作目录/usr/local/Ruoyi-Vue如果该目录不存在则需要去目标服务器手动创建点击高级勾选Use password authentication, or use a different key在Passphrase / Password填写登录用户名对应的密码运行前端- 发送前端包任务增加构建后操作步骤,选择Send build artifacts over SSH在SSH Server中Name选择我们之前在系统设置中配置的目标服务器名称webTransfer Set中Source files代表将Jenkins所在服务器那些文件复制到目标服务器这里我们选择本次构建压缩好后的zip压缩包ruoyi-ui/dist-${BUILD_NUMBER}.zipExec command为复制后需要在目标服务器执行的命令首先进入目标目录cd /usr/local/Ruoyi-Vue/ruoyi-ui然后实现a.解压zip压缩包unzip -o dist-${BUILD_NUMBER}.zipb.删除压缩包rm -rf dist-${BUILD_NUMBER}.zip运行前端- 添加nginx配置文件解压后dist目录是支持被nginx代理的因为打包后会生成index,html主页文件编辑配置文件vim /etc/nginx/conf.d/Ruoyi-Vue.conf插入以下数据注意设置后端转发然后nginx -t检查无误后nginx -s reload平滑应用server { listen 82; server_name localhost; charset utf-8; location / { root /usr/local/Ruoyi-Vue/ruoyi-ui/dist; try_files $uri $uri/ /index.html; index index.html index.htm; } location /prod-api/ { proxy_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; proxy_pass http://10.0.0.137:8080/; } # springdoc proxy location ~ ^/v3/api-docs/(.*) { proxy_pass http://10.0.0.137:8080/v3/api-docs/$1; } error_page 500 502 503 504 /50x.html; location /50x.html { root html; } }- 访问测试然后通过浏览器访问10.0.0.135:82可以看到若依的登录页只不过此时不显示验证码、无法登录。此为前端发布成功访问测试5.运行后端- 配置App服务器根据配置web服务器的步骤添加好App服务器此处创建并配置App服务器工作目录/usr/local/Ruoyi-Vue- 发送后端jar包在任务配置中Send build artifacts over SSH点击Add Server在SSH Server中Name选择我们之前在系统设置中配置的目标服务器名称AppTransfer Set中Source files代表将Jenkins所在服务器那些文件复制到目标服务器这里我们选择使用maven构建好的jar包ruoyi-admin/target/ruoyi-admin.jarExec command为复制后需要在目标服务器执行的命令首先进入目标目录cd /usr/local/Ruoyi-Vue/ruoyi-admin/target然后使用nohup后台运行java -jar启动命令nohup java -jar ruoyi-admin.jar --server.address0.0.0.0 ruoyi.log 21 运行后端- 访问测试再次通过浏览器访问10.0.0.135:82可以看到验证码正常显示登录后功能正常使用admin/admin123访问测试基于Docker的发布一、生产环境详解在目前的公司项目中预算是影响公司项目设计和服务架构的主要因素因此大多数公司都是采用前后端分离的项目设计docker容器集群的生产架构。而微服务项目和大型k8s架构因为成本等因素大多数公司不会采用。因此基于Docker发布前后端分离项目可以说算是行业主流而因为前端目录在打包后只是一些静态资源且使用nginx代理指定路径所以前端大概率不会以容器方式运行因为容器涉及到每次的dist目录映射、nginx配置文件的更新等。在此我们学习通过Jenkins对前端和之前一样打包发布到服务器本地后端通过docke运行成容器。因此前端的配置保留不变只设计后端基于docker发布的步骤二、后端配置首先理清java项目运行成容器的流程通过Maven将项目构建成jar包编写dockerfile基于jdk基础镜像自定义镜像作用是复制成品jar包到容器内使用java -jar启动Jenkins本地构建镜像标准化命名镜像后上传到Harbor仓库Jenkins通知App服务器前往Harbor仓库拉取指定镜像然后运行成容器1.新建任务、保留其他配置像之前一样创建新Jenkins自由风格任务Ruoyi-Vue-Docker按基于服务器的发布中二、1到二、4的配置保留其他配置2.编写dockerfiledockerfile的作用是通过配置自定义镜像因为需要通过它本地构建所以我们需要在Gitlab的Ruoyi-Vue项目中创建docker目录并新建编辑dockerfile文件# 镜像基于openjdk 17构建 FROM docker.io/openjdk:17 # 复制构建后的jar包到容器内指定目录 COPY ruoyi-admin.jar /usr/local/Ruoyi-Vue-Docker/ # 设置该容器工作目录 WORKDIR /usr/local/Ruoyi-Vue-Docker/ # 运行目录下的myapp.jar CMD java -jar ruoyi-admin.jar编写dockerfile3.Harbor创建仓库我们首先可以点击主页新建项目建立一个新的仓库因截图时网络问题Harbor服务器用的云服务器121.4.90.98*项目名称是这个仓库的名称设置为ruoyi *访问级别如果未勾选公开则进入此仓库操作需要账号密码设置勾选 *项目配额限制为此仓库空间占用限制-1代表无限容量 *镜像代理暂时不需要设置这个镜像仓库也像Gitlab一样可以设置不同用户和角色进行合作管理推送要求参考07-Harbor镜像仓库--二、2.推送要求4.构建镜像、上传Harbor任务增加构建步骤,选择执行shelldockerfile中有COPY ruoyi-admin.jar /usr/local/Ruoyi-Vue-Docker/需要复制当前目录下的ruoyi-admin.jar到容器内而构建镜像时所在目录是dockerfile所在目录也就是docker/因此首先得将构建好的jar包复制到docker目录mv ruoyi-admin/target/*.jar docker/根据dockerfile构建自定义镜像docker build -t ruoyi-vue:latest docker/登录Harbor仓库docker login -u admin -p Harbor12345 10.0.0.139:80将镜像重命名成标准镜像名docker tag ruoyi-vue:latest 10.0.0.139:80/ruoyi/ruoyi-vue:latest之后推送Harbor仓库docker push 10.0.0.139/ruoyi/ruoyi-vue:latest删除本地构建镜像docker rmi ruoyi-vue:latest依旧应用后保存立即构建验证配置上传Harbor5.App服务器制作运行脚本在Jenkins完成镜像制作推送镜像到Harbor仓库后需要Jenkins通知目标App服务器进入Harbor仓库拉取制作好的自定义镜像并将其运行成镜像Jenkins告知App拉取哪个镜像判断当前是否正在运行这个镜像形成的容器需要停止并删除判断当前是否存在当前镜像需要删除目标服务拉取Harbor上的镜像将拉取下来的镜像运行成容器而这些操作都让Jenkins来告知完成的话成本较大且每次修改都需要进入Jenkins的任务配置我们可以在App服务器编写脚本完成这些操作Jenkins服务器只需要让App运行这个脚本即可并且在运行这个脚本时标准镜像名中的每个参数都需要Jenkins服务器告知App服务器App服务器才知道拉取哪个镜像。这些参数有Harbor仓库地址、Harbor仓库名、镜像名、镜像版本其次容器运行时是需要占用App服务器的端口Jenkins服务器也需要告知App服务器可占用的端口号# 在application服务器编辑脚本文件 vim /usr/bin/deploy.sh ------------------------------------------------------------------------------- harbor_addr$1 harbor_repo$2 project$3 version$4 host_port$5 container_port$6 # 由Jenkins告知需要拉取的镜像信息 imageName$harbor_addr/$harbor_repo/$project:$version # step1:查看当前镜像是否有容器运行,若有则停止删除容器 containerIDdocker ps -a | grep ${project} | awk {print $1} if [ $containerID ! ] ; then docker stop $containerID docker rm $containerID fi # step2:查看当前是否存在相同镜像,如果有则删除 tagdocker images --format {{.Tag}} ${project} if [[ $tag ~ $version ]] ; then docker rmi $imageName fi # step3:登录远程Harbor仓库,拉取镜像 echo Harbor12345 | docker login -u admin --password-stdin $harbor_addr docker pull $imageName # step4:将拉取的镜像运行成容器 docker run -d -p $host_port:$container_port --name $project $imageName -------------------------------------------------------------------------------6.构建后任务配置在以上配置都完成后我们只需要在Jenkins任务中让Jenkins通知目标服务器执行脚本即可在任务配置中已有构建后步骤为发送前端包再点击Add Server添加服务器SSH Server的Name选择之前配置的AppExec command写入执行目标服务器的脚本文件并且传入所需参数sh /usr/bin/deploy.sh 10.0.0.139:80 mydevops ruoyi-vue latest 8080 8080此处需要确保App服务器之前运行的进程未占用8080端口应用保存后点击构建查看控制台输出无报错且App服务器容器运行正常Ruoyi-Vue基于docker发布成功构建任务三、访问测试通过浏览器访问10.0.0.135:82可以看到验证码正常显示登录后功能正常使用admin/admin123访问测试
08-实战：RuoYi-Vue项目的自动化发布
发布时间：2026/5/21 2:51:05
服务器资源与角色身份角色ip版本服务器Gitlab10.0.0.133Rocky Linux 9服务器Jenkins10.0.0.134Rocky Linux 9服务器Web10.0.0.135Rocky Linux 9服务器APP10.0.0.137Rocky Linux 9服务器Database10.0.0.138Rocky Linux 9服务器Harbor10.0.0.139Rocky Linux 9中间件Harbor-2.14.2基于若依分离版ruoyi-vue项目的发布传统java项目因为前后端代码耦合度高修改某处需要整体重新打包复用性和可维护性较低。因代码的物理耦合导致部署时候需要部署在同一服务器对服务器资源要求较高服务器宕机对业务的影响巨大。因此前后端分离是目前主流的 Web 项目架构模式是将代码解耦后将前后端拆分成独立应用前端只需加载静态界面用户请求、业务处理通过后端完成前后端只需要通过API通信。这就意味着在部署上前后端可以部署在不同服务器甚至集群只需满足服务器基础通信就行。之前02-静态页面的发布就是前端的部署方式只是目前都是通过nodejs将前端构建打包成dist目录交给nginx代理而03-Maven项目的发布就是后端的部署方式也是通过maven将后端打包构建成jar包后使用java -jar启动通过Jenkins一键发布前后端分离项目其实就是通过一个任务同时完成前、后端的打包、发送、启动。因此目前的完整步骤是Jenkins拉取代码--进入前端目录构建前端--进入后端目录构建后端--分别发送前、后端构建产物到对应服务器--前端服务器启动nginx代理--后端服务器java -jar启动--浏览器成功访问业务请求处理正常基于服务器的发布一、源码准备1.Ruoyi-Vue介绍RuoYi-Vue是一个 Java EE 企业级快速开发平台基于经典技术组合Spring Boot、Spring Security、MyBatis、Jwt、Vue内置模块如部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、通知公告、代码生成等。在线定时任务配置支持集群支持多数据源支持分布式事务等。若依官网http://ruoyi.vip演示地址http://vue.ruoyi.vip代码下载https://gitee.com/y_project/RuoYi-Vue2.复制官方代码仓库首先将ruoyi-vue拉取到Gitlab仓库创建Gitlab空白仓库Ruoyi-Vue拉取gitee公有项目RuoYi-Vue到Gitlab服务器本地推送已拉取到本地的项目到创建好的Gitlab私有仓库# 镜像克隆Gitee仓库 git clone --mirror https://gitee.com/y_project/RuoYi-Vue.git ruoyi-vue-mirror.git cd ruoyi-vue-mirror.git # 替换远程仓库的推送地址为私有GitLab仓库 git remote set-url --push origin http://localhost:8765/root/Ruoyi-Vue.git # 推送到私有仓库 git push --mirror - 输入Gitlab的账号和密码复制仓库3.数据准备ruoyi-vue需要mysql和redis提供数据存储交互在Database服务器先安装mysql和redis后根据官方文档创建对应数据库导入sql脚本# 清理环境 yum -y erase rpm -qa | grep -E mysql|mariadb rm -rf /etc/my* /var/lib/mysql* /var/log/mysql* # 安装mysql的官方YUM仓库与指定安装8.0版本 yum install -y https://dev.mysql.com/get/mysql84-community-release-el9-2.noarch.rpm yum install -y mysql-community-server --enablerepo mysql80-community --disablerepo mysql-8.4-lts-community # 启动mysql并修改初始密码 systemctl start mysqld # 查看版本验证安装 mysql --version mysql Ver 8.0.42 for Linux on x86_64 (MySQL Community Server - GPL) # 跳过密码登录 mysqld --skip-grant-tables --usermysql mysql -uroot # 修改所有root密码 mysql ALTER USER rootlocalhost IDENTIFIED BY Pangle123; mysql ALTER USER root% IDENTIFIED BY Pangle123; mysql FLUSH PRIVILEGES; # 重启mysql pkill -9 mysql systemctl restart mysqld # 进入mysql创建数据库 mysql -uroot -pPangle123 mysql create database ry-vue; # Database服务下载ruoyi-vue git clone https://gitee.com/y_project/RuoYi-Vue.git cd RuoYi-Vue/sql/ # 导入sql脚本数据 mysql -uroot -pPangle123 -f ry-vue ry_20250522.sql mysql -uroot -pPangle123 -f ry-vue quartz.sql # 下载redis yum install redis # 编辑配置文件修改所有ip开放 vim /etc/redis/redis.conf ----------------------------------------------------------------------- bind 0.0.0.0 ----------------------------------------------------------------------- # 启动redis systemctl start redis4.通信要点Web项目请求大致流程是前端接收用户请求--将请求转发给后端--后端处理请求--读写数据库数据--逐级返回数据而因为前后端项目可部署在不同服务器上要满足流程的成功我们需要让前端、后端、数据库直接可以通信。通俗的说告诉前端后端在哪里、告诉后端数据库在哪里因此我们需要修改Gitlab中Ruoyi-Vue的相关配置让他们在发布到服务器后可以互相通信处理请求与数据配置redis地址打开ruoyi-admin/src/main/resources/application.yml点击编辑-编辑单个文件按以下修改后点击提交更改~~~ data: # redis 配置 redis: # 地址将localhost改为数据库服务器IP host: 10.0.0.138 # 端口默认为6379 port: 6379 ~~~配置mysql地址打开ruoyi-admin/src/main/resources/application-druid.yml点击编辑-编辑单个文件按以下修改后点击提交更改~~~ druid: # 主库数据源将localhost改为数据库服务器IP写入root用户密码 master: url: jdbc:mysql://10.0.0.138:3306/ry-vue?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLtrueserverTimezoneGMT%2B8 username: root password: Pangle123 ~~~为前端配置后端地址打开ruoyi-ui/vue.config.js点击编辑-编辑单个文件按以下修改后点击提交更改const baseUrl http://10.0.0.137:8080 // 后端接口将localhost改为App服务器IP完成以上配置我们就准备好了Ruoyi-Vue项目在发布前的所有源码配置后续只需要通过Jenkins对其进行自动化构建发布即可二、Jenkins任务配置1.新建任务拉取代码Jenkins主页点击新建任务任务名Ruoyi-Vue,选择自由风格项目确定源码管理选择Git写入Ruoyi-Vue的Gitlab地址因为我们是私有项目这里会显示鉴权失败因为私有项目的拉取需要账密或者令牌的验证点击添加Jenkins凭据类型就用Username with password账号密码形式用户名Gitlab的用户root密码root用户的密码描述在Jenkins中选择此账密的标识可以写入Gitlab私有仓库-账号-密码点击添加在Credentials选择刚配置的Gitlab私有仓库-账号-密码然后就可以看到之前鉴权失败的报错消失点击应用后保存先构建一次验证拉取代码步骤配置成功拉取代码2.打包前端在之前我们单个任务只需要对拉取到的后端代码用maven构建成jar包而Ruoyi-Vue的前端使用vue框架开发的可以将其依赖的静态资源等通过nodejs打包成dist包所以在Jenkins任务的构建步骤中主要完成nodejs打包前端成dist、maven构建后端成jar包- 下载NodeJS首先需要在Jenkins服务器安装nodejs# 下载并安装 nvm curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash # 代替重启 shell \. $HOME/.nvm/nvm.sh # 下载并安装 Node.js nvm install 24 # 验证 Node.js 版本 node -v # Should print v24.14.0. # 验证 npm 版本 npm -v # Should print 11.9.0. # npm使用国内淘宝镜像 npm config set registry https://registry.npmmirror.com/- 配置全局工具查找命令位置Jenkins主页右上角设置--全局工具配置找到NodeJS安装点击新增NodeJS取消勾选自动安装别名Jenkins中此工具的标识配置为nodenpm安装目录之前查到的命令上层路径配置为/usr/bin应用后保存# 服务器查看node、npm命令安装位置 which node npm /usr/bin/node /usr/bin/npm打包前端- 打包前端包任务增加构建步骤,选择执行shell进入前端目录cd ruoyi-ui使用npm下载依赖npm install --registryhttps://registry.npmmirror.com根据依赖和源码打成dist包npm run build:prod点击应用后保存先构建验证打包前端步骤配置成功打包前端- 优化打包命令可以看到通过npm已将前端打包成dist目录但因为之后我们需要将dist包整个发送到Web服务器所以可以优化打包的命令通过zip命令将dist压缩为zip压缩包小体积方便后续发送并且通过BUILD_NUMBER环境变量命名压缩包BUILD_NUMBER是Jenkins内置的环境变量取值是该任务本次构建的构建号因为我们的Jenkins任务会多次运行每次都会多一个zip压缩包所以我们在构建之前先删除之前的压缩包最终优化后命令为cd ruoyi-ui rm -rf dist*.zip npm install --registryhttps://registry.npmmirror.com npm run build:prod zip -r dist-${BUILD_NUMBER}.zip ./dist/*3.构建后端- 工具确认之前的文档有通过maven构建jar包的过程所以Jenkins服务器已有maven若未按之前文档流程这里需要像NodeJS一样安装maven后配置全局工具- 构建后端任务增加构建步骤,选择执行shelljar包的构建依赖pom.xml文件Ruoyi-Vue的构建需要进入ruoyi-admin目录所以此处用shell命令进入目录cd ruoyi-admin任务增加构建步骤,选择调用顶层 Maven 目标Maven版本选择配置好的全局工具目标此构建步骤本质是执行mvn命令所以目标嵌入的就是mvn命令的选项和参数clean package -DskipTests依旧应用后保存立即构建验证配置构建后端4.运行前端- 配置web服务器在前端打包完成后就需要将其推送到web服务器这里我们使用Publish Over SSH插件可以使用这个插件配置连接指定服务器并执行相关命令、在Jenkins系统管理-插件管理中Available plugins搜索Publish Over SSH插件并安装在Jenkins系统管理-系统设置中拉到最下边可以看到该插件提供的相关设置点击新增添加web服务器相关信息Name自定义作为服务器在Jenkins中的标识Hostname为目标服务器IPUsername为登录用户名Remote Directory为登录目标服务器后的工作目录/usr/local/Ruoyi-Vue如果该目录不存在则需要去目标服务器手动创建点击高级勾选Use password authentication, or use a different key在Passphrase / Password填写登录用户名对应的密码运行前端- 发送前端包任务增加构建后操作步骤,选择Send build artifacts over SSH在SSH Server中Name选择我们之前在系统设置中配置的目标服务器名称webTransfer Set中Source files代表将Jenkins所在服务器那些文件复制到目标服务器这里我们选择本次构建压缩好后的zip压缩包ruoyi-ui/dist-${BUILD_NUMBER}.zipExec command为复制后需要在目标服务器执行的命令首先进入目标目录cd /usr/local/Ruoyi-Vue/ruoyi-ui然后实现a.解压zip压缩包unzip -o dist-${BUILD_NUMBER}.zipb.删除压缩包rm -rf dist-${BUILD_NUMBER}.zip运行前端- 添加nginx配置文件解压后dist目录是支持被nginx代理的因为打包后会生成index,html主页文件编辑配置文件vim /etc/nginx/conf.d/Ruoyi-Vue.conf插入以下数据注意设置后端转发然后nginx -t检查无误后nginx -s reload平滑应用server { listen 82; server_name localhost; charset utf-8; location / { root /usr/local/Ruoyi-Vue/ruoyi-ui/dist; try_files $uri $uri/ /index.html; index index.html index.htm; } location /prod-api/ { proxy_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; proxy_pass http://10.0.0.137:8080/; } # springdoc proxy location ~ ^/v3/api-docs/(.*) { proxy_pass http://10.0.0.137:8080/v3/api-docs/$1; } error_page 500 502 503 504 /50x.html; location /50x.html { root html; } }- 访问测试然后通过浏览器访问10.0.0.135:82可以看到若依的登录页只不过此时不显示验证码、无法登录。此为前端发布成功访问测试5.运行后端- 配置App服务器根据配置web服务器的步骤添加好App服务器此处创建并配置App服务器工作目录/usr/local/Ruoyi-Vue- 发送后端jar包在任务配置中Send build artifacts over SSH点击Add Server在SSH Server中Name选择我们之前在系统设置中配置的目标服务器名称AppTransfer Set中Source files代表将Jenkins所在服务器那些文件复制到目标服务器这里我们选择使用maven构建好的jar包ruoyi-admin/target/ruoyi-admin.jarExec command为复制后需要在目标服务器执行的命令首先进入目标目录cd /usr/local/Ruoyi-Vue/ruoyi-admin/target然后使用nohup后台运行java -jar启动命令nohup java -jar ruoyi-admin.jar --server.address0.0.0.0 ruoyi.log 21 运行后端- 访问测试再次通过浏览器访问10.0.0.135:82可以看到验证码正常显示登录后功能正常使用admin/admin123访问测试基于Docker的发布一、生产环境详解在目前的公司项目中预算是影响公司项目设计和服务架构的主要因素因此大多数公司都是采用前后端分离的项目设计docker容器集群的生产架构。而微服务项目和大型k8s架构因为成本等因素大多数公司不会采用。因此基于Docker发布前后端分离项目可以说算是行业主流而因为前端目录在打包后只是一些静态资源且使用nginx代理指定路径所以前端大概率不会以容器方式运行因为容器涉及到每次的dist目录映射、nginx配置文件的更新等。在此我们学习通过Jenkins对前端和之前一样打包发布到服务器本地后端通过docke运行成容器。因此前端的配置保留不变只设计后端基于docker发布的步骤二、后端配置首先理清java项目运行成容器的流程通过Maven将项目构建成jar包编写dockerfile基于jdk基础镜像自定义镜像作用是复制成品jar包到容器内使用java -jar启动Jenkins本地构建镜像标准化命名镜像后上传到Harbor仓库Jenkins通知App服务器前往Harbor仓库拉取指定镜像然后运行成容器1.新建任务、保留其他配置像之前一样创建新Jenkins自由风格任务Ruoyi-Vue-Docker按基于服务器的发布中二、1到二、4的配置保留其他配置2.编写dockerfiledockerfile的作用是通过配置自定义镜像因为需要通过它本地构建所以我们需要在Gitlab的Ruoyi-Vue项目中创建docker目录并新建编辑dockerfile文件# 镜像基于openjdk 17构建 FROM docker.io/openjdk:17 # 复制构建后的jar包到容器内指定目录 COPY ruoyi-admin.jar /usr/local/Ruoyi-Vue-Docker/ # 设置该容器工作目录 WORKDIR /usr/local/Ruoyi-Vue-Docker/ # 运行目录下的myapp.jar CMD java -jar ruoyi-admin.jar编写dockerfile3.Harbor创建仓库我们首先可以点击主页新建项目建立一个新的仓库因截图时网络问题Harbor服务器用的云服务器121.4.90.98*项目名称是这个仓库的名称设置为ruoyi *访问级别如果未勾选公开则进入此仓库操作需要账号密码设置勾选 *项目配额限制为此仓库空间占用限制-1代表无限容量 *镜像代理暂时不需要设置这个镜像仓库也像Gitlab一样可以设置不同用户和角色进行合作管理推送要求参考07-Harbor镜像仓库--二、2.推送要求4.构建镜像、上传Harbor任务增加构建步骤,选择执行shelldockerfile中有COPY ruoyi-admin.jar /usr/local/Ruoyi-Vue-Docker/需要复制当前目录下的ruoyi-admin.jar到容器内而构建镜像时所在目录是dockerfile所在目录也就是docker/因此首先得将构建好的jar包复制到docker目录mv ruoyi-admin/target/*.jar docker/根据dockerfile构建自定义镜像docker build -t ruoyi-vue:latest docker/登录Harbor仓库docker login -u admin -p Harbor12345 10.0.0.139:80将镜像重命名成标准镜像名docker tag ruoyi-vue:latest 10.0.0.139:80/ruoyi/ruoyi-vue:latest之后推送Harbor仓库docker push 10.0.0.139/ruoyi/ruoyi-vue:latest删除本地构建镜像docker rmi ruoyi-vue:latest依旧应用后保存立即构建验证配置上传Harbor5.App服务器制作运行脚本在Jenkins完成镜像制作推送镜像到Harbor仓库后需要Jenkins通知目标App服务器进入Harbor仓库拉取制作好的自定义镜像并将其运行成镜像Jenkins告知App拉取哪个镜像判断当前是否正在运行这个镜像形成的容器需要停止并删除判断当前是否存在当前镜像需要删除目标服务拉取Harbor上的镜像将拉取下来的镜像运行成容器而这些操作都让Jenkins来告知完成的话成本较大且每次修改都需要进入Jenkins的任务配置我们可以在App服务器编写脚本完成这些操作Jenkins服务器只需要让App运行这个脚本即可并且在运行这个脚本时标准镜像名中的每个参数都需要Jenkins服务器告知App服务器App服务器才知道拉取哪个镜像。这些参数有Harbor仓库地址、Harbor仓库名、镜像名、镜像版本其次容器运行时是需要占用App服务器的端口Jenkins服务器也需要告知App服务器可占用的端口号# 在application服务器编辑脚本文件 vim /usr/bin/deploy.sh ------------------------------------------------------------------------------- harbor_addr$1 harbor_repo$2 project$3 version$4 host_port$5 container_port$6 # 由Jenkins告知需要拉取的镜像信息 imageName$harbor_addr/$harbor_repo/$project:$version # step1:查看当前镜像是否有容器运行,若有则停止删除容器 containerIDdocker ps -a | grep ${project} | awk {print $1} if [ $containerID ! ] ; then docker stop $containerID docker rm $containerID fi # step2:查看当前是否存在相同镜像,如果有则删除 tagdocker images --format {{.Tag}} ${project} if [[ $tag ~ $version ]] ; then docker rmi $imageName fi # step3:登录远程Harbor仓库,拉取镜像 echo Harbor12345 | docker login -u admin --password-stdin $harbor_addr docker pull $imageName # step4:将拉取的镜像运行成容器 docker run -d -p $host_port:$container_port --name $project $imageName -------------------------------------------------------------------------------6.构建后任务配置在以上配置都完成后我们只需要在Jenkins任务中让Jenkins通知目标服务器执行脚本即可在任务配置中已有构建后步骤为发送前端包再点击Add Server添加服务器SSH Server的Name选择之前配置的AppExec command写入执行目标服务器的脚本文件并且传入所需参数sh /usr/bin/deploy.sh 10.0.0.139:80 mydevops ruoyi-vue latest 8080 8080此处需要确保App服务器之前运行的进程未占用8080端口应用保存后点击构建查看控制台输出无报错且App服务器容器运行正常Ruoyi-Vue基于docker发布成功构建任务三、访问测试通过浏览器访问10.0.0.135:82可以看到验证码正常显示登录后功能正常使用admin/admin123访问测试
