基于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成功之后,就可以根据配置文件进行项目的构建发布。

1、使用GitHub账号登录travis-ci官网

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

3、项目中添加.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

4、修改.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发现macOS 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

具体每行配置代码的含义,感兴趣的童鞋可以查看:https://github.com/dwyl/learn- ... is-ci

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

6.jpg

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

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

0 个评论

要回复文章请先登录注册