npm ciと.npmを使ってGitHub Actionsを高速化する

概要

• Node.jsを使用しているCI/CD環境(今回はGitHub Actions)を高速化させたい
• 高速化のために npm ci と .npm をCIでキャッシュする手法を用いる

npm ci とは

• npm ci は package-lock.json を参照して依存関係をインストールするコマンド
• 既に node_modules が存在する場合は一旦削除してからインストールが走る
• とはいえ package.json と package-lock.json のバージョン指定が食い違っている場合にはエラーを出してくれる
  • e.g. あるパッケージをバージョン 0.9.9 でインストール後に package.json のバージョンだけ 1.0.0 に書き換えた場合等
• 通常の npm install の場合、 package.json と package-lock.json の両方を見て、依存関係の解決と node_modules へのインストールと、場合によっては package-lock.json の更新も行われる
• npm ci を使うことで、開発時と運用時のパッケージのバージョンの差異を無くすことができる他、インストールにかかる時間もある程度短縮できる
• npmではなくYarnを利用する場合は yarn install --immutable --immutable-cache --check-cache で近い挙動が実現できる

.npm とは

• .npm はnpmのパッケージのキャッシュ
• 通常はホームディレクトリ配下に設置されている
• インストール時に目当てのパッケージのキャッシュが .npm 配下に残っていると、ネットワークへのアクセス無しにインストールすることが可能となり、結果としてネットワークレイテンシが削減できる
• このキャッシュをCIのキャッシュに含んでやることでさらなる速度向上が期待できる
• ちなみに node_modules 自体をキャッシュしていても、 npm ci を使うと毎回削除されてしまうので意味がない
• npmではなくYarnを利用している場合は、 ~/.yarn-cache にキャッシュが保存される

GitHub Actionsにおける設定

• 実際には以下のような設定をしてやると良い

.github/workflows/main.yml(抜粋)

...

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout master branch
        uses: actions/checkout@v3

      - name: Use Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18.13.0

+      - name: Cache npm directory
+        uses: actions/cache@v3
+        with:
+          # CIでキャッシュするディレクトリやファイルのパス
+          path: ~/.npm
+          # キャッシュを保存・復元する際のキー
+          key: ${{ runner.os }}-npm-${{ hashFiles('**/package-lock.json') }}
+          # キーで指定したキャッシュがヒットしなかった際に代理として使用されるキー
+          restore-keys: ${{ runner.os }}-npm-

+      - name: Install node modules
+        run: npm ci

      - name: Build app
        run: npm run build

...