React serve 명령어로 배포하기 (+포트변경)

VM 을 이용해서 배포를 해야할 일이 생겨서 공부해봤다.
전에 프로젝트를 배포할 때 사용했던 AWS EC2에 접속 후 했던 과정과 비슷했다.

배포과정

1. VM 접속, node.js 설치
2. git 레포 clone
3. 리액트 프로젝트 빌드
4. 빌드된 파일을 serve 이용해서 배포

1. VM 접속, node.js 설치

접속은 리눅스에서 ssh 명령어를 이용해서 한다.

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

node.js 를 설치하기 전에 nvm을 설치하기 위해 위 명령어를 실행한다.
설치가 끝나면 잘 설치되었는지 확인하기 위해

nvm --version

위 명령어를 실행한다. nvm의 설치버전이 출력된다면 잘 설치된 것이다.

nvm ls-remote --lts

설치할 node.js의 버전을 찾기위해 위 명령어로 리스트를 띄운다.
lts 는 long term support 의 약자. 장기간 지원되는 패키지라는 뜻

nvm install 12.16.1

12.16.1버전을 설치하고 싶다면 위처럼 입력한다.

node --version

설치가 끝나면 잘 설치되었는지 확인한다.

2. git 레포 clone

git init
git clone 레포주소

현재 경로에 레포를 클론한다.

3. 리액트 프로젝트 빌드

npm install 
npm run build

클론한 프로젝트에 필요한 모듈을 설치하고, 빌드한다.
빌드가 끝나면 프로젝트 폴더의 최상위 위치에 build 폴더가 생성된다.

4. 빌드된 파일을 serve 이용해서 배포

serve 패키지를 이용해서 build 폴더 내 파일들을 배포할건데
설치가 되어있지 않다면 설치하고 실행하는 명령어를 사용한다.

npx serve -s build

-s 옵션은 build 디렉터리를 다큐먼트 루트로 하는 옵션이다.
배포 포트의 기본값은 5000이다.

npx serve -l 8000 -s build

포트를 8000으로 변경하고 싶다면 위 -l 옵션을 사용하면 된다.

 

참고 : 생활코딩 www.youtube.com/watch?v=E_-ua6uCQOU