생짜로 프로젝트를 만들고 디자인을 입혀가며 기능을 만들기에는 시간이 많이 걸리기에 디자인 템플릿을 활용해보기로 합니다.
react dashboard 형태의 무료 템플릿도 많이 볼 수 있었으나 좀 더 다양한 기능을 제공해주는 유료 템플릿을 사용해보기로 합니다.
themeforest.net 사이트를 통해 velzon dashboard를 구매하게 됩니다.
잘 짜여진 디자인 템플릿이었지만 내부를 보니 복잡도가 상당합니다.
좀 더 간소화 시킨 라이트한 버전이 필요했지만 따로 제공되지는 않았습니다.
결국 소스를 분석하며 필요한 기능만 남기고 나머지는 쳐 내는 과정을 거쳐야 할수 밖에 없습니다.
일단 내려받은 소스를 yarn install & build & yarn start 를 통해 로컬에서 정상적으로 도는 것을 확인한 뒤 github 에 리포지토리를 하나 만들어서 소스를 커밋합니다.
putty 터미널을 열어 Lightsail 서버에 접속해 front 서버로 사용될 폴더를 생성한 뒤 git clone 작업을 해줍니다.
Lightsail 서버 상에서 yarn install 작업을 진행해줍니다.
여기서 Error: write EPIPE 오류를 만나게 됩니다.
Error: write EPIPE
at WriteWrap.onWriteComplete [as oncomplete] (node:internal/stream_base_commons:94:16)
at handleWriteReq (node:internal/stream_base_commons:58:21)
at writeGeneric (node:internal/stream_base_commons:149:15)
at Socket._writeGeneric (node:net:930:11)
at Socket._write (node:net:942:8)
at doWrite (node:internal/streams/writable:411:12)
at clearBuffer (node:internal/streams/writable:572:7)
at Writable.uncork (node:internal/streams/writable:351:7)
at ClientRequest._flushOutput (node:_http_outgoing:1140:10)
at ClientRequest._flush (node:_http_outgoing:1109:22)
구글링을 통해 메모리 부족으로 인해 나타나는 현상인 것을 알게 되었습니다. 월 5달러 인스턴스이기에 메모리는 1기가 뿐이 제공이 안됩니다.
그래서 하드디스크 공간을 이용하는 스왑메모리 작업을 진행하게 됩니다. RAM 보다는 성능이 현저히 떨어지겠지만 진행조차 안되는걸 막아주기에는 이만한게 없습니다.
스왑 메모리는 2기가로 만들어서 진행했습니다.
2기가 스왑 메모리 설정 과정
// 2기가 스왑 메모리 파일 생성
sudo fallocate -l 2G /mnt/swapfile2g
// 권한 설정
sudo chmod 600 /mnt/swapfile2g
// 스왑 공간 설정
sudo mkswap /mnt/swapfile2g
// 활성화
sudo swapon /mnt/swapfile2g
// 스왑 파일 상태 확인
sudo swapon --show
스왑 메모리 설정한 이후 yarn install을 재진행합니다.
메모리 점유 되는 부분을 확인하면서 천천히 모니터링 해봅니다.
오류 없이 정상적으로 모든게 설치되었습니다.
다음으로 yarn build 작업을 진행하는데 다음과 같은 오류를 만나게 됩니다.
2개의 에러인데 각각 다른 상황에서 만나게 되었습니다.
FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
구글링을 통해 nodejs에 할당된 메모리를 넘어서는 현상이 발생해 뻗어 버린 것으로 판단하게 됩니다.
nodejs 에 할당되는 메모리를 늘려주는 방식으로 문제를 해결합니다.
// 현재 할당된 메모리 확인
node -e 'console.log(v8.getHeapStatistics().heap_size_limit/(1024*1024))'
$ 487.5
// 용량 늘리는 방법
export NODE_OPTIONS=--max_old_space_size=1200
이제 yarn build 시 오류없이 모든 과정이 진행되어가는듯 했으나 빌드타임이 5분을 넘어서면서 이상하다고 판단해 빌드를 그만두게 됩니다. Lightsail 서버에서 빌드하기엔 서버가 너무 저사양인걸로 판단하게 되었고 build 는 github 로 그 역할을 넘겨주기로 합니다. Github Actions 을 통해 빌드 된 데이터를 ssh 연결을 통해 서버에 업로드 해주는 방식으로 완전 변경하게 됩니다.