Github Actionsのキャッシュ機能を利用してNext.jsのデプロイを高速化
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:
これによると .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を利用しているコンポーネントのテストを行う»