持续集成工具

# 什么是持续集成

持续集成（Continuous integration，简称CI）是指频繁地将代码集成到主干。

持续集成的好处可以帮助我们快速发现错误，集成到主干前需要经过自动测试，如果过程中出现错误，将无法完成此次集成，这是其一。

第二点好处是可以防止分支与主干的偏差过大，导致集成难度变大。假如在分支发开时，没有及时集成到主干，而主干又在不断更新，将会导致分支与主干的偏差过大，最终导致难以集成。

使用持续集成工具还能够替我们完成繁琐的工作，例如自动部署等。

持续集成的工具非常多，例如 Travis CI、Jenkins、Gitlab CI 等等。本文将简单介绍一下 Travis CI 的使用。

# 应用

Travis 是一款流行的 CI 工具，可免费用于开源项目。在托管时，不必依赖任何平台。Travis CI 工具为许多构建配置和语言提供支持。

前段时间写了个 Python 的项目，才开始了解到了 Travis CI。在项目的根目录添加了 .travis.yml 文件进行配置，当代码发生变动时，Travis CI 将会执行测试脚本，通过测试后将代码打包成 Docker 镜像并推送到官方仓库。

这两天我用 VuePress 搭建了一个新的博客站点 http://blog.fedevelop.cn (opens new window)，刚好利用 Travis CI 实现部署的工作，省下了宝贵的时间。

# 例子

下面我将自动部署博客的应用作为例子，带大家熟悉持续集成工具。

首先在我的 VuePress 项目里添加 .travis.yml 文件。我的内容只有简单 3 行，如下

# 指定语言
language: node

# 安装依赖
install: npm install

# 执行脚本
script: npm run deploy

1
2
3
4
5
6
7
8

deploy 命令是我在 package.json 中定义好的一个命令，内容如下

"script": {
    "dev": "xxx",
    "build": "xxx",
    "deploy": "bash deploy.sh"
}

1
2
3
4
5

bash deploy.sh 意思是执行 deploy 这个 shell 脚本, deploy.sh 的内容如下

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run build

# 进入生成静态文件的文件夹
cd blogs/.vuepress/dist

git init
git add .
git commit -m "auto push"
git remote add origin https://${token}@github.com/<your name>/<your name>.github.io.git
git push -f --set-upstream origin master

cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

意思为先执行 npm run build 命令进行编译，如果报错的话，Travis 将不会进行下面的操作。如果编译没有报错的话，将会进入 blogs/.vuepress/dist 目录，将里面的内容推送到我的 GitHub Page 项目，完成部署工作。

其中 ${token} 将会获取 Travis 中设置的环境变量。涉及隐私的数据，我们可以通过环境变量的方式来传递。下面我们就来看如何设置。

下一步打开 Travis 官网 https://travis-ci.org (opens new window) 可以看到右上角的 Sign in with GitHub 即用 GitHub 账号登录。

Travis 官网

完成登录后，进入设置页，可以看到本人的 GitHub 的项目，找到 VuePress 的项目。如果项目过多，找不到项目，可以点击 Sync account 按钮同步账户。接下里进入设置页，这里我们可以设置监听的分支、环境变量等。

设置页

其中 Environment Variables 为环境变量，Cron Jobs 为定时任务。在 .travis.yml 中可以使用 ${key} 取得环境变量中的值。

因为从 Travis 提交代码到 GitHub 默认是会被拒绝的，我们需要加上 access_token，我的项目里设为了 token。

接下来就可以去 GitHub https://github.com/settings/tokens (opens new window) 获取 access_token，点击 Generate new token 按钮，将生成好的 access_token 复制到 Travis 的环境变量中。到这里就算配置完成。

接下来只要我的提交代码，Travis 就会帮我构建部署，这样我就省去了许多部署的时间。

关于 .travis.yml 的配置还有很多，如果感兴趣也可以到 Travis 官网查看文档。

如果你喜欢我的文章，希望可以关注一下我的公众号【前端develop】

前端develop