Linux下Jenkins与GitHub自动构建Node项目(Vue)

根据上篇文章《Linux下Jenkins与GitHub自动构建NetCore与部署》，我们知道了Jenkins的强大功能，自动构建，部署了一个NetCore的Web，让开发人员专注于开发，不用管理线上，或测试服务器的部署。那现在，互联网公司很多采用了前后端分离的开发模式，既然服务端可以用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	https://www.cnblogs.com/liuqi/p/6483317.html

  安装完后，查看node版本
  
  

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

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

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

2. Jenkins自动构建

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

  1. 创建任务
     
     

  2. 自定义工作目录
     
     

  3. 设置源代码
     
     这边的源代码，我采用的是之前的一个Vue版的博客园WebApp，顺便这边也推广下，附上博客地址：《我用Vue写了个博客园WebApp》

     

  4. 设置构建触发器
     
     接下来我们为构建设置一个定时器，定时的规则，在上篇文章也讲过了，这边就不多讲了，大家看上一篇文章即可，这边设置了下，3分钟自动构建一次。

     

  5. 设置构建环境
     
     这边的环境就选择，刚才我们在“全局工具配置”中设置的Node的版本就可以了。

     

  6. 设置要执行构建的命令
     
     执行命令当然是Node的命令了，安装依赖包，编译，打包。
     
     

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

        ---

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

        ---

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

        ---

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

        ---

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

        ---

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

        ---

     7. npm run build #打包 
        
        

        ---

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

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

  1. 添加WebHook
     
     
  2. 修改构建触发器
     
     
     
     
  3. 提交代码，自动构建
     
     
     
     

3. 项目部署

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

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

4. 总结一下

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

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