Azure Pipeline利用時のnpm ciの時間を短縮する

はじめに

梅雨のシーズン、皆様いかがお過ごしでしょうか。

私は先日、あじさいを観に八景島に行ってまいりました。八景島にはここでしか見られない「八景ブルー」というあじさいがあり、ちょうど見頃を迎えつつあった頃でした。スマートフォンで撮影した写真ですが、ご紹介します。

こんな写真がいっときの清涼となれば幸いです。

さて、ここからが本題です。

npm ciの時間を短縮する

今回はAzure Pipelineを使ったアプリケーションのビルドのお話です。アプリケーションのビルド、特にPull Req時などのビルドはできる限り短時間で完了してほしいものです。ちょっと古い言葉ですが「1秒を削り出せ」、まさにそういった気持ちになります。そうしたときにどうするか。

今回はいきなり回答です。少しでも時間を短縮する方法、それは「Azure Pipeline Cache」の活用です。

設定方法は上記のDocumentに記載しててあるとおりですが、せっかくなので設定例をご紹介します。今回、Typescriptで実装した2つのアプリケーション（Angularを利用したSPA、NestJSを利用したAPI Server）でその効果を確認しました。 Pipeline設定は以下のようになります。

〜〜前略〜〜

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

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

- task: Cache@2
  inputs:
    key: 'npm | "$(Agent.OS)" | package-lock.json'
    restoreKeys: |
       npm | "$(Agent.OS)"
    path: $(npm_config_cache)
  displayName: Cache npm
- script: npm ci
  displayName: 'Install packages'

〜〜後略〜〜

Cache@2 のタスクが中間生成物のキャッシュを指定するタスクです。
キャッシュ対象のフォルダは variables.npm_config_cache で指定している .npm フォルダ です。通常のPipeline taskにこれだけ追加すればOK。

キャッシュ効果が現れる npm ci部分の時間は導入前後で以下のようになりました。

種別	導入前（未キャッシュ時）	導入後(キャッシュヒット時)
Angular App npm ci	40秒前後	20秒前後
NestJS App npm ci	30秒前後	10秒前後

効果といっても数十秒のレベルかもしれません。しかし、こうした時間が何度も積み上がっていくと、数分〜10分待たなければならないといったことも起きてくるものです。たかが10秒、されど10秒。

今回はNodeJSでの例をご紹介しましたが、Microsoft Docsではその他に

Cache(C/C++)
Docker image
Golang
Gradle
Maven
.NET Nuget
Python/Anaconda
PHP/Composer

といったものの設定例が紹介されています。また、言語依存するものではないので、キャッシュ対象フォルダや条件が特定できるならばその他の場合でも活用できます。

せっか用意されているものですから、有効に活用していきましょう。

最後に

最後に宣伝。弊社エンジニアが協力した、「AKSのセキュリティ対策に関するホワイトペーパー」の３，４章がMicrosoftから公開されました。

ぜひこちらもご覧ください。

また、私たちは、Azure・AKSを活用したシステムのSIや内製化のお手伝いをさせていただいております。 Azureやコンテナ技術の知見を持つエンジニアが対応いたします。ご相談等ありましたらぜひご連絡ください。

APC 技術ブログ

株式会社エーピーコミュニケーションズの技術ブログです。

Azure Pipeline利用時のnpm ciの時間を短縮する

はじめに

npm ciの時間を短縮する

最後に