阅读 161

使用Travis CI尝试前端的持续集成

前端的持续集成

在软件工程中,持续集成(CI)指的是多次小幅度的将开发的代码合并到主干(我的理解这个主干是类似于dev的测试环境代码)的做法。在合并之前,需要做一些测试和构建的步骤,通过了之后就可以将新代码"集成"到主干。

结合我自身的真实情况,就是我有一个演示项目(使用的GitHub pages)开源在GitHub,每次需要做点升级都需要重新build,然后把buil生成的的静态文件提交到GitHub。这就导致了很多的重复性工作。

例如有时候我只是修改一行文本,但是也需要自己手动build和提交。现在我想只是修改源码并提交,build和提交build后的静态文件交给Bot去完成。

Travis CI

Github上面的开源项目使用Travis CI提供的持续集成服务(Continuous Integration,简称 CI)是非常方便的。

首先你得有个GitHub账号和项目,然后去travis-ci官方网站使用GitHub授权登录。在setting里激活某个仓库,一旦激活了一个仓库,Travis 会监听这个仓库的所有变化。

登录GitHub,在最右侧下拉中点击setting,然后按顺序点击Developer settingsPersonal access tokens。继续找到Generate new token生成新的token,如下图所示,我把能点的都点上了,只有一个delete_repo没有授权。这个token要保存下,离开页面以后就看不到了,只能重新生成。

travis-c打开激活的仓库setting,添加1个环境变量,分别是GITHUB_TOKENGITHUB_TOKEN是我们刚刚在GitHub上面的授权token,基本所有权限都给了。

编写.travis.yml

准备工作完毕后,在项目的根目录新建.travis.yml文件,这是配置和脚本文件,指定了 Travis 的行为。该文件必须保存在项目的根目录 ,一旦代码仓库有新的 Commit,Travis 就会去找这个文件,按照配置执行里面的命令。

这里说下我想实现的基本步骤:

  1. 我修改源码或者升级某个node包,提交到GitHub
  2. Travis 得到消息后,clone最新的代码
  3. 使用yarn执行安装和build
  4. 将所有文件的变化提交到GitHub

下面介绍下.travis.yml文件:

# 语言
language: node_js
# 版本,这里指定的是最新的lts版
node_js: lts/*
# 要最新的就行,所以克隆最近的一次commit
git:
  depth: 1
# 安装
install: yarn
# 指定了缓存的内容,这里是yarn安装的东西,既node_modules
cache: yarn
# build
script: yarn build
# build成功后开始部署,下面是travis-ci提供的一些比较便捷的写法,针对GitHub pages的
deploy:
  # 这里指定了GitHub的pages服务
  provider: pages
  # Make sure you have skip_cleanup set to true, otherwise Travis CI will delete all the files created during the build,
  # which will probably delete what you are trying to upload.
  skip_cleanup: true
  github_token: $GITHUB_TOKEN
  # 这里需要是true,否则会git push --force,把以前的记录覆盖了
  keep_history: true
  # 使用GitHub的用户名和邮箱
  committer_from_gh: true
  # 目标分支
  target_branch: master
  on:
    branch: master
复制代码

GitHub的pages服务只能指定在master分支的根目录或者docs,我这里使用的是放在docs,根目录还需要存放源码。

这样只要我提交了一些更新,Bot就会build一次,没有变动的话就不提交,有变化的话就会自动push到GitHub。这一步暂时还不能自定义commit message。下图中docs文件夹的提交就是Bot做的。

可以查看项目的真实记录

下面贴出bot自动执行的部分log

3.22s$ nvm install lts/*
cache.1
Setting up build cache
cache.yarn
cache.npm
$ node --version
v12.13.0
$ npm --version
6.12.0
$ nvm --version
0.35.1
$ yarn --version
1.15.2
install
1.09s$ yarn
8.68s$ yarn build
yarn run v1.15.2
$ vue-cli-service build
      
Done in 8.52s.
The command "yarn build" exited with 0.
cache.2
store build cache
dpl_0
2.03s$ rvm $(travis_internal_ruby) --fuzzy do ruby -S gem install dpl
7.84s
dpl.1
Installing deploy dependencies
Logged in as @hezhongfeng (hezf)
dpl.2
Preparing deploy
dpl.3
Deploying application
Done. Your build exited with 0.
复制代码

自定义行为

如果想通过commit message去控制Bot的行为,可以在脚本里进行判断。 script: if [[ $TRAVIS_COMMIT_MESSAGE == *"trigger build"* ]]; then mvn install ; fi ;

总体速度还是很快的,整个build+提交的时间在1分钟多一点。以后都不用我手动build和提交了。

gitlab上面也有相似的GitLab CI/CD,应该是差不多的,暂时先不做过多研究。

关注下面的标签,发现更多相似文章
评论