【请收藏】自动化构建部署之Circle CI使用（GitHub/CircleCI/Vue）

CI/CD 工具介绍

从上图对比可以看到各自有优缺点，Jenkins有点是免费且跨平台，而Travis CI和Circle CI是收费的，且不支持windows，但会为开源的项目免费提供一些服务，私有的就需要收费了。

Circle CI使用

官网：https://circleci.com/

1. 注册

点击右上角Sign Up按钮，点击Sign up with Github：

进入授权界面：

点击Authorize circleci按钮，然后需要输入密码：

输入密码成功后，点选一下自己的组织即可：

进入界面我们可以看到我们仓库里的项目：

2. 创建Github仓库

注意这里要选择Public ，私有项目在CI/CD需要花钱的哦

3. 创建.yml配置文件

首先把github的项目clone到本地，然后在根目录创建.circleci文件夹，在文件夹里创建config.yml文件，文件内容：

version: 2
jobs:build:docker:- image: circleci/node:10steps:- run: echo "A first hello"- run: npm -v

然后提交到github远程仓库：

git add .
git commit -m "add circle config"
git push origin master

查看下这里已经推送成功了：

4. 设置Circle CI

在circle ci后台Projects里已经多出了一个circle-demo项目：

点击Set Up Project 来设置，第一次会询问是否有config.yml配置文件，而且给出了一个模板，因为我们已经在根目录配置了，所以直接Build就行，以下是成功编译的结果：

点击workflow可以看到详细信息：

可以看到构建仅花了4s钟的时间，速度还是很快的，点击下面的build可以看到每一步输出的结果：

是不是很兴奋呢？

5. 配置生产项目(Vue项目)

先创建一个vue项目，然后合并到之前创建的circle-demo目录：

因涉及到checkout代码，所以先要设置ssh密钥，点击Project Settings：

点击左侧 SSH Keys ，点击Authorize with GitHub：

然后授权：

再回来点击Add User Key：

点击后创建了新的SSH Key（后面会用到）

创建这个key的作用是可以直接访问Github私有仓库，防止没有权限读写

添加完成后，我们来编辑config.yml文件：

version: 2
jobs:build:docker:- image: circleci/node:10branches:only:- mastersteps:- add_ssh_keys:fingerprints:- "0c:27:f4:42:c6:ab:3e:cf:3c:09:f3:d1:2c:62:92:6b"- checkout- run: echo "A first hello"- run: npm -v- run:name: Installcommand: yarn install- run:name: Buildcommand: yarn build

文件里的fingerprints就是上一步设置的User SSH Key。

然后把所有代码提交到远程仓库，可以看到此时已经自动触发了Circle CI的构建工作：

整个过程花了44s的时间，看下最后一步Build过程：

嗯~ 是不是有内味了~

6. 缓存依赖

Circle CI提供了缓存功能，因为每次构建都会安装一些插件，node_modules文件夹里文件非常多，每次安装时间很长，如果缓存下来构建就非常快了。

- restore_cache:keys:- dependencies_circle_demo
- run:name: Installcommand: yarn install
- save_cache:paths:- node_moduleskey: dependencies_circle_demo

7. 发布到Github pages

在项目根目录新建一个文件夹scripts，新建deploy.sh：

#!/bin/shset -e# 打印当前的工作路径
pwd
remote=$(git config remote.origin.url)echo 'remote is: '$remote# 新建一个发布的目录
mkdir gh-pages-branch
cd gh-pages-branch
# 创建的一个新的仓库
# 设置发布的用户名与邮箱
git config --global user.email "$GH_EMAIL" >/dev/null 2>&1
git config --global user.name "$GH_NAME" >/dev/null 2>&1
git init
git remote add --fetch origin "$remote"echo 'email is: '$GH_EMAIL
echo 'name is: '$GH_NAME
echo 'sitesource is: '$siteSource# 切换gh-pages分支
if git rev-parse --verify origin/gh-pages >/dev/null 2>&1; thengit checkout gh-pages# 删掉旧的内容git rm -rf .
else git checkout --orphan gh-pages
fi# 把构建好的文件目录给拷贝进来
cp -a "../${siteSource}/." .ls -la# 把所有的文件添加到git
git add -A
git commit --allow-empty -m "Deploy to GitHub pages [ci skip]"
git push --force --quiet origin gh-pages# 资源回收，删除临时分支与目录
cd ..
rm -rf gh-pages-branchecho "Finished Deployment!"

修改config.yml配置文件：

version: 2
jobs:build:docker:- image: circleci/node:10branches:only:- mastersteps:- add_ssh_keys:fingerprints:- "0c:27:f4:42:c6:ab:3e:cf:3c:09:f3:d1:2c:62:92:6b"- checkout- restore_cache:keys:- dependencies_circle_demo- run:name: Installcommand: yarn install- save_cache:paths:- node_moduleskey: dependencies_circle_demo- run:name: Buildcommand: yarn build- run:name: Prepare shell commandscommand: chmod +x scripts/deploy.sh- run:name: Run Deploy to Github pagescommand: ./scripts/deploy.sh

添加circle ci环境变量，同样在项目设置里：

GH_EMAIL 就是你的邮箱
GH_NAME 就是你的用户名
siteSource 是 dist (打包的目录)

然后提交push到GitHub，自动触发构建任务：

我们来看下结果：

好，发布完成后，我们来找一下发布的地址在哪，首先去GitHub项目中，点击Settings：

往下滚可以看到GitHub Pages 里面会有部署的地址：

点开这个链接，额。。。貌似是空白的，原来控制台报错了404：

有经验的老手一猜就知道是vue打包构建需要配置下，就是publicPath这个选项，可以参考下面介绍：

vue cli官网介绍：https://cli.vuejs.org/zh/config/#vue-config-js
也可以看这篇：vue.config.js 配置参考

在项目根目录新建vue.config.js配置文件：

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/circle-demo': '/'
}

因为GitHub项目名为circle-demo，GitHub page生成的路径里带有circle-demo，所以这里需要修改publicPath在生产环境为circle-demo，最终提交代码，push到GitHub再重新构建，刷新页面，就OK啦：

Circle CI总结

GitHub账号注册，授权
新建项目添加.circleci/config.yml文件
配置脚本任务，流程：环境->构建->(缓存)->发布