[React] React App을 Nginx에 배포하기(EC2 Amazon Linux2 환경)

React App Build

1. 개발 PC에서 Build

1.1. React App Build

create-react-app으로 생성한 React 프로젝트는 webpack 번들러로 빌드 결과물을 생성한다.

터미널에서 React 프로젝트 디렉토리로 이동 후 아래 명령어를 입력한다

npm run build

 

1.2. Build 확인

build가 완료되면 프로젝트 디렉토리에 build가 추가된다. index.html을 보면 들여쓰기와 띄어쓰기가 전혀 되어 있지 않은데, 웹 브라우저는 들여쓰기와 띄어쓰기가 없어도 구분할 수 있기 때문에 용량 최소화를 위해 전부 제거된 상태인 것이다.

 

1.3. Git Push

React App을 Build하는 곳을 Server PC에서 할 수 있다. 그렇게 하려면 npm을 설치해줘야 하기 때문에 여기서는 개발 PC에서 Build한 결과물을 Git에 올린 뒤, Server PC에서 Clone 하는 방식으로 진행한다.

기본적으로 build 디렉토리는 git Push 대상에서 제외되어 있으므로 .gitignore 파일을 수정해줘야 한다.

/build에 주석으로 안되어 있다면 주석 처리한 뒤 저장소에 Push한다.

 

2. Server PC에서 배포

2.1. 저장소를 받을 경로 생성

~/app에 만듦

 

2.2. git clone

SSH를 통한 git clone을 할 것이므로 한 번도 SSH를 이용해 clone하지 않았다면 아래 포스팅을 참고해 설정을 한다.

2022.01.03 - [Web개발] - [Git] SSH를 통한 Git Clone (AWS EC2 Amazon Linux2 환경)

 

2.3. build 결과물 Nginx에 옮기기

 

2.4. 배포 결과 확인