Jenkins自动化部署前端vue项目

作者

Author：西柚eric.ding Blog： https://www.dcmickey.cn/

环境

Windows Server服务器

NodeJS环境

软件集

自行下载

Jenkins（jenkins.msi）
JDK（jdk-8u191-windows-x64-8.0.1910.12.exe： Java8的）不要太新会有问题
Git （Git-2.33.0.2-64-bit.exe）

必备条件

唯一且强制

确保服务器需要能访问git仓库地址

食用方式

本教程不含自动监听push，权限不够，需要gitlab上配置。本教程采用的是定时轮询SCM，会增大系统的开销，依据对环境稳定性的要求自行决定要不要接，这里是UAT无所谓也支持手动点jenkins的一键构建

往下翻至==一键部署==查看如何部署

安装教程

安装步骤略

略，若需要请移步我的另一篇博客《Jenkins自动化部署.NetCore项目到Windows的IIS上》

下载nodejs插件

在jenkins的插件管理中搜索nodejs并下载
重启jenkins
在“系统管理-全局工具配置”中配置NodeJS插件，使用自动安装或手工指定均可：

配置时选择的nodejs版本不要太高，选择项目匹配的，否则会有问题，我用的是14.x的版本

可能遇到的报错截图，原因就是版本问题

进入正题

开始新建项目

选择复制一个已存在的

源码配置

修改源码地址

构建触发器

本文采用使用定时轮询SCM机制，定时轮询如果检测到变化则自动部署可以到 https://crontab.guru 网站来测试没有做webhook自动监听push动作，因为git无权限配置定时轮询SCM语法： * * * * * 第一颗*表示分钟，取值0~59 第二颗*表示小时，取值0~23 第三颗*表示一个月的第几天，取值1~31 第四颗*表示第几月，取值1~12 第五颗*表示一周中的第几天，取值0~7，其中0和7代表的都是周日

代码语言：javascript复制

#每半小时构建一次OR每半小时检查一次远程代码分支，有更新则构建
H/30 * * * *

#每10分钟
H/10 * * * *

#每两小时构建一次OR每两小时检查一次远程代码分支，有更新则构建
H H/2 * * *

#每天凌晨两点定时构建
H 2 * * *

#每月15号执行构建
H H 15 * *

#工作日，上午9点整执行
H 9 * * 1-5

#每周1,3,5，从8:30开始，截止19:30，每4小时30分构建一次
H/30 8-20/4 * * 1,3,5

构建环境

安装了nodejs插件的才能看到这个

构建配置

windows选择 execute windows batch command，如果是linux系统需要选择 execute shell

分段添加脚本（也可以合在一起）

构建部署

使用$JOB_NAME 自动抓取任务名称

打包部署包

代码语言：javascript复制

call echo 构建_01注册淘宝镜像
call npm config set registry https://registry.npm.taobao.org
call echo 构建_02检查注册结果
call npm config get registry
call echo 构建_03依赖安装
call npm install
call echo 构建_04编译打包
call npm run build
call echo 进入client路径
call cd .client
call chdir
call echo npm install
call echo npm install --save pdfjs@2.5.207
call echo 编译打包
call npm run build
call cd ..
call echo 复制
call xcopy ".dist" "D:varwwwboostrsun.webdist" /s/e/y/q/exclude:D:softjenkins.ignore.web.txt
call xcopy ".public" "D:varwwwboostrsun.webpublic" /s/e/y/q