Windows 系统下使用Jenkins实现自动化部署Springboot和Vue.js项目「终于解决」

大家好，我是编程小6，很高兴遇见你，有问题可以及时留言哦。

看文章前应该掌握什么知识？

大部分讲自动化部署的文章，第一段都会介绍jenkins，但是本篇文章的关注重点不在于对jenkins的基础知识讲解，所以在看本篇文章之前你应掌握：

知道jenkins是做什么的？
知道自己为什么要用jenkins,它为团队带来了什么，解决了什么问题?
如何安装jenkins?

配置Jenkins全局变量

主要是配置Jenkins打包运行工具中需要用的环境变量和相关工具等，我们知道，自动化打包其实就是Jenkins代替人工，将项目代码进行下载、编译、签名、打包以及拷贝到指定目录或者是启动web服务等一些列操作自动化运行，那么要执行这些操作就必须保证相关的sdk或者是环境变量在系统层面都是具备的，否则jenkins在执行自动化操作时，缺少工具或者环境变量，肯定会报错。

目前，我的项目中的环境变量和工具主要用到了Maven、JDK、Git、NodeJS，具体情况请看截图：

Maven的仓库配置都在settings.xml里，这个配置一般在Idea里配置好了。

Jdk就不多说了，基础中的基础。

Git的配置是为了从代码仓库同步指定分支的最新代码，如果你用的是SVN可能还有些不一样。

Maven的执行程序，我直接用的idea自带的。

NodeJS是前端打包要用到的环境

这些工具或环境都具备好了后，就可以准备进行自动项目的部署工作了

Springboot项目自动化构建

首先点击 DashBoard上的 "新建Item"按钮，然后选择 "构建一个Maven项目"，如果你没有这个项目，说明你缺少Jenkins的Maven插件，请去Manage Jenkins -> Manage Plugins 中下载相关组件。

输入的任务名称就是这这个项目自动化构建时所生成的文件夹名，最好具备唯一性，我起名时会按照"项目名-前/后端-分之名"的格式来起名，个人感觉比较直观。

之后就会进入该项目的设置界面，所有的玄机都在这个设置界面里

每一步都需要根据自己的项目情况进行具体的设置，现在我只说说我的项目如何设置的：

General中我主要设置的是Discard old Builds ，根据设置定期删除旧的构建，此举主要是为了节省磁盘空间：

源码管理主要是为了设置需要编译项目的git地址，git的用户名密码以及代码所属分支等信息。

构建触发器主要是为了设置远程构建的能力，该能力可以让同一局域网的用户通过访问url路径就可以触发远程服务器的代码构建工作，其主要的设置是一个token值，即身份证令牌的值，设置好后，远程用户可以在浏览器中通过https://JenkinsIP:Port//job/任务名称/build?token=`身份证令牌值` 这个路径进行远程构建了。

构建环境中我只设置了Add timestamps to the Console Output这个选项，目的是在控制台打印时可以带上时间戳

Pre Steps是在构建前的一些常规操作，这个最好根据自己的实际项目情况来，目前我的项目中不存在此类操作，具体的可操作类型可以看下拉选择框，最常用的一般就是windows下的"Execute Windows batch command"和Linux下的"Execute shell"，前者是cmd命令后者是shell命令的执行。

Build 是构建中的操作，主要是为了设置好POM文件，让jenkins在编译的过程中可以找到项目的依赖，并且设置了编译时的方式是不执行测试用例，也不编译测试用例类。

Post Steps 是在编译完后，Jenkins的操作，主要设置是在编译成功后，利用批处理命令将war包拷贝到指定目录下即可。

构建设置主要是为了设置在编译失败后自动发送邮件的接收地址

构建后操作其实本质上和构建前操作一样，就是我们在项目构建后应该做什么操作，我做的操作是 Delete workspace when build is done, 构建完成后删除工作空间，目的也是为了节省空间。

设置完成后，进行保存，然后就可以点击任务下的 Build Now来构建项目了

如果想看一下项目编译过程中的日志输出，可以进入该次任务中，选择控制台数据即可

项目构建成功后，会将编译出的war包拷贝到Tomcat的指定目录下，并删除工作空间，至此，Springboot项目的自动构建基本完成。

Springboot项目的自动构建还是比较顺利的，基本上没有遇到过太复杂的问题，但是Vue.JS的项目构建就没有那么容易了，遇到了几个棘手的问题，具体情况请看下一章节。

Vue项目自动化构建

构建Node.JS类的项目和构建Springboot项目有所不同，首先，Node.JS类的项目新建时选择的项目类型是FreeStyle项目类型，而不是Maven项目。

其次是自由类型项目的设置比Maven项目少几项，而且有一个Node.JS的特殊配置，但是其构建的整体思路是没有变化的。

此处列出Node.JS特殊的配置项

一、构建环境

构建环境中除了要设置timestamp外，还要设置Provide Node & npm bin/ folder to PATH选项，因为每次构建都要先执行环境构建，环境构建完成后，才会开始真正的构建项目，所以配置好Node.JS的选项其实就是将Node添加到环境变量Path中，从而达到支持node和npm的命令。

这里的属性都是下拉选择的，是之前在全局变量中配置的Node.JS的信息。

二、构建

不同的项目，由于环境、工具等不同，其构建的方式也不同，那么具体的构建基本上就要根据项目的实际情况来设置了，此处的设置只代表我这个项目的实际情况：

首先使用cmd命令，先移动到项目根目录下，然后由于使用的是BY平台的脚手架，所以要将npm仓库设置为BY平台的仓库，具体见命令

npm config set registry repo.ctbiyi.com:6442/repository/…

npm config get registry 命令是确定仓库是否设置成功

之后执行命令 npm install && npm run build 对Node.JS项目进行依赖添加和项目构建，构建成功的话，项目的根目录下会多出一个dist文件夹。

在处理Vue.JS项目时遇到了一个棘手的问题，就是我在cmd窗口中对项目执行npm install 和 npm run build命令，项目编译和构建都是正常的，但是如果一旦用jenkins进行编译，就会爆 ERROR:Callback was already called.的错误，主要错误的源在node_modules的neo-async的async.js的2818行，但是这个是依赖包里的错误，从代码方面来说没什么可以修复的思路，于是这个问题整整卡了我一天，直到我同事说好像看过一篇帖子说，出现类似问题是因为某个依赖包的版本过低导致的：

vue项目用webpack打包报错,想知道怎么解决?

于是让前端的同事将依赖统一升级，在执行构建，就不会再出现 ERROR:Callback was already called 错误了

统一依赖升级的代码如下：

1. 在commend中安装检测依赖包是否有新版本的工具
npm install -g npm-check-update

2. 在项目中检测（terminal中执行以下命令）
ncu

3. 升级版本号
ncu -u

4. 安装对应版本号的依赖

npm install

具体教程如下:

vue更新package.json中的dependencies依赖到最新版本

jenkins与IDEA联动

目前我们的jenkins已经具备了自动构建项目的能力，但是每次还要访问jenkins的网站来构建项目，对于开发人员来说还是太复杂了，所以应当将IDEA和jenkins结合起来，这样在开发工具中就可以直接构建最新的项目到服务器上了，岂不美哉。

具体教程参考:

IntelliJ配置jenkins服务的Crumb Data

但是如果你单纯的按照这个方式去做，肯定会遇到一个问题，就是在IDEA的jenkins插件中配置参数时，使用Test Connection测试Jenkins连接状态时会报 [Fail] CSRF enabled -> Missing or bad crumb data,这里其实不是你的密码写错了，而是不能写密码，应当在密码的输入框中写你账户生成的token才对，具体参考:

[Jenkins+tomcat自动发布的热部署/重启及遇到的坑解决办法