React 프로젝트 클라우드 서버에 배포

이 저번에 react 프로젝트를 만드는 방법을 포스팅했었다.

https://jisoekdays.tistory.com/24

 

이번에는 그 프로젝트를 서버에 올려서 다른 사람들도 접속할수있도록 구현을 하고 싶다.

현재 팀 사이드 프로젝트를 진행중이다. 그래서 msa 아키텍처를 다음과 같이 구성했다.

 

서버는 ec2 서버 2개를 받아서 FrontEnd 와 BackEnd 2개를 구현할 예정이다. 만일 AWS 서버 호스팅 방법에 대해서 궁금하면  https://jisoekdays.tistory.com/2 여기서 확인하자.

 

React는 단순 정적 프로젝트로서, nginx에서 호출시킬 예정이다. 

통상 S3 + CloudFront를 받아 배포시키지만, 나는 Web서버에 다른 기능들도 넣을 예정이라 ec2를 받아 위와 같이 구성했다.

 

AWS 53을 통해 내가 구매한 도메인으로 접속시 80포트를 리슨 중인 nginx가 해당 트래픽을 잡고, root인 nginx로 이동시키는 방식을 사용한다.

그리고 react는 proxy로 BackEnd:8080으로 api 요청을 하면된다.

 

1. 프로젝트 빌드

react 프로젝트상, package.json 이 있는 위치에서 터미널을 오픈해서,  npm run build 를 입력한다.

 

그러면 build 폴더가 생성되고 그 안에 빌드된 react 파일들이 생성된다.

이제 이 파일들은 서버에 올려줘야하는데, 그전에 nginx에서 root 디렉토리 설정을 변경해주자.

 

2. web서버 설정 변경

통상 내가 nginx의 위치를 변경하지 않았으면 /etc/nginx 에 nginx가 설치 되어있고, 기본적으로 해당 디렉토리의 nginx.conf를 기본으로 읽는다.

그러니 다음과 nginx.conf를 열고 수정하자.

sudo vi /etc/nginx/nginx.conf

 

80포트가 요청 들어올시, 기본적인 정적 디렉토리를 수정해서 react 파일을 읽도록 하자.

저장하고,  문법상 이상없는지 확인하자.

sudo nginx -t

이상없으면 설정파일만 다시 읽는 sudo nginx -s reload 으로 재실행

 

 

구동하고 80포트 (http)로 접속하면 다음과 같이 접속이 완료된다.

---

 

만일!... Permission denied 에러가 뜬다면... nginx의 user를 확인하자.

 

생각을 해보면 nginx의 마스터는 root로 뜨겠지만, (sudo를 쓰니깐) worker들은 그렇지가 않더라..

user를 그냥 깔끔하게 root로 바꾸고 저장한뒤에 실행하면 잘된다.