jenkins在windows上部署前端的一些实践-Toy模板网

这篇具有很好参考价值的文章主要介绍了jenkins在windows上部署前端的一些实践。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

Jenkins 在windows10 to windows10下的一些前端工程实践

前端小菜鸡，对windows上的一些东西都不是很熟悉，遂想记录一下，方便以后查阅，Jenkins使用版本为2.440.1

安装Jenkins

掘金上很多比较全面的安装过程，可以参考这篇安装Jenkins

需要注意的是jdk的版本，笔者安装的jdk版本为21

插件建议安装推荐的插件，进入后安装NodeJS Plugin(建议和内网保持一致)，和Publish Over SSH

安装ssh

参考ssh安装

测试是否安装并启动成功 cmd中输入实例 ssh lllj@192.168.1.1 lllj为目标机器的用户名，192.168.1.1为目标机器端口

配置Publish Over SSH

1、进入系统配置

jenkins在windows上部署前端的一些实践,jenkins,运维

2、找到Publish Over SSH

jenkins在windows上部署前端的一些实践,jenkins,运维

3、配置信息，这里我是用密码登录ssh

jenkins在windows上部署前端的一些实践,jenkins,运维

4、测试是否连接成功，出现Success则为成功

jenkins在windows上部署前端的一些实践,jenkins,运维

配置NodeJS

1、点击Tools

jenkins在windows上部署前端的一些实践,jenkins,运维

2、配置NodeJS

jenkins在windows上部署前端的一些实践,jenkins,运维

创建任务

1、新建一个Freestyle project

jenkins在windows上部署前端的一些实践,jenkins,运维

2、配置git

jenkins在windows上部署前端的一些实践,jenkins,运维

3、配置nodejs

jenkins在windows上部署前端的一些实践,jenkins,运维

4、增加构建步骤

jenkins在windows上部署前端的一些实践,jenkins,运维

@echo off
del dist
call npm run build
echo Build Success

:: 打包 dist 文件夹为 dist.tar.gz
tar cvf dist.tar dist/*
echo Tar Success

注意点：如果没有npm install需要在上述步骤中call npm run build前添加npm install,笔者把node_modules也上传到git远程了，另外一定要确保Node版本能够成功构建，笔者犯了一个错误，使用本地的node去测能不能构建，结果排查好半天才发现是要确保Jenkins上安装的NodeJs

5、增加构建后步骤

jenkins在windows上部署前端的一些实践,jenkins,运维

jenkins-auto-start.bat内容如下，菜鸡前端不太懂windows上面的命令，网上抄的稍微改了一下

@echo off
set frontHtmlFolder=D:\fontend\nginx\nginx-1.14.2\html

REM 获取当前时间戳
set cur_time=%date:~0,4%%date:~5,2%%date:~8,2%%time:~0,2%%time:~3,2%%time:~6,2%

REM 删除目标文件夹（从逻辑上感觉最好先备份后删除，这个抄的不想改了。。。）
rmdir /s /q %frontHtmlFolder%

REM 创建目标文件夹
mkdir %frontHtmlFolder%

REM 解压上传的文件到目标文件夹
tar -xf D:\fontend\nginx\nginx-1.14.2\dist.tar -C D:\fontend\nginx\nginx-1.14.2\html --strip-components=1

REM 移动上传的文件到备份目录并添加时间戳(新建一个备份文件夹backup)
move D:\fontend\nginx\nginx-1.14.2\dist.tar D:\fontend\nginx\nginx-1.14.2\backup\%cur_time%

到这里就结束了看一下执行结果吧

jenkins在windows上部署前端的一些实践,jenkins,运维