[Frontend] nginx를 사용해서 VM에서 배포하기 (+ CodeSpliting)

 

 

1차 프로젝트에서 직접 VM 배포에 관여하지는 않았지만, 각 팀에서 배포 과정에 많은 어려움들을 겪었었다.

우리 팀은 발표 전날에 VM 서버가 문제가 생겨서 늦은 밤까지도 코치님들이 총 출동해서 해결해주셨다.

 

2차 프로젝트 때는 우선 프론트만 초기 틀 잡고는 바로 배포를 진행해보았다.

 

로컬에서 build 파일을 생성한 후에 VM 서버로 보내서 배포를 하려고 했으나,

로컬에서 생성한 build 파일을 VM 서버로 보내는 방식에서 막혀서 한참을 헤멨다.

 

그렇게해서 찾은 방식은 VM 서버에서 git clone으로 파일들을 가져오고

VM서버에서 build 파일을 생성을 하고 nginx로 배포를 진행했다.

 

---

 

VM 이란?

Virtual Machine의 약자로 가상 머신

OS로 리눅스가 있어서 유닉스 커맨드로 작업을 하게 된다.

 

 

1. VM 서버 접속

터미널에서 VM을 접속한다.

ssh <아이디>@<배포용 VM IP>

 

이후 비밀번호를 입력하면 VM 접속이 완료된다.

 

2. 기본 세팅

1) 리눅스 세팅

• 리눅스 내의 패키지 설치 및 관리를 위해 사용하는 apt 명령어로 패키지들을 최신화하고 업그레이드를 한다.
• update를 먼저 진행해서 패키지 리스트들을 최신화하고, upgrade 커맨드로 최신 버전으로 업그레이드를 한다.

sudo apt update -y && sudo apt upgrade -y

 

 

 

2) node 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash source ~/.bashrc
nvm install 16.14.0
nvm use 16.14.0

 

 

3) node 설치 확인 및 npm 설치 확인

# node 설치 확인
node

# node 나가기
컨트롤 + c (2번 연속)

# npm 설치 확인
npm

 

 

3. Git에서 clone하기

git clone -b 브랜치명 url

 

• master 브랜치에서 clone하는 것이라면 "-b 브랜치명"은 제외하고 작성하면 된다.

 

 

4. build 파일 생성

npm run build

• build 파일을 생성하면 bundle.js 파일과 각종 chunk 파일들이 생성된다

 

• cd 명령어로 build 파일 까지 들어간다
• pwd 명령어를 입력해서 현 위치의 경로를 얻고 복사해둔다 (뒤에서 사용해야함)

 

 

---

 

※ Code Spliting

• 최적화를 위해서 중요한 개념으로, 빌드할 때 파일을 쪼개는 방식
• 앱 자체의 사이즈가 줄어드는 것은 아니며 쪼개는 것
• 개발에서 최적화가 중요한데, 많은 코드작업 없이 큰 효과를 얻을 수 있어서 가성비가 좋은 방법에 속함
• 리액트 라우터 돔에 eliment로 할당되는 것들을 기준으로 spliting이 됨

< Spliting 전 >

• bundle.js 파일 안에 모든 코드들이 다 들어감
• bundle.js 파일의 사이즈 커짐
• 다운로드 받는 시간 길어짐 -> 유저 대기 시간 증가

< Spliting 후 >

• 페이지 수만큼 chunk 파일과 bundle.js 파일이 생성됨
• bundle.js 파일은 코어의 모든 로직이 다 있어서 항상 필요
• if 브라우저에서 page1에 접속을 한다면, bundle.js와 page1에 해당하는 chunk 파일만 불러옴
• 브라우저에서 불러오는 파일의 크기가 급격히 작아져서 속도가 빨라짐

 

---

 

5. nginx 설치 및 세팅

• 배포를 위해 nginx를 설치한다.

sudo apt install nginx

 

• build 경로를 지정하기 위해 설정 파일을 수정한다.

sudo nano /etc/nginx/sites-available/default

• 해당 파일 내의 root 부분에 pwd로 복사한 경로를 넣는다.
• 마지막에는 ;까지 꼭 입력해야한다.
• ctrl + x -> ctrl + y -> enter로 저장하고 파일을 나온다.

 

6. 배포

nginx를 재로드하면 배포가 완료된다.

sudo systemctl reload nginx

 

배포 끄읕 ~~~😊