vite-plugin-vitest-cache (vCache) 導入後 CI/CD 上 (GitHub Actions) で cache を利用できるよう定義する

はじめに

前回の記事で vite-plugin-vitest-cache (vCache) を導入し実際にテストの高速化を行いました。 手元の環境ではすぐ効果が出ましたが、vite-plugin-vitest-cache (vCache) を導入しただけでは C /CD (GitHub Actions) 上で cache させるにはもう1段階設定が必要です。

:::note warn vite-plugin-vitest-cache (vCache) 及び GitHub Actions の workflow 設定等は終わっている前提で記載します。 :::

GitHub Actions workflow の編集

actions/cache@v4 について

https://qiita.com/mziyut/private/cf69b9c715cd84bdf605 で vite-plugin-vitest-cache (vCache) の設定は完了しているので、 CI/CD 上で cache 処理が動くように設定します。

.tests 以下を cache として保存するように actions/cache@v4 を利用します。

actions/cache@v4 の詳しい設定は README を参照してください。

GitHub Actions workflow に処理を追加する

この設定例は、 npm run test でテストを実行するため、 npm run test の実行前に actions/cache@v4 を利用して cache の取得を試みます。

actions/cache@v4 に定義する key の値は Project の状態にも左右されるため、適切な条件をしていしてください。

name: Test

on:
  push:

jobs:
  vitest:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version-file: "package.json"
          cache: "npm"
      - run: npm ci
      - uses: actions/cache@v4
        with:
          path: .tests
          key: vitest-cache-${{ github.ref }}-${{ hashFiles('./.tests/**/*') }}
          restore-keys: |
            vitest-cache-${{ github.ref }}-
            vitest-cache-
      - run: npm run test

また、 前回の記事で process.env.CI を読み込むように設定しましたが、 GitHub Actions は実行時に CI 等特定の環境変数が定義されるため uses 句に環境設定は不要です。

Ref