前言
已经有阮一峰老师的持续集成服务 Travis CI 教程,为什么还要写这篇文章?
原因有二:
- 文章内容有些过时
- 文章覆盖度不够,有些实践细节没写出来
由于以上原因,纵然可以笔者很快在 Github 集成 Travis CI 并成功构建,但在发布时却踩了一些坑,折腾一波才终于发布成功。故写下此文,旨在补充更多的细节,帮助他人少走弯路。
正文
免费购买 Travis CI 应用
点击 https://github.com/marketplace/travis-ci,登录后免费购买(开源项目集成 Travis CI 不收费)。
选择关联仓库
选择个人或组织名下需要关联 Travis CI 的 Github 仓库。
已经设置过的,想进行修改,可以在 Github 的 Personal settings-> Applications 中进入。
编写 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
设置权限
复制生成的 token。(记得先不要刷新或离开当前页面,否则 token 就看不见了,只能重新生成)
登录 Travis CI, 进入要集成的项目设置页。
添加环境变量 GITHUB_TOKEN
注意,这里的环境变量是通过 bash 设置、并在.yml 里读取的,所以变量名是大写加下划线形式,这是 bash 的最佳实践,千万别写成 github-token
GitHub Pages
查看 gh-pages
分支的部署情况
进入仓库 Settings -> Options
往下翻看,可以看到效果
因为笔者自定义了域名,所以地址不是默认的 https://xxx.github.io/xxx
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于