作者介绍：本人笔名姑苏老陈，从事JAVA开发工作十多年了，带过刚毕业的实习生，也带过技术团队。最近有个朋友的表弟，马上要大学毕业了，想从事JAVA开发工作，但不知道从何处入手。于是，产生了写一个博客专栏想法，介绍当前互联网企业JAVA项目开发如何快速入门。
本文收录于《30天企业JAVA项目开发实战入门》专栏，该专栏内容以当前互联网软件企业中的项目实战为线索，介绍企业JAVA项目开发中涉及到的开发流程、技术、工具、规范要求等等。帮助想从事JAVA开发的大学生或新人，更快、更好的入门JAVA后端开发工作。
文章目录
- 一、前言
- 二、准备资源
- 三、Nginx配置
- 四、代码配置文件修改
- 五、Jenkins全局工具配置
- 六、配置项目的Jenkins任务
- 七、执行项目的Jenkins任务，实现自动化部署
- 八、总结
一、前言
本文介绍如何通过Jenkins配置前端工程进行自动化部署。这里以若依Spring-cloud项目中ruoyi-ui前端工程为示例，介绍如何通过Jenkins配置若依ruoyi-ui前端工程，实现自动化发布部署到服务器上。
首先，梳理一下，我们要实现的自动化发布部署的流程如下：
1）首先，使用git从远程代码仓库中拉取最新的代码；
2）之后，使用node.js环境、npm包管理工具对代码进行编译打包；
3）最后，把编译后的代码使用ansible运维工具同步到nginx服务器上。至此，自动化发布部署完成。
二、准备资源
1）环境要求
CentOS7.9 64位、Git1.8、Jenkins2.260、node-v16.20.2、npm8.19.4、nginx-1.24.0、ansible2.9.27
2）服务器资源
阿里云ECS服务器172.22.187.36（安装Jenkins等第三方应用）
阿里云ECS服务器172.22.187.40（部署nginx和ruoyi-ui项目）
3）服务器上应用安装清单
Jenkins发布工具，安装参考见本专栏链接：https://blog.csdn.net/u012171005/article/details/138182743
nodejs和npm，安装参考见本专栏链接：https://blog.csdn.net/u012171005/article/details/139301480
nginx服务器，安装参考见本专栏链接：https://blog.csdn.net/u012171005/article/details/137740079
Ansible运维工具，安装参考见本专栏链接：https://blog.csdn.net/u012171005/article/details/138136832
4）其他资源
代码仓库使用码云gitee，RuoYi-Cloud代码下载地址：https://gitee.com/y_project/RuoYi-Cloud（PS：前端工程指RuoYi-Cloud工程中的ruoyi-ui子工程）
三、Nginx配置
首先，找到Nginx配置文件nginx.conf;
之后，配置前端页面和后端API接口访问代理。其中，前端页面访问路径统一配置使用“/ui”，后端API接口访问路径统一配置使用“/cms-api”。
修改后的完整的配置文件nginx.conf内容如下：
#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
#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 logs/access.log main;
sendfile on;
#tcp_nopush on;
#keepalive_timeout 0;
keepalive_timeout 65;
#gzip on;
#负载均衡
upstream cmsGateway {
server localhost:8080;
}
server {
listen 80;
server_name 监听的服务器域名或IP;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root html;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
#后端API接口访问路径统一配置使用/cms-api
location /cms-api/ {
proxy_pass http://cmsGateway/;
proxy_connect_timeout 600;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
#前端页面访问路径统一配置使用/ui
location /ui {
alias /usr/local/web/ruoyi/kenny;
index index.html index.htm;
}
}
}
修改完成后，重载配置，使配置生效。
./nginx -s reload
四、代码配置文件修改
之后，对前端工程ruoyi-ui中部分代码配置文件进行修改；
首先，修改路由器模式，这里使用hash模式，即页面访问路径带#的方式。
在router>index.js文件中，路由模式由history修改为hash模式；
之后，修改路由懒加载方式。
开发环境、测试环境、生产环境中路由懒加载实现方式，统一使用require方式实现，而不是使用import方式；
在modules>permisson.js中修改懒加载实现方式。
之后，修改开发环境、测试环境、生产环境配置文件，后端API接口访问根路径统一为“/cms-api”，跟nginx中配置保持一致；
之后，修改响应拦截器中跳转路径为“/ui”，跟nginx中配置保持一致；
之后，修改登录后首页右上角注销后跳转路径为“/ui”，跟nginx中配置保持一致；
至此，代码配置文件修改完成。
五、Jenkins全局工具配置
下面进行Jenkins全局工具配置。
首先配置nodejs信息；
之后，配置git信息；
至此，Jenkins全局工具配置完成。
六、配置项目的Jenkins任务
下面开始新建和配置Jenkins任务。
首先，新增一个Jenkins任务，填写任务名称，选择自由风格的软件项目，点击确定。
之后，填写任务描述；
之后，填写保持构建信息；
之后，填写git源码管理信息；
之后，填写构建环境信息；（PS：nodejs16指前面Jenkins全局工具配置中的信息）
之后，填写执行的shell脚步内容。
完整的shell脚本内容如下：
#npm config set设置仓库地址脚本，执行一次即可
#npm config set registry http://registry.npm.taobao.org
#npm install安装依赖包脚本，执行一次即可
#npm install
#编译打包
npm run build:stage
#同步到nginx服务器上
ansible 172.22.187.40 -m copy -a "src=/root/.jenkins/workspace/ruoyi-ui/dist/ dest=/usr/local/web/ruoyi/kenny"
最后，点击应用和保存，完成任务创建。
七、执行项目的Jenkins任务，实现自动化部署
Jenkins任务创建完成后，下面开始执行Jenkins任务构建，进行自动化部署。
首先在任务列表中，选择要构建的任务，之后，点击构建。
开始构建后，控制台输出构建信息。
如果控制台最后输出SUCCES字样，说明部署成功了。之后，打开浏览器，输入地址：http://外网IP/ui/#/login 访问页面。
(PS：默认账号为admin/admin123)
至此，Jenkins配置前端工程自动化部署完成。
八、总结
以上通过部署若依开源ruoyi-ui项目，对Jenkins配置前端工程自动化部署进行了介绍，希望对大家有帮助，谢谢。
另外，在部署过程了，也遇到了一些问题。其中值得注意的一点是关于前端页面路由相关的问题。最终，通过修改前端代码中路由模式和路由实现方式，解决了问题。
