windows下使用Jenkins自动部署前端工程项目

前言

最近捣鼓jenkins自动部署,踩了好多坑,记录下,防止以后又忘~ _ ~

准备工作

事先安装好 java(需自行配置环境变量) node git nginx(此样例中使用,可根据需求选择其他服务)
百度网盘 提取码 7x68 内含本博客所有需要安装的软件

安装nginx

直接解压到磁盘,根目录有一个.exe文件,双击即启动了nginx服务
在根目录html文件夹下新建一个auto文件夹,用来存放自动部署的文件

安装Jenkins

一路下一步即可
安装完成后 可选择修改端口号,在安装文件根目录的jenkins.xml下windows下使用Jenkins自动部署前端工程项目我这里修改为8100 可随意设置。
修改完成之后重启jenkins服务。
打开任务管理器 服务 右击重启
windows下使用Jenkins自动部署前端工程项目
重新打开网页 localhost:8100 会提示你输入密码,根据提示输入密码之后,加载完成后跳转到新手入门页面
windows下使用Jenkins自动部署前端工程项目
点击安装推荐的插件(时间较久)
推荐插件安装完成后,注册一个用户名登陆,下一步实例配置默认保存即可。随后点击开始使用进入主页面。
需要再安装几个插件,NodeJS Plugin及post build task
进入主页后点击系统管理=>插件管理=>可选插件,搜索NodeJs及Post build task.

windows下使用Jenkins自动部署前端工程项目windows下使用Jenkins自动部署前端工程项目windows下使用Jenkins自动部署前端工程项目
还需要配置下NodeJS参数,打开全局工具配置,找到NodeJS
windows下使用Jenkins自动部署前端工程项目windows下使用Jenkins自动部署前端工程项目完成后 点击保存

全部安装及配置后重启下服务,再重新打开页面。

点击创建一个新的任务
windows下使用Jenkins自动部署前端工程项目windows下使用Jenkins自动部署前端工程项目选择构建一个*风格的软件项目 点击确定。进入创建任务主页面。
windows下使用Jenkins自动部署前端工程项目描述可任意填写,github项目可不选,勾选丢弃旧的构建,防止存储过多历史构建
windows下使用Jenkins自动部署前端工程项目源码管理中 勾选git(svn类似),输入项目地址,填写git用户名密码
windows下使用Jenkins自动部署前端工程项目windows下使用Jenkins自动部署前端工程项目windows下使用Jenkins自动部署前端工程项目选中账户,下方的Branches to build可选择需要build的分支,我这里只做演示用,只有一个master分支.

构建触发器选择轮询SCM H/10 * * * * 代表每10分钟执行一次,注意,有空格
windows下使用Jenkins自动部署前端工程项目
构建环境选择 Provide Node & npm bin/ folder to PATH

windows下使用Jenkins自动部署前端工程项目构建标签栏中,选择增加构建步骤,选择执行windows批处理命令
windows下使用Jenkins自动部署前端工程项目
输入
npm i
npm run build
(使用2次批处理命令的原因是,写在一起会只执行第一条命令,第二条命令会跳过)

windows下使用Jenkins自动部署前端工程项目
windows下使用Jenkins自动部署前端工程项目输入Script
rmdir /q /s "D:\Program Files (x86)\nginx-1.14.2\html\auto"
xcopy /y /e /i "C:\Program Files (x86)\Jenkins\workspace\auto-deploy\dist" "D:\Program Files (x86)\nginx-1.14.2\html\auto"
第一行为删除nginx服务下面的build文件
第二行为移动jenKinsbuild之后的包到nginx目录下, 注意双引号,不加双引号运行时会报错

windows下使用Jenkins自动部署前端工程项目点击保存,跳到任务首页,点击立即构建
windows下使用Jenkins自动部署前端工程项目编译完成后看下nginx目录下有没有文件
windows下使用Jenkins自动部署前端工程项目可以看到 已经有了 ,并且项目也可以正常打开
windows下使用Jenkins自动部署前端工程项目至此,自动构建的流程就已经结束了。