【服务器部署】Jenkins配置前端工程自动化部署

作者介绍：本人笔名姑苏老陈，从事JAVA开发工作十多年了，带过刚毕业的实习生，也带过技术团队。最近有个朋友的表弟，马上要大学毕业了，想从事JAVA开发工作，但不知道从何处入手。于是，产生了写一个博客专栏想法，介绍当前互联网企业JAVA项目开发如何快速入门。

本文收录于《30天企业JAVA项目开发实战入门》专栏，该专栏内容以当前互联网软件企业中的项目实战为线索，介绍企业JAVA项目开发中涉及到的开发流程、技术、工具、规范要求等等。帮助想从事JAVA开发的大学生或新人，更快、更好的入门JAVA后端开发工作。

一、前言

本文介绍如何通过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配置前端工程自动化部署进行了介绍，希望对大家有帮助，谢谢。
另外，在部署过程了，也遇到了一些问题。其中值得注意的一点是关于前端页面路由相关的问题。最终，通过修改前端代码中路由模式和路由实现方式，解决了问题。