ec2 환경에서 리액트 프로젝트 빌드시 시간이 오래 걸리는 이슈(Feat. ec2 프리티어)

김철준·2023년 2월 17일
3

Devops

목록 보기
2/6

ec2 환경에서 리액트 프로젝트 빌드시 시간이 오래 걸리는 이슈가 발생하여 이를 해결하고 이슈 상황과 해결 방법을 로깅해보려한다.

ec2 프리티어 t2.micro를 사용할 경우

간단한 프로젝트가 아닌 조금이라도 규모가 있는 프로젝트라면 ec2 인스턴스 환경에서 빌드시 오랜 시간이 걸릴 수도 있다.

나의 경우 프로젝트를 ec2 프리티어 유형(t2.micro 인스턴스 서버에 배포를 했다.

그런데 프론트단쪽의 html 파일을 빌드하기 위해 npm run build를 실행하였는데 아래와 같은 상태로 오랜 시간동안(한 15분정도) 지속되었다.

아무래도 프리티어 인스턴스이기도 하니 느리겠거니 인내심을 가지고 기다렸지만 너무 오래되지않아 중단하고 해당 이슈를 찾아봤다.

찾아보니 ec2 프리티어 유형 인스턴스는 나와 같은 이슈가 발생할 수 있다고 한다.

프리티어 유형은 램이 1기가여서 조금만 프로젝트 규모가 있다면 빌드가 중단되버리거나 오랜 시간이 걸린다고 한다.

RAM과 프로그램 실행의 관계
RAM은 실행중인 프로그램의 속도와 실행과 관련이 있다.
그래서 만약 프로그램이 잡아먹는 RAM이 컴퓨터의 RAM의 크기를 초과한다면 해당 프로그램이 더디게 실행되거나 실행이 안될 수도 있는 것이다.

따라서 2가지 해결방안을 찾아보았고 2가지를 시도해본 결과 (로컬 컴퓨터만큼은 아니지만) 전보다 나름 빠르게 빌드되었다.

내가 찾아본 해결방안은 다음과 같았다.

1. 스왑 파일을 사용하여 Amazon EC2 인스턴스에서 스왑 공간으로 사용할 메모리를 할당하는 방법

2. package.json에서 빌드 명령어 변경

1. 스왑 파일을 사용하여 Amazon EC2 인스턴스에서 스왑 공간으로 사용할 메모리를 할당하는 방법

말이 어려운데 간단히 설명하자면 위와 같이 메모리가 부족한 현상이 있을 때 디스크의 램을 끌어와 사용하는 방법이다.

방법은 다음과 같이 명령어를 입력해주면 된다.
1. sudo dd if=/dev/zero of=/mnt/swapfile bs=1M count=2048
할당하고하는 램의 크기는 bs곱하기count이다.
위의 예제의 경우 1 곱하기 2048이므로 2기가의 램을 할당한다.
각자의 로컬 컴퓨터의 램 사용량이 다르므로 상황에 맞춰 유동적으로 사용하면 된다.
2. sudo mkswap /mnt/swapfile
3. sudo swapon /mnt/swapfile

자세한 방법은 다음과 같이 aws 공식 홈페이지를 따라가기만 하면 된다.

2. package.json에서 빌드 명령어 변경

두번째 방법은 리액트 프로젝트에서 빌드 명령어를 변경해주는 것이다.

나의 경우 기존에는 다음과 같이 작성했었다.

이전 package.json

{...
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...
}

그리고 build 명령어를 다음과 같이 변경해줬다.

이후 package.json

{...
  "scripts": {
    "start": "react-scripts start",
    //"build": "set \"GENERATE_SOURCEMAP=false\" && react-scripts build",// 윈도우
      "build" : "GENERATE_SOURCEMAP=false react-scripts build",// 리눅스
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
...
}

위에 GENERATE_SOURCEMAP=false라는 코드가 추가되었다.
이는 빌드 후에 빌드 파일에 대한 소스 코드를 확인할 수 있도록 해주는 것이다.

default는 값이 true로 되어있다.
true이면 버그가 발생했을 때 빌드파일을 통해 소스 코드를 확인할 수 있기 때문에 무엇이 잘못되었는지 확인할 수 있다.

하지만 이는 해당 속성이 켜져있을 경우 디버깅 정보가 포함되어 빌드되기 때문에 빌드 용량이 커지게 되며,
이는 곧 메모리 부족으로 이어지게 된다.

즉, 이를 false로 변경해주면 빌드 용량이 작아지고 메모리도 덜 잡아먹게 된다.

나는 ec2 인스턴스 운영체제가 우분투(리눅스)였기 때문에 위 명령어로 했지만 운영체제가 윈도우인 경우는 주석을 해놓은 코드를 사용하면 된다.

위와 같은 방법들을 시도했을 때, 인스턴스에서 리액트 프로젝트를 빌드했을 때 오랜 시간이 걸리지않고 성공적으로 빌드를 하였다.

profile
FE DEVELOPER

0개의 댓글