DockerでReact環境を構築した際に「FATAL ERROR: JavaScript heap out of memory」のエラーが出てしまう。

Question

ご覧いただきありがとうございます。

Dockerを使ってReactをゼロから学ぶべく、React環境の構築を始めたのですが、
ビルド後の create-react-app で、エラーが発生してDocker側での設定を
調べてもなかなか解決できないので質問させていただきます。

エラーとは
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
です。

実現したいこと

Docker(docker-compose)を用いて、Nodeコンテナを構築してHelloWorld程度の簡易な環境を
作るのが目的です。

###　前提
VirtualBox ：　メモリ：1.5GB、プロセッサ:2
OS : Ubuntu Server 20.04
Docker: 20.10.14
docker-compose: 2.4.1

発生している問題・エラーメッセージ

docker compose run --rm node sh -c "npm install -g create-react-app && create-react-app react-sample"

上記のコマンドでcreate-react-appを実行した結果、下記のエラーが発生しました。
メモリが足りないということは明らかですが、この対処法はDockerfileでメモリを拡張すれば
いいのか、Nodeに関するオプションで何かつけたほうがいいかなど見当がつかない状況です。

<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xb57b90 node::Abort() [npm install react react-dom react-scripts cra-template]
 2: 0xa701b3 node::FatalError(char const*, char const*) [npm install react react-dom react-scripts cra-template]
 3: 0xd43b9e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [npm install react react-dom react-scripts cra-template]
 4: 0xd43f17 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [npm install react react-dom react-scripts cra-template]
 5: 0xf22ff5  [npm install react react-dom react-scripts cra-template]
 6: 0xf23ae7  [npm install react react-dom react-scripts cra-template]
 7: 0xf33fa1  [npm install react react-dom react-scripts cra-template]
 8: 0xf34bbd v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [npm install react react-dom react-scripts cra-template]
 9: 0xf1004a v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [npm install react react-dom react-scripts cra-template]
10: 0xf111d7 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [npm install react react-dom react-scripts cra-template]
11: 0xef3353 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [npm install react react-dom react-scripts cra-template]
12: 0x12ac95f v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [npm install react react-dom react-scripts cra-template]
13: 0x16d8539  [npm install react react-dom react-scripts cra-template]

Aborting installation.
  npm install --no-audit --save --save-exact --loglevel error react react-dom react-scripts cra-template has failed.

Deleting generated file... node_modules
Deleting generated file... package.json
Deleting react-sample/ from /usr/src/app

該当のソースコード

下記「Dockerfile」「docker-compose.yml」は同じ回答に配置させています。

1: Dockerfile

FROM node:18.0.0
WORKDIR /usr/src/app

2: docker-compose.yml

version: '3'
services:
    node:
        build:
            context: .
            dockerfile: Dockerfile
        volumes:
            - ./:/usr/src/app
        command: sh -c "cd react-sample && yarn start"
        ports: 
              - "3000:3000"
        stdin_open: true

Comments

[hoshi-takanori]

その Ubuntu Server はどうやって動いてて、メモリはどのくらい割り当ててますか？

[milton_rb4life]

VirtualBox で　メモリ：1.5GB、プロセッサ:2に設定しました。

Answer 1

自己解決しました

ありがとうございました。

　
docker-compose.ymlに環境変数 NODE_OPTIONS=--max_old_space_size=8192 を追加したことで解決しました。

        environment:
            - NODE_OPTIONS=--max_old_space_size=8192

こちらのサイトで解決方法が書いておりました。
[Node.js]ビルド時にメモリ不足になる場合の対処法

How to fix "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory" error