前端开发环境搭建-可持续集成之jenkins关联GitHub自动打包部署篇

上一篇文章已经介绍了服务器所需要软件的安装和配置。下面介绍一下 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,填写完毕确认添加

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

2、设置jenkins的项目 configure 配置

General 配置

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

  • 坑1、Repository URL地址报错,这里我们填入是项目吃 clone 地址,可以尝试Clone with SSH、Clone with HTTPS两个地址都尝试一下。
  • 坑2、无法下拉选择配置的权限用户。直接点击 Add 添加一个权限用户以Username with password,直接用 GitHub的登录名称和命名创建。这个时候完成了就应该跳出下拉选项了;

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

Build 项目打包发布配置,添加执行 Shell,由于不同的前端项目技术架构和打包方式不一样,这里需要你根据的你项目,了解一下一些常用shell命令,这里的命令操作可以理解为在你的服务器环境中。这里我以打包 vue 项目为例,构建打包后代码文件解压到nginx的指定目录

1
2
3
4
5
6
7
8
9
10
11
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 的。最后谢谢查阅。如果觉得还阔以,点个赞再走呗,老铁~