AzureDevOpsのパイプラインにおいて、npmキャッシュをパイプラインVM上に保管し、パイプライン実行時間を短縮する

背景

保護ブランチにマージ時にパイプラインを実行しているが、実行時間が長すぎてデプロイしたいときにかなりの待ち時間(最大40分とか)が発生していた。

⇒

保護ブランチにマージ時のチェックは必要最低限にする対応をしたものの、まだ10分とかかかってしまう。

(build,testだけしてArtifactとかも省略)

⇒

時間のかかっていたnpm i の実行時間を短縮するために、キャッシュを使えないか検討した。

サマリ

実行時間を、平均15分から平均7分程度に削減できた。

対応内容

npmキャッシュをパイプラインに保管する

下記タスクを使用すると、Azureのパイプライン上でキャッシュを保管できる。

variables:
  npm_config_cache: $(Pipeline.Workspace)/.npm

- task: Cache@2
  inputs:
    key: $(System.DefaultWorkingDirectory)/package-lock.json
    path: $(npm_config_cache)
  displayName: 'npmライブラリのキャッシュ利用'

key：キャッシュのキー。ここで指定した物が変わるとキャッシュを取り直す。

path：キャッシュとして保管する対象。今回の場合は.npmを指定※

※npmは.npmフォルダに以前インストールしたパッケージのバージョンとかを残しているらしい。

※.npmフォルダはプロジェクトフォルダ配下にできるわけじゃなく、マシンのhome配下とかにできるため、$(Pipeline.Workspace)から参照してる。

以下パイプライン全体

variables:
  npm_config_cache: $(Pipeline.Workspace)/.npm

pool:
  vmImage: 'windows-latest'

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.16.0'
  displayName: 'Install Node.js'

- task: CmdLine@2
  displayName: Set Pipeline Timezone
  inputs:
    script: tzutil /s "Tokyo Standard Time"

### npmライブラリのキャッシュ利用
- task: Cache@2
  inputs:
    key: $(System.DefaultWorkingDirectory)/package-lock.json
    path: $(npm_config_cache)
  displayName: 'npmライブラリのキャッシュ利用'

### npmライブラリのインストール
- script: |
    npm i
  displayName: 'npmライブラリのインストール'
  workingDirectory:  '$(System.DefaultWorkingDirectory)'

### ユニットテスト
- script: |
    npm run test
  displayName: 'ユニットテスト'
  workingDirectory:  '$(System.DefaultWorkingDirectory)'


### ビルド
- script: |
    npm run build-dev
  displayName: 'ビルド'
  workingDirectory:  '$(System.DefaultWorkingDirectory)'

実施結果

Before：実行時間平均15分くらい
↓
After：実行時間平均7分くらい

参考