Jenkins实现前端项目自动化集成打包部署

原博客地址:https://yezihaohao.github.io/2017/09/09/Jenkins实现前端项目自动化集成打包部署/
掘金地址:https://juejin.im/entry/59b40bd36fb9a00a5474c3c7

前言

之前写前端项目打包部署，都是手动运行命令，打包完，而后压缩，再上传到服务器解压。

这种方式确实有点low而且效率也不高。
自从用了Jenkins持续集成工具，写前端项目愈来愈工程化，不再用担忧忘记部署项目，也不用烦躁每次打包压缩后还要部署多个服务器和环境，更开心的是每次家里写完代码，不用远程公司部署项目，提交代码后自动会为你部署。
本文基于React的前端项目和GitLab的代码仓库以及Windows(其余系统平台大同小异)，简述Jenkins实现自动部署的配置。

安装Jenkins

前提：已配置好java环境

1.下载对应的安装程序点我进入下载网站或直接下载war包

2.根据提示安装完成（默认端口是8080）

war包启动方式： java -jar jenkins.war --httpPort=8080（端口自定义），而后访问http://localhost:8080

3.查看插件

点开系统设置的插件管理页面，若是可选插件列表为空，点击高级标签页，替换升级站点的URL为：http://mirror.xmission.com/je...
而且点击提交和当即获取

4.返回可选插件，选择以下插件安装（若是已安装，请忽略）

1.Publish Over SSH
2.GitLab Plugin
3.Email Extension Plugin

提早设置配置

为了方便新建任务，因此先将一些设置配置好，进入系统管理系统设置。

1.配置Publish over SSH

在Publish over SSH处点击增长，添加SSH server，而且选择高级设置，设置相应的ip,用户名和密码等。（其余选项可不用管）

2.配置邮件通知，可经过勾选发送邮件测试是否配置成功

新建任务

1.点击新建，输入名称，选择自由风格的项目

2.配置源码

选择Git，并填上gitlab项目克隆地址，用户密钥以及分支

3.配置构建触发器

勾选Poll SCM便可，其余可忽略，默认提交代码到相应的分支触发该任务

4.配置构建

增长构建步骤选择Execute shell

5.配置构建后操做

增长构建后操做，选择Send build artifacts over SSH。即上述操做所有完成并自动生产了部署文件，该步骤将部署文件上传到以前的SSH服务器（Linux服务器），并执行你想让他执行的命名，部署多个服务器及平台，选择添加server并完成相应的配置

配置后再增长构建后操做，选择Editable Email Notification。根据提示配置须要通知的邮箱，其余可默认。而后选择高级设置，配置失败和成功邮件通知。

绑定GitLab Web hooks

添加web hook. http://jenkins-server/gitlab/... 须要填上的固定格式的URL地址，把jenkins-server替换成对应的Jenkins访问地址，注意：若是是localhost，须要换成ip地址。
添加完以后，点击Test Hook。此时Jenkins界面构建队列出现某个任务正在执行，表示配置成功。

验证提交代码，成功自动打包部署

提交代码，观察Jenkins界面，出现构建任务，构建完成以后收到邮件通知。

最后，推荐给你们前端交流QQ群：264591039。欢迎来这里和你们一块儿畅聊大前端的一切~