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	http://www.javashuo.com/article/p-wdcakljq-bk.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就能够了。那两篇关于先后端的自动构建与线上部署就这样完成咯。