如何使用Runner緩存加快前端構(gòu)建

Before

Gitlab-ci是Gitlab提供的CI/CD特性，結(jié)合Gitlab簡單友好的配置界面，能愉悅的在Gitlab界面查看管道執(zhí)行流程，并自然流暢的推動敏捷開發(fā)。
Gitlab-CI/CD的核心是搭建Gitlab Runner、編寫.gitlab-ci.yaml文件。
詳細(xì)示例請參考：Gitlab CI/CD+ASP.NET Core.

“  

本次前后端兩個項(xiàng)目使用同一個Gitlab Runner(shell模式)，前端項(xiàng)目的gitlab-ci.yaml構(gòu)建Job如圖：

Round 1

單個Gitlab Runner可為多個項(xiàng)目提供構(gòu)建服務(wù)

“  

gitlab-Runner register命令只能接受一個注冊token，當(dāng)時為支持多個項(xiàng)目，花了不少冤枉心思倒騰Gitlab Runner.

你可以為注冊的項(xiàng)目解鎖Runner，這樣Gitlab Runner就可以為其他項(xiàng)目提供構(gòu)建：

 

Round 2

使用Runner緩存加快前端構(gòu)建過程
大家都知道npm_module被前端開發(fā)者詬病為毒瘤， 而Gitlab runner執(zhí)行每次構(gòu)建job之前都會清場，pull/fetch指定的代碼再執(zhí)行job, 這就導(dǎo)致每次build job會耗時很久(要拉取毒瘤)。

#!/bin/bash

cd   packages/event-analysis
yarn config set registry http://registry.npm.xxoo.com &&  yarn --prefer-offline --frozen-lockfile
npm run build

以上是build任務(wù)的腳本frontend.sh，總耗時3m33s，其中yarn命令拉取npm_modules耗時172.52s

gitlab runner支持緩存
在.gitlab-ci.yaml 文件中定義cache指令:cache被用來在job之間緩存文件，更強(qiáng)大的是可以定義文件依賴緩存：

build:
  stage: build
  cache:
    key:
      files:
        - packages/event-analysis/package.json
    paths:
      - node_modules
  script:
    - ./frontend.sh
  tags:
    - my-tag

緩存key是yarn命令要用到的package.json，緩存內(nèi)容是npm_modules;
只要這個package.json文件未變更，后續(xù)任務(wù)就會使用緩存的npm_modules，而不用重建npm_modules依賴。

使用runner緩存優(yōu)化后build任務(wù)總耗時1m18s，其中yarn命令耗時22.83s, 相比之前耗時大大減少 ，妙哉。