VPS上でReactのビルド中にメモリ不足のエラーが発生しました。対処法のメモ記事です。
起こった問題
サーバー上で「Nginx + Reactプロジェクト」構成のDockerイメージをビルドしようとすると失敗。
Reactのyarn run buildのフェーズで以下のようなメモリ不足のエラーが出ました。
(react-scriptsのバージョンは"4.0.3")
<--- Last few GCs --->
[36:0x5f478e0] 44297 ms: Mark-sweep (reduce) 488.0 (492.9) -> 487.7 (494.1) MB, 777.3 / 0.0 ms (average mu = 0.084, current mu = 0.002) allocation failure GC in old space requested
[36:0x5f478e0] 45063 ms: Mark-sweep (reduce) 488.2 (493.1) -> 488.0 (494.4) MB, 765.1 / 0.0 ms (average mu = 0.044, current mu = 0.002) allocation failure GC in old space requested
<--- JS stacktrace --->
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
...
対処法
ソースマップを生成する過程でメモリ不足になることが原因のようです。そのためソースマップの生成自体をしないように変更します。
.env.productionに以下を記述します。
GENERATE_SOURCEMAP=false
.envファイルの優先度についてはこちらの記事から。
create-react-app環境での環境変数の扱い備忘録
create-react-app環境での環境変数の扱いを備忘録的にまとめます。大きく分けて「前提知識」「具体的な設定方法」に分かれています。 基本的な使い方や知識を知りたい方は「前提知識」を、設定方法 ...
続きを見る
これでエラーを回避できますが、あくまで対症療法ですのであしからず。
参考: