基于 GitHub 与 Travis CI 的持续集成环境部署


前段时间研究了一下 GitLab、 GitLab CI 的持续集成。所以决定整理成文字的形式记录一下。考虑到绝大部分开发没有搭建自己的 GitLab 环境。所以选择使用更方便的 GitHub 和 Travis CI。本来以为很简单事情(too young too simple sometimes naive),中间遇到不小的挫折,特别是网上的一些部署教程模糊,不详细或者很多已经不能正常工作了,而且针对 macOS Mojave / High Sierra 系统的部署流程,基本上没看到很匹配的文章,所以就水一篇文章,希望对用 macOS 系统,又想要自己搭建持续集成环境的童鞋有所帮助。

主要流程:
  • 使用 Vue CLI 3 创建新项目
  • 提交到 Master 分支的时候自动化构建
  • 静态资源发布到服务器
  • 在线访问


创建项目

Vue CLI 3 创建项目特别的容易、只需要一行命令 vue create ${projectName},项目创建好了之后。添加 vue.config.js 配置文件,因为静态资源往往是部署在 CDN 服务器上面的。所以这里修改一下baseUrl字段。
const { CDN } = process.env;

module.exports = {

baseUrl: CDN, // 对应 webpack 中的 publicPath --> CDN 地址

}; 

process.env 的环境变量通过 .env.production 文件配置:
CDN=http://cdn.jimstyle.ink/

打包好的资源路径大概是这样的:
<script src=http://cdn.jimstyle.ink/js/app.a1f9fd0a.js></script>

在 package.json 里面加上 npm run build 的前置与后置钩子,在 build 前删除旧的 dist 目录, 打包成功后同步到服务器。
"prebuild": "rimraf dist",
"postbuild": "node sync-cdn.js",

sync-cdn.js 是把打包好的 dist 内部资源文件同步到服务器,这边采用 rsync 命令,当然 scp 也是可以的,不过 rsync 的效率是比 scp 高的。
const path = require('path');
const Promise = require('bluebird');
const childProcessExec = Promise.promisify(require('child_process').exec);
// 服务器地址
const SERVER_PATH = 'root@47.98.99.250:/server/static';
// 编译输出目录
const DIST_PATH = path.join(__dirname, 'dist');

console.time('sync time');

childProcessExec(`rsync -Rr . ${SERVER_PATH}`, { cwd: DIST_PATH }).then(() => {
console.info('sync cdn success~');
console.timeEnd('sync time');
});

先本地测试一遍,是否可以成功, 运行 npm run build、运行成功的话,就可以在线访问了(当然需要域名地址可以访问,先配置好开发机的 nginx 和 host)。

配置 Travis CI

Travis CI 是目前新兴的开源持续集成构建项目,采用 yaml 格式,简洁清新独树一帜。目前大多数的 GitHub 项目都已经移入到 Travis CI 的构建队列中。Travis-CI 会同步你在 GitHub 上托管的项目,每当你 Commit Push 成功之后,就可以根据配置文件进行项目的构建发布。

使用 GitHub 账号登录 Travis CI 官网

打开个人设置并给你想要构建的项目启用 Travis-CI。
1.png

项目中添加 .travis.yml 文件,并写入配置:
language: node_js
script:     
- npm run test

可以测试一下,修改 package.json 文件,在 script 字段中添加 "test": "echo \" ci run success \"",然后 git commit -am 'feat: test ci', git push 这个时候会开始构建了,下图是构建成功的状态。
2副本.jpg

修改 .travis.yml 文件的配置:
language: node_js
node_js:
- node
cache:
apt: true
directories:
- node_modules
env:
- SERVER_IP_ADDRESS=47.98.99.250
addons:
ssh_known_hosts:
- 47.98.99.250
script:
- npm install
after_script:
- npm run build

继续提交,发现这次构建失败了,提示需要输入密码,但是 Travis CI 是非交互式 shell,这个时候需要配置 SSH Keys,确保 Travis CI 运行的服务器与自己的服务器可以免密码传输。
3.jpg

这里主要有以下几个步骤:

1、登录服务器:
ssh root@47.98.99.250

2、生成SSH Key:
cd ~/.ssh

ssh-keygen -t rsa -b 4096 -C "TravisCIDeployKey"

一路回车,成功后大概是这样:
The key fingerprint is:
4a:dd:0a:c6:35:4e:3f:ed:27:38:8c:74:44:4d:93:67 demo@a
The key's randomart image is:
+--[ RSA 2048]----+
|          .oo.   |
|         .  o.E  |
|        + .  o   |
|     . = = .     |
|      = S = .    |
|     o + = +     |
|      . o + o .  |
|           . o   |
|                 |
+-----------------+

3、添加到 authorized_keys:
cat id_rsa.pub >> authorized_keys

4、拷贝到当前项目, 首先切换到当前项目,然后运行:
scp root@47.98.99.250:/root/.ssh/id_rsa ./deploy_key

5、密钥是敏感信息,需要添加到 .gitignore 文件中:
echo "deploy_key" >> .gitignore

6、测试是否能登录到服务器:
ssh -i ./deploy_key root@47.98.99.250

4.jpg

7、需要对密钥文件加密,先安装 Travis-CI CLI,因为 Travis CI 是基于 Ruby 的,所以还需要先安装 Ruby,而且需要 2.0+ 的版本:
brew install ruby

成功后查看版本:
ruby -v

确保 Ruby 已经正确安装且版本没有问题,这个时候可以使用 gem 命令,开始安装 Travis-CI CLI。


Gem 是一个管理 Ruby 库和程序的标准包,它通过 Ruby Gem 源来查找、安装、升级和卸载软件包,非常的便捷。
gem install travis

如果网络被墙,安装失败,可以换成国内的镜像,这边需要指出的是,很多文章上写的的国内镜像源是 https://gems.ruby-china.org/ 因域名备案问题,.org 已经换成了.com:
gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
gem sources -l

继续安装,发现依旧失败,Google 发现 Mac OS Sierra 系统以及更高级版本需要安装 xcode-select,执行 xcode-select --install。

8、travis login

安装成功后,切换到项目目录使用 GitHub 账户名及密码登录 Travis。

9、对证书文件加密:
travis encrypt-file ./deploy_key --add

执行成功后,就会在 .travis.yml 看到多了几行配置代码,把 .\/deploy_key 前面的转义字符去掉(这里会造成构建失败)。
before_install:
- openssl aes-256-cbc -K $encrypted_a3811aa9d454_key -iv $encrypted_a3811aa9d454_iv
-in deploy_key.enc -out ./deploy_key -d

为了确保打包后的文件能够同步到服务器,修改 .travis.yml:
before_install:
- openssl aes-256-cbc -K $encrypted_a3811aa9d454_key -iv $encrypted_a3811aa9d454_iv
-in deploy_key.enc -out ./deploy_key -d
- eval "$(ssh-agent -s)"
- chmod 600 ./deploy_key
- echo -e "Host $SERVER_IP_ADDRESS\n\tStrictHostKeyChecking no\n" >> ~/.ssh/config
- ssh-add ./deploy_key
- ssh -i ./deploy_key root@47.98.99.250 pwd

具体每行配置代码的含义,感兴趣的童鞋可以查看链接

10、再次提交,发现此时构建已经成功,点击查看详情。查看服务器,文件已经正常同步到指定文件夹,页面也能够正常访问
5.jpg

6.jpg

到此为止,基于 GitHub 与 Travis CI 的持续集成环境终于部署成功了。完整版配置地址:https://github.com/eltonchan/v ... is_ci

原文链接:https://zhuanlan.zhihu.com/p/52452036

0 个评论

要回复文章请先登录注册