资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/

novo / 1360人阅读

前言

已经有阮一峰老师的持续集成服务 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: 
  # 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
OSS_SECRET=$OSS_SECRET
OSS_BUCKET=$=OSS_BUCKET
OSS_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

私有云 专线服务 政务 快车道 尹世明 总经理

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/105130.html

相关文章

  • vue中如何实现的自定义按钮

    摘要：在实际开发项目中，有时我们会用到自定义按钮因为一个项目中，众多的页面，为了统一风格，我们会重复用到很多相同或相似的按钮，这时候，自定义按钮组件就派上了大用场，我们把定义好的按钮组件导出，在全局引用，就可以在其他组件随意使用啦，这样可以大幅度 在实际开发项目中，有时我们会用到自定义按钮；因为一个项目中，众多的页面，为了统一风格，我们会重复用到很多相同或相似的按钮，这时候，自定义按钮组件就...

    biaoxiaoduan 评论0 收藏0

  • JavaScript代码整洁之道

    摘要：代码整洁之道整洁的代码不仅仅是让人看起来舒服，更重要的是遵循一些规范能够让你的代码更容易维护，同时降低几率。另外这不是强制的代码规范，就像原文中说的，。里式替换原则父类和子类应该可以被交换使用而不会出错。注释好的代码是自解释的。 JavaScript代码整洁之道 整洁的代码不仅仅是让人看起来舒服，更重要的是遵循一些规范能够让你的代码更容易维护，同时降低bug几率。 原文clean-c...

    liaorio 评论0 收藏0

  • 前端经典面试题总结

    摘要：接着我之前写的一篇有关前端面试题的总结，分享几道比较经典的题目第一题考点作用域，运算符栗子都会进行运算，但是最后之后输出最后一个也就是那么其实就是而且是个匿名函数，也就是属于，就输出第二和第三个都是类似的，而且作用域是都是输出最后一个其实就 接着我之前写的一篇有关前端面试题的总结，分享几道比较经典的题目： 第一题： showImg(https://segmentfault.com/im...

    BlackMass 评论0 收藏0

  • 私有云那家好-六大私有云厂商详细对比！

    对比内容UCloudStackZStackVMwareQingCloud腾讯TStack华为云Stack优势总结•基于公有云自主可控•公有云架构私有化部署•轻量化/轻运维/易用性好•政府行业可复制案例轻量化 IaaS 虚拟化平台•轻量化、产品成熟度高•业内好评度高•功能丰富、交付部署快•中小企业案例多全套虚拟产品及云平台产品•完整生态链、技术成熟•比较全面且健全的渠道•产品成熟度被市场认可，市场占...

    ernest.wang 评论0 收藏0

  • cross-env使用记录

    摘要：能跨平台地设置及使用环境变量让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题安装方式改写使用了环境变量的常见如在脚本多是里这么配置运行，这样便设置成功，无需担心跨平台问题关于跨平台兼容，有几点注意 cross-env能跨平台地设置及使用环境变量, cross-env让这一切变得简单，不同平台使用唯一指令，无需担心跨平台问题 1、npm安装方式 npm i --save-de...

    Michael_Ding 评论0 收藏0

  • webpack打包插件

    摘要：引入的模块引入的使用将打包打包的拆分将一部分抽离出来物理地址拼接优化打包速度压缩代码，这里使用的是，同样在的里面添加 const path = require(path); //引入node的path模块const webpack = require(webpack); //引入的webpack,使用lodashconst HtmlWebpackPlugin = require(ht...

    ChanceWong 评论0 收藏0

发表评论

登陆后可评论

0条评论

novo

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<