[React] 리액트 실행시 FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory 에러 발생 / 힙메모리 부족

현상

로컬에서 만든 react 프론트 앤드를 라이트세일 서버에 올렸고 npm start 커멘드를 이용해 실행시켰는데 위처럼 나왔다.

• FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

내용을 보면 힙메모리가 부족해서 OOM 이 발생했다는 뜻이다.

해결 방법

현재 Heap 사이즈 확인

node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'

현재 약 512 메가가 힙사이즈로 할당되어있다.

 

Heap 사이즈 변경

$ export NODE_OPTIONS=--max_old_space_size=8192

다른 가이드를 보면 터미널에서 위 명령어를 수행해 node 런타임의 힙메모리를 늘려주면 된다고 나와있는데.. 저 방법으로 작동하지 않더라. 해당 터미널에서의 환경변수를 설정한 것일까? react 를 run 하는 터미널에선 여전히 512 메가로 힙이 할당되어있더라... 같은 터미널에서 위 명령어 입력하고 바로 리액트 앱을 run 해도 선언한 힙메모리로 앱이 구동되지 않고 계속 512메가로 구동되었다. 따라서 아예 리액트 앱이 구동되는 시점에 노드 환경변수를 주입할 수 있도록 소스코드를 수정했다. 아래 방법으로 할 경우 앱을 구동시킬때마다 위 명령어를 이용해 환경변수를 주지 않아도되는 장점이 있다.

NODE_OPTIONS=--max-old-space-size=8192 #node heap 메모리 설정

React 프로젝트의 package.json 파일을 열어 start 쪽 커맨드에 위 명령어를 추가해주자. 앱이 구동될때 node 환경변수로 최대 힙사이즈를 8192를 사용하겠다라는 의미다. 아마 내 라이트 세일 서버가 RAM 1기가인데 OS 에서 기본적으로 사용하는 메모리를 제외하고 남는 공간이 자동으로 node 런타임의 힙사이즈로 들어가는것 같다. 지금은 Swap 메모리를 이용해서 메모리를 확보해 놓았기 때문에 잘 될 것이다. 위 처럼 수정후 git/svn에 커밋해주고 서버의 저장소도 최신화해주자.

리액트 앱 실행

다시 react 앱을 구동시켜주면 NODE_OPTIONS에 환경변수가 들어가는 것을 볼 수 있다.

조금 기다려보면 위 화면이 뜨고 더이상 힙메모리 오류가 나타나지 않는 것을 볼 수 있다.

테스트

curl localhost:3000

이제 프론트앤드서버가 구동되었으니 위 명령어를 이용해서 정상적으로 서버 응답을 받을 수 있는지 확인해보자.

정상적으로 초기 페이지를 호출하는 것을 볼 수 있다.