[EC2] Nginx를 이용한 React 배포

Pre-Project 도중 Vercel 같은 배포 툴을 사용해서 프론트단을 배포하려 했으나
도메인을 강제로 https로 변경시키는 바람에 다른 방식으로 배포를 할지, 스프링에 https를 적용할지 
고민이 되었다.

처음에는 certbot을 통해서 https를 적용해보려 했으나 Vercel 같은 경우에는 배포를 자동으로 해주면서
도메인도 https로 생성을 해버리기 때문에 certbot에서 https를 적용할 수 없었다.
(http도메인에 https를 적용하는 방식인 듯) 그리고 이 방식은 잘 이해가 되지 않았다. 

그래서 React배포 시 자주 사용된다는 Nginx를 사용해서 React 프로젝트를 배포하기로 했다. 
아쉽지만 이번에는 http로 진행하기로 정했다.

아래의 블로그가 큰 도움이 되었다. 

Nginx로 React를 배포하는 방법

 

먼저 ec2상에 nginx를 설치가 되어있고, react의 빌드 파일이 올라가 있는 부분부터 정리해보려 한다. 
nginx설치는 구글에 검색해보면 널려있는 정보들로 손쉽게 가능했다.
react 빌드 파일 또한 프론트 분들께서 미리 빌드를 해주셔서 push한걸 ec2에서 pull 받아왔다. 

seb39_pre_044라는 repository를 깃허브에서 클론 받아온 모습이다. 
server - 백엔드 / client - 프론트엔드

그리고 client 폴더 안에 build라는 폴더가 또 있는데 이것이 프론트분들께서 빌드를 하신 결과물이라
이 build폴더의 경로를 nginx 환경설정에서 사용하게 되는 게 전부이다.

ec2의 최상단 디렉토리에서 

$ cd /etc/nginx

로 들어가면 nginx 폴더가 나오는데 여기서 주된 작업을 한다. 

nginx 디렉토리에서 sites-available 안에 default.conf가 있을 텐데 nano나 vi/vim 같은 편집기로 안의 내용을
전부 주석처리(#) 한 뒤에 새로운 파일을 {아무이름}.conf 라고 만들었다. 나는 feClient.conf라고 만들었다.

그리고 feClient.conf안에 아래의 코드를 삽입한다. 
저기서 root는 프론트엔드에서 빌드된 폴더를 경로로 지정하고 80은 80번 포트를 사용한다고
지정하는 것 같다.

여기서 index는 인덱스의 파일을 지정하는 것이고, try_files는 파일을 찾을때 나열된 순서대로 찾는것

#feClient.conf
###############

server {
        listen 80;
        location / {
                root /home/ubuntu/seb39_pre_044/client/build;
                index index.html index.htm;
                try_files $uri $uri/ /index.html;
        }
}

 

그 후 sites-enabled 디렉토리로 심볼릭 링크(윈도우의 바로가기 아이콘)를 걸기 위해 아래의 코드를 작성한다.

sudo ln -s /etc/nginx/sites-available/{아무이름}.conf /etc/nginx/sites-enabled/{아무이름}.conf

여기까지 했으면 sites-available폴더와 sites-enabled 폴더에
{아무이름}.conf 파일이 각각 생성 되었을 것이다.

이제 다 되었으니 nginx를 재시작한다. 

$ sudo service nginx restart

$ sudo service nginx status

위의 명령어를 통해 재시작하고 status를 확인하면 아래처럼 뜰 것이다. 

 

 

근데 나는 계속 500 서버 에러가 나서 백엔드 서버가 문젠가? 했지만
결론적으로는 nginx의 세팅이 잘못되었었다.

정확하게 이유를 알기 위해 /etc/nginx 디렉토리의 nginx.conf 파일을 열어봤는데
error log 경로 부분이 있어서 편한 경로로 바꾼 뒤에 vim으로 열어보았다.

잘 안 보이지만 13 permission denied라는 메시지가 뜨고 있었고 검색을 해보니
root경로로의 접근 권한이 없어서 발생하는 문제였다.

Nginx: stat() failed (13: permission denied)

답변대로 빌드 폴더 자체를 chmod +x를 통해서 수정했지만 그래도 계속 같은 문제가 발생했었다. 

그때 문득 error로그를 찾기 위해 nginx.conf를 들여다볼 때 user라는 항목이 있었었는데
나는 EC2를 만들 때 user를 ubuntu라고 저장했었다.

하지만 nginx.conf 파일에는 user가 다른 이름으로 지정이 되어 있었고 해당 부분을 ubuntu로 바꿔 주었더니
드디어 화면이 잘 보이기 시작했다. 

 

포스트맨으로 요청을 보내본 결과, RDS상에도 잘 반영이 되고 리액트에서도 데이터를 잘 받아올 수 있었다. 

ec2에 스프링만 배포해보다가 이번 기회에 리액트도 배포해볼 수 있어서 좋은 경험이 되었다.