서비스 배포 케이스1

서버 A ( 사내에만, 다만 VPN 통해서 접속가능 ), 프론트엔드 여기에 올림

서버 B ( 사내에만 ), API 여기에 올림

 

가장 중요한 포인트는 리액트 프론트엔드 코드는 사용자의 웹 브라우저에서 실행된다는 것이다.

 

1. VPN 사용자의 접속 흐름

- VPN 사용자가 서버A의 주소로 접속한다.

- 서버A의 아파치 서버는 리액트로 빌드된 정적파일을 사용자에게 전송한다.

- 사용자의 웹 브라우저가 이 파일들을 다운로드하여 실행한다.

 

2. API 통신시도

- 이제 사용자의 브라우저에서 실행된 리액트 앱이 데이터를 가져오기 위해서 API를 호출한다.

- 이 API의 주소는 서버 B의 IP와 포트로 설정되어있다.

- 여기서 문제가 발생한다. API를 호출하는 주체는 서버A가 아니라 VPN에 접속한 사용자의 PC ( 웹 브라우저 ) 이다.

 

3. 접속실패

- 사용자 PC는 VPN1 네트워크 대역에 속해있다.

- 서버 B는 VPN1을 쓰는 유저들에게 오픈되어있지 않다.

- 따라서 VPN1 사용자의 PC에서 서버 B로 직접 API를 호출하지만, 방화벽이나 네트워크 정책에 의해 차단되어 통신이 실패하는 것이다. 

 

 

 

 

해결 방안은 다음이 있다.

 

가장 표준적인 방안 : 서버 A에 리버스 프록시를 설정하는 것이다.

 

이 방법은 외부 사용자에게 서버 B를 직접 노출하지 않고 서버 A를 통해 우회하여 접속하게 하는 가장 안전하고 표준적인 방법이다.

이렇게 하면 외부에 서버 B의 존재나 IP를 노출할 필요가 없다. 

그리고 모든 외부 트래픽은 서버 A라는 단일 창구를 통해 이루어지므로 관리가 편하다.

CORS 문제도 해결된다. API와 프론트엔드가 같은 도메인에서 서비스 되는 것처럼 보이므로 CORS 이슈가 발생하지 않는다.

 

 

- 사용자는 서버 A에만 모든 요청을 보낸다. 

- 특정경로 (예 : /api) 로 들어오는 요청은 서버 A가 받아서 내부적으로 B에게 전달하고, 그 응답을 다시 사용자에게 전달해주는 방식이다.

 

서버 A (아파치 서버) 설정방법

1. 서버 A에 mod_proxy와 mod_proxy_http 모듈이 활성화되어있는지 확인한다. 대부분 기본적으로 활성화되어있다.

2. 아파치 설정파일 ( httpd.conf 또는 가상 호스트 설정파일 ) 에 아래와 같은 프록시 설정을 추가한다. 

# 아파치 서버의 특정 경로로 오는 요청을 다른 서버로 전달한다.
# 예를 들어 http://서버A/api/* 로 오는 모든 요청을
# http://서버B_내부IP:API 포트/*로 전달한다.


# /api 라는 경로로 들어오는 요청을 프록시한다.
ProxyPass "/api" "http://<서버B_내부IP>:<API_포트>"

# 응답 헤더의 URL을 수정하여 클라이언트가 혼동하지 않도록 한다.
ProxyPassReverse "/api" "http://<서버B_내부IP>:<API포트>"

- 서버 B_내부IP : 서버 B의 사내망 IP 주소를 입력한다.

- API_포트 : 서버 B에서 실행중인 Node Express API의 포트번호 ( 예 : 3031.. )를 입력한다.

 

3. 아파치 서버를 재시작한다.

4. 리액트 프론트엔드 코드 수정

- API 요청 주소를 서버 B가 아닌 서버 A의 주소로 변경해야한다. 

 

 

 

다음 방안으로는 방화벽 정책을 변경하는 것이 있다. 

 

서버 B로 들어오는 VPN1 네트워크 대역의 트래픽을 허용하도록 네트워크 / 방화벽 정책을 변경하는 방법이다.

 

사내 IT 인프라/보안팀에 연락하여, VPN1 사용자들이 사용하는 IP 대역에서 서버 B의 API 포트로의 접속을 허용해달라고 요청해야한다.

이렇게 할 경우 서버나 코드의 설정 변경없이 간단하게 해결할 수 있다.

그러나, 보안에 취약할 수 있다. 원래는 내부용인 API 서버 ( 서버 B ) 를 외부에 직접 노출하게 되므로 보안정책에 위배될 수 있다.