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插件

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

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

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

进入正题

开始新建项目

选择复制一个已存在的

源码配置

修改源码地址

构建触发器

本文采用使用定时轮询SCM机制,定时轮询如果检测到变化则自动部署

可以到 https://crontab.guru 网站来测试

没有做webhook自动监听push动作,因为git无权限配置

定时轮询SCM语法:

* * * * *
第一颗*表示分钟,取值0~59
第二颗*表示小时,取值0~23
第三颗*表示一个月的第几天,取值1~31
第四颗*表示第几月,取值1~12
第五颗*表示一周中的第几天,取值0~7,其中0和7代表的都是周日
#每半小时构建一次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 自动抓取任务名称

  1. 打包部署包
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:\var\www\boost\rsun.web\dist" /s/e/y/q/exclude:D:\soft\jenkins.ignore.web.txt
call xcopy ".\public" "D:\var\www\boost\rsun.web\public" /s/e/y/q

==部署时的排除文件==

D:softjenkins.ignore.web.txt

config.dev.json
config.json
  1. 重新启动windows服务

启动和关闭服务的时候,其语法是:

net start 服务名

net stop 服务名

没有restart命令~

net stop rsun.web
net start rsun.web

效果图

一键部署

如果想要手动立刻执行自动化部署,则看这里

本文已经加入轮询会定时检测变化已部署

点击Build Now

over!!!

image-20211104160756710

FAQ:构建失败

部署失败,npm install报错

报错截图

解决方案是: 将本地的包直接复制过来替换掉, 然后命令脚本中跳过npm install 直接npm run build

参考网址:

jenkins安装插件的两种方式:https://www.jianshu.com/p/3b5ebe85c034

jenkins构建触发器定时任务Build periodically和Poll SCM【转载】:https://www.cnblogs.com/caoj/p/7815820.html

Windows+.NetCore+git+IIS在Jenkins上的自动化部署入门:https://zhuanlan.zhihu.com/p/346717062

Jenkins发布.Net Core项目到IIS:https://www.cnblogs.com/langhaoabcd/p/10267869.html

IIS 站点和应用池命令启动和停止:https://www.cnblogs.com/jmaly/p/9860606.html

获取不到公司/第三方的NuGet包 :https://www.cnblogs.com/YahuiWang/p/jenkins-docker-dotnet-core-publish.html

忽略钩子 post-commit: 关于钩子(webhook): https://www.cnblogs.com/yoyoketang/p/12535907.html

jenkins变量获取-项目名称:https://blog.csdn.net/hjrnet/article/details/86148008

使用Windows命令行启动关闭服务(net,sc用法):https://www.cnblogs.com/qlqwjy/p/8010598.html