Jenkins automatically build Node project with GitHub under Linux (Vue)

According to the article, " under Linux Jenkins and GitHub NetCore automated build and deployment ," we know the power of Jenkins, the automated build, deploy a NetCore the Web, allows developers to focus on the development, management not online, or test server deployment. And now, a lot of Internet companies using the front and rear ends of separate development model, since the server can use Jenkins, then the front-end whether can it? Under then we try, try to build a basic project of Vue.

 

 

1. Build Environment

For the whole of what is linux environment, I do not speak, I do not know spotted an article, but here still talk about two points:

• Node installation
  comes with installation tutorial links, but compressed packages to be uploaded to the server, you can use Xshellor ftp, of course, can wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.xzthen carry out decompression operation, specifically to see the article now.

  surroundings	address
  Node	https://www.cnblogs.com/liuqi/p/6483317.html

  After installation, view node version
  

• Jenkins' Node plug-ins
  for the construction of Node project, we need to install the Node Jenkins plugins.

  1. In the Jenkins "System Management" to find "plug-in management", find the "NodeJs" plug-in installed.
     

  2. Then we in the "Global Configuration Tool", set Node version we want to execute, of course, we have just agreed to keep the installed version.
     

2. Jenkins automated build

• Timing building
  after we complete the first step, we can start a new project, and then set the parameters, start to build up.

  1. Create a task
     

  2. Custom working directory
     

  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. 项目部署

For the deployment of the project, in fact, nothing to talk about, formerly in the Park Vue blog which talked about, we can turn forward the next article. Simply put, it is to use nginx reverse proxy, because you have not packed a thing, only static pages, and JS. Of course, if you feel generated automatically builds distnot specify a location, it can build command, finished packing, compression, and then copied to the specified directory, unzip it.
So here it is not in the lot description.

4. summarize

The little pieces of content, because in fact, a lot of content on a finished, for the construction of Node, nothing more than add Node Jenkins plugin, but only if you want to install a server NodeJs, to build steps are the same, nothing more It is to build a command just not the same, Web deployment are also Nginx, of course, can also be carried out using a supervisor daemons.

Finally, we separate the front and rear end automated build and deployment so complete. Simple, of course if there is a problem of cross-domain, then nginx can do cross-domain content, or services directly to end CROS open it. That two lines on deployment and automatic build front and rear ends slightly thus completed.