GitHub 集成 Travis CI
source link: https://github.com/levy9527/blog/issues/1?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
前言
已经有阮一峰老师的 持续集成服务 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
下面是一个实际使用的例子,可以直接复制粘贴使用。
该示例包含了:
- 指定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页里设置,
再给出把node.js模块发布到npm的例子
deploy: provider: npm email: <your_email> # api_key: travis encrypt NPM_TOKEN --add deploy.api_key --com on: branch: master
api_key指的的npm的token,可以登录npm后,在个人中心生成
因为不能泄露,所以要通过travis ci的命令行工具进行加密,执行以下命令
travis encrypt NPM_TOKEN --add deploy.api_key --com
相关操作
GitHub Pages
查看 gh-pages
分支的部署情况
进入仓库 Settings -> Options
往下翻看,可以看到效果
因为笔者自定义了域名,所以地址不是默认的 https://xxx.github.io/xxx
设置GITHUB_TOKEN
首先为Travis CI新建一个token
点击生成新token
设置权限
复制生成的token。(记得先不要刷新或离开当前页面,否则token就看不见了,只能重新生成)
登录Travis CI, 进入要集成的项目设置页。
添加环境变量 GITHUB_TOKEN
注意,这里的环境变量是通过bash设置、并在.yml里读取的,所以变量名是大写加下划线形式,这是bash的最佳实践,千万别写成 github-token
好了,在master分支上推送一下,试试新鲜出炉的CI服务吧!
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK