jenkins构建vue工程并使用publish over ssh上传 jenkins构建vue项目

• 1. 构建环境
• 2. Jenkins自动构建
• 3. 项目部署
• 4. 总结一下

1. 构建环境

对于整个linux环境是什么样的，我就不多讲了，不懂就看上一篇文章，不过这边还是要讲2点：

• Node的安装
  附赠安装教程链接，不过压缩包要上传到服务器，可以使用

Xshell

• 或者ftp，当然也可以

wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xz

• ，然后再进行解压操作，具体就看文章吧。

环境	地址
Node

安装完后，查看node版本

• Jenkins的Node插件
  对于Node项目的构建，我们需要安装Jenkins的Node插件。

2. 在Jenkins的“系统管理”找到“插件管理”，再找的“NodeJs”的插件，安装即可。



4. 接着我们在“全局工具配置” ，设置我们要执行的Node版本，当然，要跟我们刚才安装的版本一致。

2. Jenkins自动构建

• 定时构建
  在我们完成第一个步骤后，我们就可以开始新建项目，然后设置参数，启动构建了。

2. 创建任务



4. 自定义工作目录



5. 设置源代码
   这边的源代码，我采用的是之前的一个Vue版的博客园WebApp，顺便这边也推广下，附上博客地址：《我用Vue写了个博客园WebApp》
6. 设置构建触发器
   接下来我们为构建设置一个定时器，定时的规则，在上篇文章也讲过了，这边就不多讲了，大家看上一篇文章即可，这边设置了下，3分钟自动构建一次。
7. 设置构建环境
   这边的环境就选择，刚才我们在“全局工具配置”中设置的Node的版本就可以了。
8. 设置要执行构建的命令
   执行命令当然是Node的命令了，安装依赖包，编译，打包。
   
   

1. cd /ftpfile/node/vue/ #进入Jenkins工作空间下vue项目目录 

---

1. node -v #检测node版本（此条命令非必要） 

---

1. npm -v #检测npm版本（此条命令非必要） 

---

1. npm config set registry https://registry.npm.taobao.org #把npm源设置为淘宝源（这个你懂的） 

---

1. npm config get registry #检测npm是否切换成功（此条命令非必要） 

---

1. npm install #安装项目中的依赖 

---

1. npm run build #打包 

---

2. 构建
   一切准备就绪，点击构建，构建完成。你可以将打包的文件移到web网站那边，当然，也可以在构建命令中使用命令复制。



3. 
   



4. 
   

• 触发构建
  对于触发构建，我们在上篇博客也讲过，对于触发构建的条件，这边就不在多讲了，大家可以去看上篇文章。我在在这边只需要先在GitHub先添加

WebHook

• ，然后修改构建触发器就可以了。

2. 添加WebHook



4. 修改构建触发器



5. 
   



7. 提交代码，自动构建



8. 
   

3. 项目部署

对于项目的部署，其实没啥好讲的，以前在将Vue博客园里面讲过了，大家可以往前翻下文章。简单来讲就是，使用nginx进行反向代理，因为你不是已经打包了嘛，只剩下静态页面，与JS。当然如果你觉得自动构建生成的dist不在指定位置，那可以在构建命令中，打包完，压缩下，然后复制到指定目录，解压就可以了。

所以这边就不在多多描述了。

4. 总结一下

该篇内容较少，因为很多内容其实都在上一篇讲完了，对于Node的构建，无非就是Jenkins加上Node插件，但前提是你的服务器要安装NodeJs，对于构建步骤都是一样的，无非就是构建命令不一样而已,Web部署也都是Nginx，当然还可以使用supervisor进行守护进程。

最后，我们的前后端分离的自动构建与部署就这样完成了。简单吧，当然若是存在跨域的问题，可以内容再用nginx做跨域，或者服务端直接开CROS就可以了。那两篇关于前后端的自动构建与线上部署就这样完成咯。