一套真实前端开发环境搭建+可持续集成+自动化部署实践（第二篇 jenkins关联 GitHub自动打包部署）

上一篇文章已经介绍了服务器所须要软件的安装和配置。下面介绍一下 jenkins 关联 GitHub关联，实现 GitHub 代码 push 以后自动触发 jenkins 打包代码而且发布到服务器;

题记 若是你尚未安装配置好对应服务器的环境，能够查看 一套真实前端开发环境搭建+可持续集成+自动化部署实践（第一篇环境搭建配置）

一、github 操做配置生成Personal Access Token

进入github --> setting -->developers--> Personal Access Token --> Generate new token, 新建一个有读写权限的用户

新增一个描述，勾选如图配置，点击生成对应的 token

注意！！！ 生成 token 以后必定要复制记到记事本记录下来，否则以后这个编号就再也看到不了；

二、github 设置GitHub webhooks（具体须要持续集成的项目），新建或者设置现有项目的webhooks选项，url：你以前部署jenkins的服务器的IP+端口+ github-webhook,填写完成确认添加。

三、设置jenkins的github配置

jenkins 安装Github Plugin插件,由于咱们在配置jenkins的时候已经安装了因此这里可跳过， 若是没有 key 在jenkins 系统管理-->插件管理-->可选插件中安装。

jenkins 新建项目，选择构建自由风格项目

完成以后的页面以下，后面咱们作关于项目的配置设置都是基于这样页面👇👇👇

jenkins 系统管理 --> 系统设置 --> GitHub --> Add GitHub Sever,设置一下jenkins关联 GitHub

按照以下图选择添加配置，这个时候就须要用到了咱们第一步生成的 GitHub Personal Access Token，填写完毕确认添加

选择生成的凭证，测试jenkins链接github服务器,以下图说明一切都配置 ok，最后记得在页面底部保存配置

二、设置jenkins的项目 configure 配置

General 配置

Source Code Management 配置，这里会我在配置的时候会有些坑

• 坑一、Repository URL地址报错，这里咱们填入是项目吃 clone 地址，能够尝试Clone with SSH、Clone with HTTPS两个地址都尝试一下。
• 坑二、没法下拉选择配置的权限用户。直接点击 Add 添加一个权限用户以Username with password，直接用 GitHub的登陆名称和命名建立。这个时候完成了就应该跳出下拉选项了；

Build Triggers && Build Environment && Bindings 选择配置

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 #删除项目打包后的残留

复制代码

四、测试验证成果

全部的流程，这一路配置下来，是指望代码 push 到 GitHub 上的时候触发GitHub 的 webhooks，再利用jenkins完成项目的打包部署。

GitHub 也显示构建成功

以前已经在服务器上配置启动了nginx，因此直接用你的服务器 ip 访问，How nice ~~，这样一套前端开发环境搭建+可持续集成+自动化部署实践到这来算是圆满完成了实践，固然这只是一个比较粗范的配置，各个项目技术的差别还须要更多细致的配置

后记: 把这个实践记录下来，一是记录一下分享给须要的同窗们，二是有个时间和机会去接触一下服务器的东西，仍是比较 nice 的。最后谢谢查阅。若是以为还阔以,点个赞再走呗，老铁~