[EC2] React 배포

React 프론트를 nginx에 올려야하는 이유

nginx가 event-driven 방식으로 트랜잭션을 처리한다. 동시접속자가 많아도 적절히 처리가 가능.
react production 파일이 static 파일이다. 클라이언트 렌더링으로는 sub-url로 바로 접속이 안되어서 서버 렌더링이 필요한데, 이때 nginx를 사용할 수 있다.

EC2 보안 그룹 설정

80(HTTP), 443(HTTPS), 3000(React) 등 사용할 포트를 인바운드 규칙으로 0.0.0.0/0과 ::/0을 추가한다.

Nginx 설정 확인

Nginx 설정에서 'root' 디렉토리 경로가 React 애플리케이션의 'build'폴더를 가리키는지 확인한다.

sudo apt-get install nginx

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

default 파일

server {
    listen 80;
    

    location / {
        root /path/to/your/react/app/build;
        try_files $uri /index.html;
    }
}

Nginx 재시작

sudo nginx -t
sudo systemctl restart nginx

퍼블릭 IP 주소로 접속