根据上篇文章《Linux下Jenkins与GitHub自动构建NetCore与部署》，我们知道了Jenkins的强大功能，自动构建，部署了一个NetCore的Web，让开发人员专注于开发，不用管理线上，或测试服务器的部署。那现在，互联网公司很多采用了前后端分离的开发模式，既然服务端可以用Jenkins，那么前端是否也可以吗？那我们就尝试下，试着去构建一个Vue的基本项目。
1. 构建环境
对于整个linux环境是什么样的，我就不多讲了，不懂就看上一篇文章，不过这边还是要讲2点：
-
Node的安装
附赠安装教程链接，不过压缩包要上传到服务器，可以使用Xshell或者ftp，当然也可以wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz，然后再进行解压操作，具体就看文章吧。环境 地址 Node https://www.cnblogs.com/liuqi/p/6483317.html 安装完后，查看node版本
-
Jenkins的Node插件
对于Node项目的构建，我们需要安装Jenkins的Node插件。-
在Jenkins的“系统管理”找到“插件管理”，再找的“NodeJs”的插件，安装即可。
-
接着我们在“全局工具配置” ，设置我们要执行的Node版本，当然，要跟我们刚才安装的版本一致。
-
2. Jenkins自动构建
-
定时构建
在我们完成第一个步骤后，我们就可以开始新建项目，然后设置参数，启动构建了。-
创建任务
-
自定义工作目录
-
设置源代码
这边的源代码，我采用的是之前的一个Vue版的博客园WebApp，顺便这边也推广下，附上博客地址：《我用Vue写了个博客园WebApp》 -
设置构建触发器
接下来我们为构建设置一个定时器，定时的规则，在上篇文章也讲过了，这边就不多讲了，大家看上一篇文章即可，这边设置了下，3分钟自动构建一次。 -
设置构建环境
这边的环境就选择，刚才我们在“全局工具配置”中设置的Node的版本就可以了。 -
设置要执行构建的命令
执行命令当然是Node的命令了，安装依赖包，编译，打包。
- cd /ftpfile/node/vue/ #进入Jenkins工作空间下vue项目目录
- node -v #检测node版本（此条命令非必要）
- npm -v #检测npm版本（此条命令非必要）
- npm config set registry https://registry.npm.taobao.org #把npm源设置为淘宝源（这个你懂的）
- npm config get registry #检测npm是否切换成功（此条命令非必要）
- npm install #安装项目中的依赖
- npm run build #打包
- cd /ftpfile/node/vue/ #进入Jenkins工作空间下vue项目目录
-
构建
一切准备就绪，点击构建，构建完成。你可以将打包的文件移到web网站那边，当然，也可以在构建命令中使用命令复制。
-
-
触发构建
对于触发构建，我们在上篇博客也讲过，对于触发构建的条件，这边就不在多讲了，大家可以去看上篇文章。我在在这边只需要先在GitHub先添加WebHook，然后修改构建触发器就可以了。- 添加WebHook
- 修改构建触发器
- 提交代码，自动构建
- 添加WebHook
3. 项目部署
对于项目的部署，其实没啥好讲的，以前在将Vue博客园里面讲过了，大家可以往前翻下文章。简单来讲就是，使用nginx进行反向代理，因为你不是已经打包了嘛，只剩下静态页面，与JS。当然如果你觉得自动构建生成的dist不在指定位置，那可以在构建命令中，打包完，压缩下，然后复制到指定目录，解压就可以了。
所以这边就不在多多描述了。
4. 总结一下
该篇内容较少，因为很多内容其实都在上一篇讲完了，对于Node的构建，无非就是Jenkins加上Node插件，但前提是你的服务器要安装NodeJs，对于构建步骤都是一样的，无非就是构建命令不一样而已,Web部署也都是Nginx，当然还可以使用supervisor进行守护进程。
最后，我们的前后端分离的自动构建与部署就这样完成了。简单吧，当然若是存在跨域的问题，可以内容再用nginx做跨域，或者服务端直接开CROS就可以了。那两篇关于前后端的自动构建与线上部署就这样完成咯。