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文件
• 配置腳本任務，流程：環境->構建->(緩存)->發布

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的【请收藏】自动化构建部署之Circle CI使用（GitHub/CircleCI/Vue）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。