使用 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 工具产生公/私钥