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

CI/CD 工具介绍

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

Circle CI使用

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:10
    steps:
      - 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:10
    branches:
      only:
        - master
    steps:
      - 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: Install
          command: yarn install
      - run:
          name: Build
          command: yarn build

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

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

在这里插入图片描述
整个过程花了44s的时间，看下最后一步Build过程：

嗯~ 是不是有内味了~

6. 缓存依赖

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

- restore_cache:
    keys:
      - dependencies_circle_demo
- run:
    name: Install
    command: yarn install
- save_cache:
    paths:
      - node_modules
    key: dependencies_circle_demo

7. 发布到Github pages

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

#!/bin/sh

set -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; then
    git 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-branch

echo "Finished Deployment!"

修改config.yml配置文件：

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10
    branches:
      only:
        - master
    steps:
      - 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: Install
          command: yarn install
      - save_cache:
          paths:
            - node_modules
          key: dependencies_circle_demo
      - run:
          name: Build
          command: yarn build
      - run:
          name: Prepare shell commands
          command: chmod +x scripts/deploy.sh
      - run:
          name: Run Deploy to Github pages
          command: ./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文件
配置脚本任务，流程：环境->构建->(缓存)->发布

原文链接：https://blog.csdn.net/zy1281539626/article/details/114832468