Github Actionsのキャッシュ機能を利用してNext.jsのデプロイを高速化

Github Next

Next.jsのアプリケーションのデプロイにGithub Actionsを利用していたところ以下のような警告が出ているのに気づきました。

warn - No build cache found. Please configure build caching for faster rebuilds. Read more: https://err.sh/next.js/no-cache

info - Creating an optimized production build...

Attention: Next.js now collects completely anonymous telemetry regarding usage.

This information is used to shape Next.js' roadmap and prioritize features.

You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:

https://nextjs.org/telemetry

これによると .next/cache ディレクトリをキャッシュしておくことによりbuildタスクの高速化が図れるようです。

例示されているGitHub Actionsのcacheコードをデプロイタスクに追加

jobs:
  build:
    runs-on: ubuntu-latest
  
    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 14.15.4
        uses: actions/setup-node@v1
        with:
          node-version: '14.15.4'
      - name: Use Github Action cache
        uses: actions/cache@v2
        with:
          path: ${{ github.workspace }}/.next/cache
          # Generate a new cache whenever packages or source files change.
          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
          # If source files changed but packages didn't, rebuild from a prior cache.
          restore-keys: |
            ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json') }}-
      - name: npm install
        run: npm ci
      - name: npm build
        run: npm run build --if-present
        env:
          CI: true

こうすることでbuildタスクの所要時間が30秒ちょっとから20秒ちょっとに短縮されました。キャッシュの取得と保存に3秒づつ追加されましたので実感はありませんがビルドするページの総量が増えてきた場合に威力を発揮しそうです。

これまで雰囲気でGithub Actionsを使っていましたがまだ知らない便利機能がありそうなので改めて確認したいと思いました。

関連エントリー

Nuxt.js / Next.jsで作成したサイトをGitHub ActionsでAWS S3にデプロイする

スポンサードリンク

«Next.js のStorybookでSassを利用する(webpack5対応) | メイン | next/routerを利用しているコンポーネントのテストを行う»