在閱讀這篇前，若你還不了解 CI 是什麼的話
請前往先前寫過的文章: [學習筆記] 簡單了解 CI/CD 是什麼吧

Github 身為工程師的你應該都有使用過，沒用過也沒關係。請立刻前往註冊，這樣才能往下操作~

Github + CircleCi

需使用到以下三種做整合

• node.js
• express.js (做個簡單的測試網站)
• mocha (做個簡單的測試 Unit Test)
• CircleCi (此次 CI 的平台)

Step1. express

請執行安裝 npm install express --save

手動新增一個 index.js 檔案

var express = require('express')
var app = express()
app.get('/',function(req,res){
  res.send('Hello World')
})
var server = app.listen(8081,function(){
var port = server.address().port
  console.log('server is listening at port: ' + port)
})

Step2. mocha

請執行安裝 npm install mocha --save-dev

接著建立一個 test 資料夾，再建立一個 test.js

test/test.js

var assert = require('assert') 
describe('Array',function(){
  describe('#indexOf()',function(){
    it('Return -1 if element can not be searched',function(){
      // assert.equal(0,[1,2,3].indexOf(0)) //故意錯誤
      assert.equal(-1,[1,2,3].indexOf(0)) //正確
    })
  })
})

Step3. 調整 package.json

{
  "name": "cicd-demo",
  "version": "1.0.0",
  "description": "ci/cd first practice",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test" : "mocha"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "mocha": "^9.1.1"
  }

Step4. 本地測試

並且分別執行一下以下指令

• npm start
  • 網址輸入 http://localhost:8081/ (後方 8081 為本地電腦的 port 號，每台電腦都有可能會不同)
    
  • 確認 express 的 index.js 網站是否有成功被建立
    
• npm test
  • 確認 mocha 的 test.js 測試是否有成功被建立
    

Step5. push 至你的 github 上

請先在 github 建立專案，然後把本地端 code 推上去即可。

本地端請執行以下順序

1. git branch => 確認當前分支為主線
2. git add . => 加入所有修改檔案
3. git commit -m 'first' => 儲存已修改檔案
4. git push origin HEAD => 推上 github

更詳細教學看這篇即可: Git教學：如何 Push 上傳到 GitHub？

Step6. 設定 Github + CircleCi

1. 先前往 CircleCi 頁面

2. 使用 github 登入，並選擇你的帳號後
   

3. 選擇你剛建立的專案(我取名為 cicd-demo)

4. 初次設定需要建立 yml 檔，才能讓 CircleCi 知道該跑什麼測試、檔案路徑在哪、什麼環境 等等
   

5. 回到 github 上就會看到一個 PR 出現，要求你 merge，因為 CircleCi 幫你把基本 yml 檔格式建立好了
   

6. merge 後，回到本地端更新一下，修改一下 yml 檔，以符合我們現在的檔案格式

   # This config is equivalent to both the '.circleci/extended/orb-free.yml' and the base '.circleci/config.yml'
   version: 2.1
   
   orbs:
     node: circleci/node@4.1
   
   workflows:
     sample:
       jobs:
         - node/test:
             version: '15.1'
             # This is the node version to use for the `cimg/node` tag
             # Relevant tags can be found on the CircleCI Developer Hub
             # https://circleci.com/developer/images/image/cimg/node
   

7. 儲存上方修改後，再次 push 上去一次至 github

   確認 CircleCi 頁面，就會出現有個 CI 正在執行中
   

   可以點開查看詳細的 CI 過程
   

最終檔案結構會長成這樣

總結

會建議要有個完善的 gitflow 流程。
也就是需要建另外一個分支進行 code 撰寫，push 上去後
這樣另外一個分支的 code 會先跑過 CI，確保沒問題後，在進行 merge master 比較安全。

第一次實際接觸 CI，以為會很難，但其實現在的服務都越來越精緻化了
官方文件也都寫得很好懂，也有不少人有分享實作經驗
我覺得主要了解 CI 的流程及 yml 檔設定
基本上就能把 QA 寫好的自動化腳本放到任一 CI 裡，然後跟在跟團隊協作彼此搭配，就能找到最適合的 CI/CD 的路線了。