GitHub Actions利用時のnpm ciの時間を短縮する

はじめに

以前 「Azure Pipelines利用時のnpm ciの時間を短縮する」という投稿で、Azure Pipelinesでのビルド成果物のキャッシュをご紹介しました。

今回は同様のことをGitHub Actionsで行ってみたいと思います。

キャッシュを活用する

npmのキャッシュ

早速指定をしてみたいと思います。 今回利用するのはAngularプロジェクト。

もともとの GitHub Actionsの指定は次のようなものです。

jobs:
  build:
    name: build angular
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repo
      uses: actions/checkout@v3
      with:
        fetch-depth: 0
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 16
    - run: npm ci 
    - run: npm run lint
    - run: npm run build

これに npm用のキャッシュを追加するわけですが、実はとても、非常に、簡単です。 なぜならば、すでにそのような仕組みが actions/setup-node に用意されているから！！ ( Node.jsのビルドとテスト#依存関係のキャッシングの例 ) やるべきことは cache: 'npm' という指定を追加するだけ（npmを利用している前提です）

jobs:
  build:
    name: build angular
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repo
      uses: actions/checkout@v3
      with:
        fetch-depth: 0
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 16
        cache: npm                   # <------------ この行を追加
    - run: npm ci 
    - run: npm run lint
    - run: npm run build

これだけでキャッシュが有効になり、導入前は 35秒前後かかっていた npm ciの部分がキャッシュが有効になる場合は 15秒前後に短縮されます。

Angularのキャッシュを有効にする

これだけでは終わりません。実はもう１つキャッシュを有効にできる部分があります。それはAngularのビルド実行時のキャッシュです。（今回ご紹介するやり方はAngular v14が対象です。）

Angularのビルドですが、これがわりと時間のかかる処理となっています。そうした時間のかかる部分を改善するためにAngularではビルド時のキャッシュ機能を提供しています。v14ではng cache で紹介されている通りの内容です。

今回はこれを有効にします。github actionsで特定のフォルダをキャッシュするには actions/cache を利用します。

jobs:
  build:
    name: build angular
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repo
      uses: actions/checkout@v3
      with:
        fetch-depth: 0
    - name: Use Node.js
      uses: actions/setup-node@v3
      with:
        node-version: 16
        cache: npm
    # Angular 用のキャッシュ指定ここから
    - name: Cache angular build
      uses: actions/cache@v3
      with:
        path: .angular/cache
        key: angular-${{ runner.os }}-${{ hashFiles('package-lock.json') }}
    # Angular 用のキャッシュ指定ここまで
    - run: npm ci 
    - run: npm run lint
    - run: npm run build

指定する内容はAzure Pipelinesのときと似た内容になります。

結果

２つのキャッシュを設定した場合の結果は以下のとおりです

対象	キャッシュ無効	キャッシュヒット
npm i	35秒前後	15秒前後
Angular ビルド	45秒前後	15 秒前後

今回対象となったAngularプロジェクトはまだ新規作成して間がなく、機能もそれほど組み込まれていません。 それでも合計すると30秒程度短縮可能です。機能が増えていくとAngularビルドがキャッシュがない場合には数分かかるようになります。 そうなってくるとキャッシュの効果も大きくなります。

こうした簡単で小さなことでも積み重ねると大きな差となります。ビルドのように繰り返し何度も実行されるものであればなおさらです。 せっかく用意されている機能ですから徹底的に活用していきましょう。