【请收藏】自动化构建部署之Circle CI使用（GitHub/CircleCI/Vue）
CI/CD 工具介紹
從上圖對比可以看到 各自有優(yōu)缺點，Jenkins有點是免費且跨平臺，而Travis CI和Circle CI是收費的，且不支持windows，但會為開源的項目免費提供一些服務，私有的就需要收費了。
Circle CI使用
官網(wǎng)：https://circleci.com/
1. 注冊
點擊右上角Sign Up按鈕，點擊Sign up with Github：
進入授權(quán)界面：
點擊Authorize circleci按鈕，然后需要輸入密碼：
輸入密碼成功后，點選一下自己的組織即可：
進入界面我們可以看到我們倉庫里的項目：
2. 創(chuàng)建Github倉庫
注意這里要選擇Public ，私有項目在CI/CD需要花錢的哦
3. 創(chuàng)建.yml配置文件
首先把github的項目clone到本地，然后在根目錄創(chuàng)建.circleci文件夾，在文件夾里創(chuàng)建config.yml文件，文件內(nèi)容：
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查看下這里已經(jīng)推送成功了：
4. 設置Circle CI
在circle ci后臺Projects里已經(jīng)多出了一個circle-demo項目：
點擊Set Up Project 來設置，第一次會詢問是否有config.yml配置文件，而且給出了一個模板，因為我們已經(jīng)在根目錄配置了，所以直接Build就行，以下是成功編譯的結(jié)果：
點擊workflow可以看到詳細信息：
可以看到構(gòu)建僅花了4s鐘的時間，速度還是很快的，點擊下面的build可以看到每一步輸出的結(jié)果：
是不是很興奮呢？
5. 配置生產(chǎn)項目(Vue項目)
先創(chuàng)建一個vue項目，然后合并到之前創(chuàng)建的circle-demo目錄：
因涉及到checkout代碼，所以先要設置ssh密鑰，點擊Project Settings：
點擊左側(cè) SSH Keys ，點擊Authorize with GitHub：
然后授權(quán)：
再回來點擊Add User Key：
點擊后創(chuàng)建了新的SSH Key（后面會用到）
創(chuàng)建這個key的作用是可以直接訪問Github私有倉庫，防止沒有權(quán)限讀寫
添加完成后，我們來編輯config.yml文件：
文件里的fingerprints就是上一步設置的User SSH Key。
然后把所有代碼提交到遠程倉庫，可以看到此時已經(jīng)自動觸發(fā)了Circle CI的構(gòu)建工作：
整個過程花了44s的時間，看下最后一步Build過程：
嗯~ 是不是有內(nèi)味了~
6. 緩存依賴
Circle CI提供了緩存功能，因為每次構(gòu)建都會安裝一些插件，node_modules文件夾里文件非常多，每次安裝時間很長，如果緩存下來構(gòu)建就非常快了。
- restore_cache:keys:- dependencies_circle_demo - run:name: Installcommand: yarn install - save_cache:paths:- node_moduleskey: dependencies_circle_demo7. 發(fā)布到Github pages
在項目根目錄新建一個文件夾scripts，新建deploy.sh：
#!/bin/shset -e# 打印當前的工作路徑 pwd remote=$(git config remote.origin.url)echo 'remote is: '$remote# 新建一個發(fā)布的目錄 mkdir gh-pages-branch cd gh-pages-branch # 創(chuàng)建的一個新的倉庫 # 設置發(fā)布的用戶名與郵箱 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# 刪掉舊的內(nèi)容git rm -rf . else git checkout --orphan gh-pages fi# 把構(gòu)建好的文件目錄給拷貝進來 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環(huán)境變量，同樣在項目設置里：
- GH_EMAIL 就是你的郵箱
- GH_NAME 就是你的用戶名
- siteSource 是 dist (打包的目錄)
然后提交push到GitHub，自動觸發(fā)構(gòu)建任務：
我們來看下結(jié)果：
好，發(fā)布完成后，我們來找一下發(fā)布的地址在哪，首先去GitHub項目中，點擊Settings：
往下滾可以看到GitHub Pages 里面會有部署的地址：
點開這個鏈接，額。。。貌似是空白的，原來控制臺報錯了404：
有經(jīng)驗的老手一猜就知道是vue打包構(gòu)建需要配置下，就是publicPath這個選項，可以參考下面介紹：
vue cli官網(wǎng)介紹：https://cli.vuejs.org/zh/config/#vue-config-js
也可以看這篇：vue.config.js 配置參考
在項目根目錄新建vue.config.js配置文件：
因為GitHub項目名為circle-demo，GitHub page生成的路徑里帶有circle-demo，所以這里需要修改publicPath在生產(chǎn)環(huán)境為circle-demo，最終提交代碼，push到GitHub再重新構(gòu)建，刷新頁面，就OK啦：
Circle CI總結(jié)
- GitHub賬號注冊，授權(quán)
- 新建項目添加.circleci/config.yml文件
- 配置腳本任務，流程：環(huán)境->構(gòu)建->(緩存)->發(fā)布
總結(jié)
以上是生活随笔為你收集整理的【请收藏】自动化构建部署之Circle CI使用（GitHub/CircleCI/Vue）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 最新SSM完整模板（Spring+Spr
- 下一篇： Vue第三部分(2)：Vue-CLI构建