使用 travis 自动部署 vuejs 项目

使用 travis 自动部署 vuejs 项目

什么是 Travis?

Travis 是一个在线的软件持续集成服务,与 GitHub 之间有着良好的协同关系。

这篇记录将会以 mdzz-web 这个 vuejs 项目举例。


vuejs 项目的手动部署

如果不用 travis,对于一个 vuejs 项目来说,大概有这两种部署方式:

开发环境打包

在开发机上打包出静态文件,再将 dist 上传到生产环境。

npm install
npm run build
rsync ./dist/* <USERNAME>@<HOST>:<TARGET-PATH>

生产环境打包

在生产环境中拉取仓库,打包,再拷贝到目标路径。

npm install
npm run build
cp ./dist/* <TARGET-PATH>

这样做并不复杂,但是想让集成过程更加自动化(比如自动测试),也为了让其他同学更好地贡献代码,还是决定上 travis。

使用 travis 进行 CI/CD

在 travis 中同步 github 仓库

在 travis 主页中,点击 sync now,以同步 github 中的仓库。同时,你也要在 github 中给 travis 设置可访问的仓库有哪些。

在仓库中添加 .travis.yml

你需要在仓库的根目录下新建一个 .travis.yml 来告知 travis CI 的相关配置。在本例中,我们要将项目部署到 gz.oidiotlin.com,且仅对 master 分支上的 commit 做集成,例如:

language: node_js
node_js: stable
branches:
  only:
  - master
addons:
  ssh_known_hosts:
  - gz.oidiotlin.com
install:
- npm install
script:
- npm run build
after_success:
- rsync -az --delete ./dist/* travis@gz.oidiotlin.com:/var/www/mdzz-web/

SSH 卡住了?

如果仅仅是像上面那样配置的话,travis build 的时候会卡住。因为 rsync 工具需要输入 ssh 登录密码,而在 travis build 环境里,我们根本无法输入密码。

使用 ssh-keygen

自然,我们希望不需要输入密码就能登录 gz.oidiotlin.com,这里使用 ssh-keygen 工具产生公/私钥