Next.js のビルドが OOM で落ちるのを解決した

本業のプロダクトのフロントエンドを Next.js で開発し Vercel にデプロイしている。

• Next.js v14
• monorepo 構成
• pnpm v8
• GitHub に push したら Vercel CI によってビルド・デプロイ

2024年の6月頃から Vercel 上のビルド・デプロイに10分以上かかるようになり、半分くらいが OOM で落ちるようになってきた。
さすがに生産性が落ちていたので調査・対応した。

まずは公式のドキュメントを読んだ
https://vercel.com/guides/troubleshooting-sigkill-out-of-memory-errors

もともとローカルでのビルドもできない状態になっていたので、まずはノードのメモリ割り当てを増やした。

NODE_OPTIONS=--max-old-space-size=6144 next build

これによりローカルでビルドは成功するようになったが、Vercel 上では改善がみられなかった。
また、Vercel プロプランはメモリの割当が最大で 8GB らしいので、これ以上メモリ割り当てを上げても無駄だった。

次に、バンドルサイズを削るために Dynamic Import を試してみた。
プロダクト内で有料のUIライブラリを使用しており、それが異常に重たかった。
なので、このライブラリを使用している箇所を中心に対応を行った。
結果としてはこちらもあまり効果がみられなかった。

次に、 Vercel の環境変数で、VERCEL_BUILD_SYSTEM_REPORT=1 を設定し、ビルドレポートを出すように設定した。
確認したところ、webpackのキャッシュで約4GB 食っていることが判明したので、これを対応することにした。

最終的に効果があったのが、下記２つ。

• webpack のキャッシュを無効にする
• type check (tsc --noEmit) をVercel のビルド時に行わないようにする

next.config.js に下記を追記した。

const nextConfig = {

    /* config options */

    typescript: {
      ignoreBuildErrors: true,
    },
    webpack(config, {dev}) {
      if (!dev) {
        config.cache = false;
      }

     /* other settings */
      
    },
}

プロダクションビルド時に webpack のキャッシュを無効にしたのと type check を実施しないようにした。type check については、別途 GitHub Actions で実施していたので Vercel 上では不要と判断した。

これにより Vercel でのビルド時間が 7分前後まで縮まった。
また OOM も発生しなくなった。

めでたしめでたし。