1.前言
之前一直用jeakins部署,最近了解了一下gitlab-ci,就想嘗試一下,中途遇到很多坑。
簡單的記錄一下,然後談一談自己關於部署的一些理解。
2.gitlab-ci
簡介
前端CICD我理解的就是程式碼通過本地各種校驗後的不斷整合到遠端分支,然後觸發一列行為(比如安裝,打包,測試,部署)。
一般需要兩個伺服器,
一個是ci伺服器,用來跑各種任務(安裝,打包,測試,部署等等)
另外一個就是部署伺服器,可以是一個nginx,來展示靜態資源。
jeakins可以理解為一個ci伺服器。
當然 gitlab本身也提供一個ci伺服器,那就是gitlab-ci
這期間我遇到了好多坑,快崩潰了。
安裝runner的坑
如果是gitlab專案,在setting-cicd中,左側是私人的runner,右側是其他人提供的runner
runner可以簡單理解為ci伺服器上跑的ci服務
但是需要注意的是別人的runner不一定適用你,因為人家的ci伺服器上的環境也許是java環境,沒裝node,沒裝你需要的一些全域性包。所以一般都需要自己做一個符合自己專案的前端通用runner。
第一步:runner伺服器選擇
首先如果你是個人gitlab專案,那麼你可以找隨便找一臺伺服器。但是你是公司的專案,最後找一臺公司內網伺服器安裝,應該外網伺服器不一定能訪問你公司的自己搭的gitlab。
第二步:安裝runner方式選擇
安裝的話可以參考官網安裝,有幾種方式.但是對於我來說,由於公司的伺服器不能訪問科學~上網~,下載安裝包特別慢,慢到崩潰的那種,所以我直接採用先下載安裝包,再安裝的方式。注意linux x86_64 對應的安裝包是amd64,別下錯了。
第三步:安裝全域性依賴包
runner只是在ci伺服器中一個服務,本地找不到包還是得從全域性找。
所以需要ci伺服器安裝 git nvm(管理node) nrm (管理npm源) vue-cli-serve 等等一些常用的全域性包。
第四步:註冊runner
註冊很簡單,其實就是runner和gitlab建立連結
gitlab-runner register
按提示一步步來就行了,一定得是ci伺服器能連的上gitlab才行
token和url在setting-runner裡面找完事後就可以發現自定義runner多了一個且可用。
第五步:更改runner許可權
肯定得用root許可權執行,預設使用者runner 公司的伺服器不認
sudo gitlab-runner uninstall # 刪除gitlab-runner
gitlab-runner install --working-directory /home/gitlab-runner --user root # 安裝並設定--user(設定為root)
sudo service gitlab-runner restart # 重啟gitlab-runner
ps aux|grep gitlab-runner # 檢視當前runner使用者
3.跑通部署服務
.gitlab-ci.yml
專案根目錄下面新增.gitlab-ci.yml檔案,每次提交的時候gitlab根據該檔案啟動runner。
具體的含義大家自己去搜,我只說幾個關鍵的地方。
- runner有名字,我的runner叫fyy,tag引數用來執行需要觸發的runner
- stage是階段,一般有三個階段(加上單元測試、整合測試之類的程式碼檢測的可以是四個)
- 每階段完成,生成的檔案會被刪除,所以需要cache快取一下
- only引數指定只有哪個分支變化才觸發runner
一個可用的參考的指令碼
stages:
- install
- build
- deploy
cache: # 快取
paths:
- node_modules
- dist
第一階段-install:
tags:
- fyy
stage: install
script:
- pnpm install
- echo '依賴安裝成功!'
only:
- mono-dp
第二階段-build:
tags:
- fyy
stage: build
script:
- pnpm buildTest
- echo '測試環境程式碼打包成功!'
only:
- mono-dp
第三階段-deploy:
tags:
- fyy
stage: deploy
script: # 具體的部署方式,這裡是常規的部署,也可以容器化部署
- cd dist
- tar -cf dist.tar --exclude=./dist.tar .
- 具體的shell指令碼(ssh連結,拷貝到指定目錄,解壓之類的)
only:
- mono-dp
npm安裝的坑
這個時候基本上可以了,mono-dp push 上去會觸發ci操作,在pipeline裡面可以看到流程。
我遇到的問題是npm安裝的時候會報一些錯,這個應該是我pnpm.lock檔案有問題引起的。
排查問題可以直接登入遠端伺服器手動試一試,手動在runner的專案目錄裡面/home/gitlab-runner/builds/-qUnF6qy/0/webproject/convergencemarketing/
npm insatll build排查下,這個時候不要走ci流程了,會很慢。
runner 打包的坑
我遇到的問題是專案有些依賴走的全域性包,比如有個包叫chalk,沒寫進Package裡,ci的時候由於Package裡沒有就不會安裝,導致打包錯誤
解決方案就是排查下,專案不要有依賴全域性包的,全部改成本地的
但是vue-cli-serve這種就沒辦法,只能ci伺服器全域性去裝
4.總結與思考
最後亮一下成功的截圖
總體來說和jekins很類似,比較適合團隊開發與大型專案開發,流程比較清楚。
但是缺點也是有的,感覺比較慢,我這個專案大概12分鐘 這還是有pnpm+快取。
對於我這種小公司小專案,直接本地打包傳上去部署(走自己寫的部署服務,或者直接使用上傳軟體或者自定義plugin)會不會更適合一點(能控制在1分鐘)。