[Server] EC2/Linux + React 배포시 문제 해결 과정

AWS EC2/Linux 를 이용하여 프로젝트를 배포하는 과정에서 발생한 문제들과
그 문제들을 해결하는 과정들을 정리해보았습니다.

 

개요

AWS EC2를 프리티어로 이용할 경우 몇가지 큰 장벽이 있습니다. 
이 글에서 중점적으로 다룰 내용 메모리 문제와 관련된 내용입니다.
디테일한 배포 절차에 대해 제가 참고한 글들은 제일 하단 '참고자료'에 링크로 첨부해두겠습니다.

 

 

기본 사항

프로젝트의 fron-end에 사용된 대표적인 기술은 React와 Nginx이며, 배포할 프로젝트는 비즈니스가 아닌 학습용으로 EC2 프리티어를 사용했습니다.

 

 

문제 발생

1. EC2/Linux 터미널을 통해 git clone 하여 프로젝트를 저장했습니다.

2. 웹 서버를 Nginx로 사용하여 배포하기 위해 React app을 build 시켜야만 했습니다.

3. 사전 패키지를 설치하고 React app을 build하려 yarn build를 실행시켰습니다.

The build failed because the process exited too early.
This probably means the system ran out of memory or someone called
 `kill -9` on the process.

4. 하지만 위 내용과 같이 시스템 메모리가 부족하다는 내용의 에러가 발생했습니다.

저는 몰랐습니다. 이때부터 머나먼 걸을 갈 것이라는 걸요...
(이 글을 읽으시는 분들은 저와 같은 시행착오가 없으셨으면 합니다.)

 

 

문제 원인 

프리티어가 생성가능한 인스턴스 유형은 t2.micro 와 t3.micro 있으며, 해당 인스턴스 유형의 1GiB 메모리로 React app을 build 시키기 어려운 것이 원인이였습니다. 

 

 

문제 해결 과정

1. 메모리 스왑을 통해 메모리 부족현상을 해결

일단 메모리와 관련된 사항임으로 메모리를 다른 곳에서 땡겨(?)와서 사용할 수 있도록 해주는 기능이 있었습니다.
물론 이 방법은 만능이 아닙니다. 메모리에 비해 디스크 속도가 많이 느리기 때문에 스왑 사용시 전반적인 속도가 느려진다는 단점을 가지고 있습니다. 하지만 일단 해결하고 해제 할 수 있기에 시도해보았습니다.

 

sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048

sudo mkswap /mnt/swapfile

sudo swapon /mnt/swapfile

방법은 간단합니다. 터미널에서 위의 3가지 명령어를 입력하면 스왑 메모리를 생성됩니다.

 

스왑 메모리 생성 명령어 입력

스왑 메모리를 생성을 위한 3가지 명령어를 입력 후 정상적으로 실행된 상황입니다.

 

 

메모리 현황(Linux의 경우 free 명령어 입력)

실행전 메모리 현황은 위와 같습니다.

 

 

스왑 메모리 생성 후 메모리 현황

처음과 같이 메모리 현황을 확인시 Swap란에 메모리가 추가된 것이 확인됩니다.

 

스왑 메모리를 확보한 뒤 다시 React app을 build 시켜보았습니다.

 

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
(역시 한번에 끝나는 경우가 없습니다..)

이번에는 위와 같이 힙 메모리가 부족하다는 에러가 발생했습니다.

 

 

2. 빌드를 위한 메모리 최적화 및 힙 메모리 사이즈 제한 변경

결국 이 또한 메모리 문제입니다. 하지만 조금 다른 문제입니다.
Node.js의 기본 힙 메모리 사이즈가 512mb이며, 이 사이즈를 초과하면 위와 같은 에러가 발생합니다.

 

이러한 문제를 해결하기에 여러가지 설정 방법이 있으나 제게 유의미했던 방법은 아래와 같습니다.

 

1. package.json 내부의 build에 --max-old-space-size= '늘릴 값' 을 기재해 힙 메모리 제한을 풀어줍니다.
2. GENERATE_SOURCEMAP 옵션을 false로 설정하여 꺼줍니다.

 

--max-old-space-size= 의 늘릴 값은 12000까지 풀어 줄 수 있다고합니다만 저는 우선 8192md로 제한을 늘려 주었습니다.
그리고 GENERATE_SOURCEMAP 옵션이 true일 경우 버깅 정보가 포함되어 빌드되기 때문에 빌드의 용량이 커지게 됩니다.
이러한 부분 역시 빌드 메모리 최적화를 위해 꺼주었습니다. 

 

package.json

 

'제발 이번에는 되기를..' 기도하며 다시 한번 React app을 build 시켜보았습니다.

 

yarn build 명령 후 위와 같은 상태로 5시간을 기다려도 멈춰 있는 상태처럼 반응이 없었습니다.
말 그대로 무반응이였죠..

 

 

3. FTP 소프트웨어를 사용한 SFTP 접속 후 로컬에서 build 후 업로드

이 방법은 사실 최후의 보루였습니다. 개발자로써 뭔가 사파(?)스럽달까요 하.하. 하지만 이미 너무 많은 시간을 쏟아 부었기에 선량한 개발자 마음은 저어기 하늘 나라로 보내버리고 해결을 위해 마지막 방법을 시도했습니다.

제가 선택한 FTP 소프트웨어는 filezilla 입니다. filzilla는 SFTP라는 전송방식을 사용하고 있으며,
SFTP란 SSH File Transfer Protocol의 약자로 파일 전송 프로토콜에 암호화(SSH)를 더한 프로토콜입니다. 

https://filezilla-project.org/

위 링크를 통해 설치가 가능하며 설치 방법 및 build 파일 업로드 절차는 아래와 같습니다.

1. 클라이언트 파일을 다운로드 받습니다.

 

2. 다운로드 후 zip 파일을 풀어준 뒤 실행 프로그램을 실행시킵니다.
이 때 mac OS 를 사용할 경우 문제 있는 파일이라는 문구와 함께 실행시키지 못하는 경우도 있습니다.
그럴 경우 실행 프로그램과 zip 파일까지 삭제하고 다시 받아주시면됩니다.

 

 

3. 프로그램 실행 시 위와 같은 화면을 볼 수 있으며 상단 왼쪽 "사이트 관리자" 버튼을 눌러주세요.

 

 

4. "새 사이트" 버튼을 클릭하여 새 사이트를 생성한뒤 "호스트"란에는 EC2 인스턴스의 퍼블릭 IP를
그리고 "사용자"란 에는 EC2 인스턴스 내부 운영체제에서 사용하는 사용자 이름(defalt : ec2-user)을 입력해주시면 됩니다.
마지막으로 "키 파일"로 인스턴스 생성시 다운 받은 .pem 파일을 넣어주신 뒤 연결을 눌러주세요.

 

 

5. 정상적으로 연결이 이루어진다면 위와 같이 왼쪽은 로컬, 오른쪽은 ec2의 디렉터리를 확인하실 수 있습니다. 

 

 

6. 로컬(왼쪽)에서 build한 파일을 ec2의 프로젝트 내부(오른쪽)로 옮겨주시기만하면 모든 작업은 완료됩니다.
작업이 정상적으로 이루어 질 경우 상단 상태 창에 연결이 성공했다고 표시됩니다.
(저는 기존 해당 작업을 수행했기에 건너뛰기하니 상태가 위와 같습니다.)

 

 

위 절차로 build 파일을 저장 후 실행 시 React app build 없이도 정상적으로 배포 되었습니다.

 

 

 

그리고 yarn build 또한 빠르게 적용되었습니다...

 

 

자, 여기까지 EC2/Linux 에서 React build 시 발생하는 문제와 해결 과정에 대해 알아 보았습니다.
분명 부족한 부분이나 생략된 내용은 차고 넘칩니다. 그러한 부분은 아래 제가 참고한 링크를 봐주시거나 
댓글로 남겨주시면 최대한 빠르게 답변드릴 수 있도록하겠습니다.

 

참고 자료

EC2/Linux + React 배포 :  https://velog.io/@choi-ju12g/Photorage-3.-React-Spring-을-AWS-EC2-Nginx로-배포하기1

AWS EC2, RDS 프리티어 이용 주의사항 : https://velog.io/@yangsijun528/AWS-EC2와-RDS-진짜-Free-tier-사용하기

node.js 메모리 최적화 및 메모리 스왑방법
- https://progdev.tistory.com/26

- https://all-dev-kang.tistory.com/entry/리액트-JavaScript-heap-out-of-memory-스크립트로-해결하기