Nginx를 활용해 리액트 프로젝트 배포하기 (멀티 포트 설정)

이번엔 AWS EC2(Linux) 환경에서 Nginx를 사용해 리액트 앱을 배포해봤다. 이미 하나의 서비스가 운영 중인 상태에서, 추가로 하나 더 올리는 작업이 필요했다.

즉, 같은 Nginx 안에서 여러 포트를 이용해 리액트 앱을 각각 운영하는 형태다.

---

1. Nginx 기본 구조 확인

EC2 인스턴스에서는 Nginx가 기본적으로 /etc/nginx 경로에 설치되어 있다. 설정 파일은 대부분 이 디렉토리 내에서 관리된다.

보통 Nginx의 설정은 nginx.conf 파일에서 이뤄지는데, 여러 서비스를 관리해야 하니 설정을 외부 파일로 분리해서 include 시키는 방식을 사용했다. 유지보수하기에도 좋다.

---

2. 설정 디렉토리 만들기

cd /etc/nginx
mkdir sites-enabled
cd sites-enabled
vi testServer.conf

---

3. 리액트 서비스용 conf 파일 작성

server {
    listen 1234;  # 원하는 포트 지정
    server_name localhost;

    location / {
        root /home/ec2-user/build/react/dist;  # 리액트 빌드 파일 위치
        index index.html;
        try_files $uri $uri/ /index.html;  # SPA 라우팅 처리
    }

    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

try_files 설정은 리액트처럼 싱글 페이지 앱(SPA) 구조에서 라우팅 문제를 방지하기 위해 반드시 추가해줘야 한다.

---

4. nginx.conf에 설정 연결

/etc/nginx/nginx.conf 파일을 열고, 아래처럼 include 구문을 추가한다. 보통 http { ... } 블록 내부에 넣는다.

include /etc/nginx/sites-enabled/*.conf;

 

---

5. Nginx 재시작

sudo service nginx restart

설정에 문법 오류가 있는지 먼저 확인하는 것도 잊지 말자.

sudo nginx -t

---

6. AWS 보안 그룹 설정 (포트 오픈)

Nginx에서 1234번 포트를 열었다면, AWS 콘솔에서 해당 EC2 인스턴스의 보안 그룹 설정에 들어가 인바운드 규칙에 포트 1234을 열어줘야 한다.

인바운드 규칙 > 규칙 편집 > TCP 1234번 추가

---

7. EC2 포트 열려 있는지 확인

netstat -tuln | grep 1234

정상적으로 설정됐다면, 브라우저에서 다음과 같은 주소로 접속해 리액트 앱이 뜨는 것을 확인할 수 있다.

http://[EC2 Public IPv4]:1234

---

마무리하며

기존에 하나의 서비스가 운영 중일 때, 같은 Nginx로 새로운 리액트 프로젝트를 배포하려면 포트를 분리하고 설정을 분리해주는 게 중요했다. 이번 작업을 통해 Nginx 설정 분리, SPA 라우팅 처리, 포트 관리, AWS 보안 그룹 설정까지 전반적으로 한 번씩 경험해볼 수 있었다.

앞으로 서비스가 더 늘어나더라도 이런 방식으로 구성하면 안정적으로 관리할 수 있을 것 같다.