Github 集成 TravisCI:自动发布

本贴最后更新于 1974 天前,其中的信息可能已经事过景迁

前言

已经有阮一峰老师的持续集成服务 Travis CI 教程,为什么还要写这篇文章?

原因有二:

  1. 文章内容有些过时
  2. 文章覆盖度不够,有些实践细节没写出来

由于以上原因,纵然可以笔者很快在 Github 集成 Travis CI 并成功构建,但在发布时却踩了一些坑,折腾一波才终于发布成功。故写下此文,旨在补充更多的细节,帮助他人少走弯路。

正文

免费购买 Travis CI 应用

点击 https://github.com/marketplace/travis-ci,登录后免费购买(开源项目集成 Travis CI 不收费)。

选择关联仓库

选择个人或组织名下需要关联 Travis CI 的 Github 仓库。

已经设置过的,想进行修改,可以在 Github 的 Personal settings-> Applications 中进入。
image.png

编写 CI 文件

在项目根目录下新建 .travis.yml 文件

touch .travis.yml

发布到 github pages

下面展示一个可以发布到 gh-pages 的例子,可以稍做修改,复制粘贴使用。

该示例包含了:

  • 指定 node.js 版本
  • 使用 yarn 进行安装依赖及构建
  • 对安装需要的依赖进行了缓存
  • 设置了两个不含敏感信息的环境变量
  • 设置了一个含有敏感信息的环境变量
  • 把构建生成的文件部署至 github pages
language: node_js
node_js:
- lts/*
env:
- API_SERVER=https://easy-mock.com/mock/5c1b3895fe5907404e654045/femessage-mock PUBLIC_PATH=http://levy.work/nuxt-element-dashboard/
# 默认是yarn, 如果有yarn.lock的话
install:
- yarn
# 默认是 yarn test
script:
- yarn build
cache: yarn
deploy:
  provider: pages
  skip-cleanup: true
  keep-history: true
  local-dir: dist
  on:
    branch: master
  github-token: $GITHUB_TOKEN

下面对文件进行说明。

language: node_js
node_js:
- lts/*
  • 第 1 行指定了构建环境为 node.js
  • 第 2、3 行指定使用 node.js 最新的 LTS 版本
env:
- API_SERVER=xxx PUBLIC_PATH=xxx

上面是设置两个环境变量。

注意,一次构建中传多个环境变量,必须写在同一行,使用空格分开。

env:
- API_SERVER=xxx 
- PUBLIC_PATH=xxx

如果写成上面的形式,则会变成两个构建,每一个构建中只有一个环境变量。

install:
- yarn
script:
- yarn build
cache: yarn

上面指定使用 yarn 进行安装依赖,安装好后执行 yarn build 命令; 为 yarn 的依赖加速安装,开启了缓存。

下面是最关键的部署配置。

deploy:
  provider: pages
  github-token: $GITHUB_TOKEN
  skip-cleanup: true
  keep-history: true
  local-dir: dist
  on:
    branch: master
  • 第 2 行指定部署到 Github Pages,即仓库的 gh-pages 分支,请确保仓库的 pages 分支是 gh-pages , 相关操作可以看这里
  • 第 3 行指定保留构建后的文件
  • 第 4 行指定每次部署会新增一个提交记录再推送,而不是使用 git push --force
  • 第 5 行指定构建后要部署的目录
  • 第 6、7 行指定 master 分支有提交行为时,将触发构建后部署
  • 第 8 行是部署需要用到的 github-token,其中 $GITHUB_TOKEN 是变量,它可以在 Travis CI 个人仓库的 setting 页里设置,相关操作可以看这里

发布到 npm

再给出把 node.js 模块发布到 npm 的例子

主要是 deploy 这里有所不同

deploy:
  provider: npm
  email: <your_email>
  # api_key: travis encrypt NPM_TOKEN --add deploy.api_key --com
  on:
    branch: master
  skip-cleanup: true

api_key 指的的 npm 的 token,可以登录 npm 后,在个人中心生成

因为不能泄露,所以要通过 travis ci 的命令行工具进行加密,执行以下命令

travis encrypt NPM_TOKEN --add deploy.api_key --com

复杂例子

下面是一个复杂的例子,也是实际用到的配置,主要是

  • master 分支才会触发构建
  • 执行 script 命令前先读取 shell 中的环境变量,并生成 .env 文件
  • 构建成功后
    • 把模块发布到 npm
    • 把文档发布到 gh-pages
branches:
  only:
    - master
language: node_js
node_js:
- lts/*
git:
  depth: 3
install:
- yarn --frozen-lockfile
before_script: echo OSS_KEY=$OSS_KEY\\nOSS_SECRET=$OSS_SECRET\\nOSS_BUCKET=$=OSS_BUCKET\\nOSS_REGION=$OSS_REGION > .env
script:
- yarn build
cache: yarn
deploy:
- provider: pages
  local-dir: docs
  github-token: $GITHUB_TOKEN
  skip-cleanup: true
  keep-history: true
- provider: npm
  email: levy9527@qq.com
  api_key: $NPM_TOKEN
  skip-cleanup: true

相关操作

使用 travis 命令行工具加密

加密要用到 travis 命令行工具,如果是在 travis ci web 界面设置环境变量,则可直接跳过。

下面给出 mac 环境下操作需要注意的点

1.安装命令:

brew install travis

否则很可能会出现问题

2.确保在 https://travis-ci.org/ sign in with github

3.然后在项目根目录里,执行命令

travis login —auto

4.修改 git 设置

vi .git/config

确保

[travis]
  slug = 是你在travis关联的仓库

5.添加加密环境变量

travis encrypt github-token=xxx --add deploy.github-token --com

因为笔者登录的 travis ci 域名是 https://travis-ci.com,所以要带参数 --com , 默认是 https://travis-ci.org

通过环境变量设置 GITHUB_TOKEN

首先为 Travis CI 新建一个 token

点击生成新 token

设置权限

image.png
复制生成的 token。(记得先不要刷新或离开当前页面,否则 token 就看不见了,只能重新生成)

登录 Travis CI, 进入要集成的项目设置页。

image.png

添加环境变量 GITHUB_TOKEN

注意,这里的环境变量是通过 bash 设置、并在.yml 里读取的,所以变量名是大写加下划线形式,这是 bash 的最佳实践,千万别写成 github-token

image.png

GitHub Pages

查看 gh-pages 分支的部署情况

进入仓库 Settings -> Options

image.png

往下翻看,可以看到效果
image.png
因为笔者自定义了域名,所以地址不是默认的 https://xxx.github.io/xxx

  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • TravisCI
    1 引用
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖 • 1 关注

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...