前言

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

准备工作

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

安装nginx

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

安装Jenkins

一路下一步即可

安装完成后 可选择修改端口号,在安装文件根目录的jenkins.xml下

自动发版工具Jenkins jenkins自动部署前端文件_windows

我这里修改为8100 可随意设置。

修改完成之后重启jenkins服务。

打开任务管理器 服务 右击重启

自动发版工具Jenkins jenkins自动部署前端文件_windows_02


重新打开网页 localhost:8100 会提示你输入密码,根据提示输入密码之后,加载完成后跳转到新手入门页面

自动发版工具Jenkins jenkins自动部署前端文件_CI/CD_03


点击安装推荐的插件(时间较久)

推荐插件安装完成后,注册一个用户名登陆,下一步实例配置默认保存即可。随后点击开始使用进入主页面。

需要再安装几个插件,NodeJS Plugin及post build task

进入主页后点击系统管理=>插件管理=>可选插件,搜索NodeJs及Post build task.

自动发版工具Jenkins jenkins自动部署前端文件_前端_04

自动发版工具Jenkins jenkins自动部署前端文件_CI/CD_05

自动发版工具Jenkins jenkins自动部署前端文件_自动发版工具Jenkins_06


还需要配置下NodeJS参数,打开全局工具配置,找到NodeJS

自动发版工具Jenkins jenkins自动部署前端文件_自动部署_07

自动发版工具Jenkins jenkins自动部署前端文件_windows_08

完成后 点击保存

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

点击创建一个新的任务

自动发版工具Jenkins jenkins自动部署前端文件_自动发版工具Jenkins_09

自动发版工具Jenkins jenkins自动部署前端文件_自动部署_10

选择构建一个自由风格的软件项目 点击确定。进入创建任务主页面。

自动发版工具Jenkins jenkins自动部署前端文件_自动发版工具Jenkins_11

描述可任意填写,github项目可不选,勾选丢弃旧的构建,防止存储过多历史构建

自动发版工具Jenkins jenkins自动部署前端文件_前端_12

源码管理中 勾选git(svn类似),输入项目地址,填写git用户名密码

自动发版工具Jenkins jenkins自动部署前端文件_CI/CD_13

自动发版工具Jenkins jenkins自动部署前端文件_自动发版工具Jenkins_14

自动发版工具Jenkins jenkins自动部署前端文件_windows_15

选中账户,下方的Branches to build可选择需要build的分支,我这里只做演示用,只有一个master分支.构建触发器选择轮询SCM H/10 * * * * 代表每10分钟执行一次,注意,有空格

自动发版工具Jenkins jenkins自动部署前端文件_前端_16


构建环境选择 Provide Node & npm bin/ folder to PATH

自动发版工具Jenkins jenkins自动部署前端文件_自动发版工具Jenkins_17

构建标签栏中,选择增加构建步骤,选择执行windows批处理命令

自动发版工具Jenkins jenkins自动部署前端文件_自动部署_18


输入

npm inpm run build

(使用2次批处理命令的原因是,写在一起会只执行第一条命令,第二条命令会跳过)

自动发版工具Jenkins jenkins自动部署前端文件_自动发版工具Jenkins_19


自动发版工具Jenkins jenkins自动部署前端文件_前端_20

输入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目录下, 注意双引号,不加双引号运行时会报错

自动发版工具Jenkins jenkins自动部署前端文件_前端_21

点击保存,跳到任务首页,点击立即构建

自动发版工具Jenkins jenkins自动部署前端文件_CI/CD_22

编译完成后看下nginx目录下有没有文件

自动发版工具Jenkins jenkins自动部署前端文件_CI/CD_23

可以看到 已经有了 ,并且项目也可以正常打开

自动发版工具Jenkins jenkins自动部署前端文件_自动部署_24

至此,自动构建的流程就已经结束了。