Jenkins 自动构建 vue 前端项目:
平时部署前端项目每次都需要前端人员build打包,然后给后端,后端丢到服务器上,但是这个确实很麻烦,有时候一天得发好多次,很是麻烦,而且出错概率高,所以今天来弄下自动部署 前端项目
jenkins git node ,npm 必须要装(jenkisn安装可以看我之前发的jenkins安装笔记,node 和 npm 安装相对简单,就不做介绍了)
具体思路:jenkins 从git 上检出 前端代码到jenkins 的工作目录,(/var/lib/jenkins/workspace/)然后 npm install,接着npm run build 打包即可,最后 通过 cp 命令将 打包好的静态文件拷贝到nginx 服务器 目录即可
1.jenkins 和 node ,nom 环境都搭好的情况下开业创建项目
2.选择代码检出方式
3.上面提到了参数化构建,大家可以使用这个
4.选择node 构建
5.全局工具 node配置,这个顺序好像有点晚,属于Jenkins环境那环步骤
到这里基本上就完了,就剩执行 shell 脚本,npm install ,build ,然后拷贝文件到nginx 服务器
具体看下图
下面我贴上脚本
这是我的 项目名称 和 拷贝路径,你根据自己情况更改脚本
注意!要知道 jenkins 的工作目录是在/var/lib/jenkins/workspace/
也就是说,你从git上拉下来的代码,会在这个目录下,那么也就是从这个目录拷贝静态文件到你 web 服务器目录即可,比如 nginx ,tomcat 等相关目录下即可
cd /var/lib/jenkins/workspace/feynman-village-admin && npm install && npm run build && cp -r /var/lib/jenkins/workspace/feynman-village-admin/dist/* /usr/local/nginx/html/zhicun/admin/
到这里就结束了,总体来讲还是很简单的,比部署java 环境 难多了。
当然 我在实践还是出了一些错误,不过都是 npm 包 版本问题,百度可以解决,不行就更换package.json 中的 依赖版本,
注意!!出现依赖错误,最好修改后,直接删除node.modes 文件夹。然后重新npm install