原文来着我的掘金，欢迎查阅，写教程不容易转载请带上这句话
上一篇文章已经介绍了服务器所需要软件的安装和配置。下面介绍一下 jenkins 关联 GitHub关联，实现 GitHub 代码 push 之后自动触发 jenkins 打包代码并且发布到服务器;
题记 如果你还没有安装配置好对应服务器的环境，可以查看 一套真实前端开发环境搭建+可持续集成+自动化部署实践（第一篇环境搭建配置）
1、github 操作配置生成Personal Access Token
进入github --> setting -->developers--> Personal Access Token --> Generate new token, 新建一个有读写权限的用户
新增一个描述，勾选如图配置，点击生成对应的 token
注意！！！ 生成 token 之后一定要复制记到记事本记录下来，不然之后这个编号就再也看到不了；
2、github 设置GitHub webhooks（具体需要持续集成的项目），新建或者设置现有项目的webhooks选项，url：你之前部署jenkins的服务器的IP+端口+ github-webhook,填写完成确认添加。
3、设置jenkins的github配置
jenkins 安装Github Plugin插件,因为我们在配置jenkins的时候已经安装了所以这里可跳过， 如果没有 key 在jenkins 系统管理-->插件管理-->可选插件中安装。
jenkins 新建项目，选择构建自由风格项目
完成之后的页面如下，后面我们做关于项目的配置设置都是基于这样页面👇👇👇
jenkins 系统管理 --> 系统设置 --> GitHub --> Add GitHub Sever,设置一下jenkins关联 GitHub
按照如下图选择添加配置，这个时候就需要用到了我们第一步生成的 GitHub Personal Access Token，填写完毕确认添加
image
选择生成的凭证，测试jenkins连接github服务器,如下图说明一切都配置 ok，最后记得在页面底部保存配置
image
2、设置jenkins的项目 configure 配置
General 配置
image
Source Code Management 配置，这里会我在配置的时候会有些坑
- 坑1、Repository URL地址报错，这里我们填入是项目吃 clone 地址，可以尝试Clone with SSH、Clone with HTTPS两个地址都尝试一下。
- 坑2、无法下拉选择配置的权限用户。直接点击 Add 添加一个权限用户以Username with password，直接用 GitHub的登录名称和命名创建。这个时候完成了就应该跳出下拉选项了；
Build Triggers && Build Environment && Bindings 选择配置
image
Build 项目打包发布配置，添加执行 Shell，由于不同的前端项目技术架构和打包方式不一样，这里需要你根据的你项目，了解一下一些常用shell命令，这里的命令操作可以理解为在你的服务器环境中。这里我以打包 vue 项目为例，构建打包后代码文件解压到nginx的指定目录
echo $PATH
node -v
npm -v #检查编译环境
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
npm install
npm run build #编译项目
cd dist
tar -zcvf dist.tar.gz * #所有文件压缩
tar -zxvf /root/.jenkins/workspace/vue-online-admin/dist/dist.tar.gz -C /usr/share/nginx/html #压缩文件解压到nginx映射目录
cd /root/.jenkins/workspace/vue-online-admin
rm -R dist #删除项目打包后的残留
4、测试验证成果
所有的流程，这一路配置下来，是期望代码 push 到 GitHub 上的时候触发GitHub 的 webhooks，再利用jenkins完成项目的打包部署。
GitHub 也显示构建成功
之前已经在服务器上配置启动了nginx，所以直接用你的服务器 ip 访问，How nice ~~，这样一套前端开发环境搭建+可持续集成+自动化部署实践到这来算是圆满完成了实践，当然这只是一个比较粗范的配置，各个项目技术的差异还需要更多细致的配置
后记: 把这个实践记录下来，一是记录一下分享给需要的同学们，二是有个时间和机会去接触一下服务器的东西，还是比较 nice 的。最后谢谢查阅。如果觉得还阔以,点个赞再走呗，老铁~
