GitHub 集成 Travis CI

栏目: 服务器 · 发布时间: 5年前

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

前言

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

原因有二:

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

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

正文

免费购买Travis CI应用

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

选择关联仓库

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

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

GitHub 集成 Travis CI

编写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后,在个人中心生成

GitHub 集成 Travis CI

因为不能泄露,所以要通过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服务吧!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Dynamic HTML权威指南

Dynamic HTML权威指南

Danny Goodman / 2009-6 / 99.80元

《Dynamic HTML权威指南(第3版)》涵盖了最新的Web规范和各种浏览器功能特性,如果您要使用HTML、XHTML、CSS、文档对象模型(DOM)和JavaScript进行开发,那么它正是您要寻找的一站式终极资源宝库。《Dynamic HTML权威指南(第3版)》为富互联网应用程序的设计者提供了全面而翔实的参考。在《Dynamic HTML权威指南(第3版)》的帮助下,无论是Interne......一起来看看 《Dynamic HTML权威指南》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具