[2021/7/20] - React 서버의 프록시 설정과 Invalid Host Error 해결
교내 연구를 위한 웹페이지를 로컬 환경에서 교내 서버 환경으로 옮겨야 했다. 교내 서버는 정보화본부에서 제공해주는 유료 서버로, 관리를 정보화본부에서 담당한다. 따라서 일부 IP에서만 포트로 접속할 수 있으며, 신청을 따로 해야한다. 게다가 http(80)번 포트조차 정보화본부에서 제시하는 보안 절차를 따르지 않으면 교내 IP외 외부 접속이 불가능하게 되어 있다.
그래서 이런 환경에 맞추어 서버를 관리할 필요가 있었다. 로컬 서버에서 구동할 때에는 다음과 같은 구조로 되어 있었다.
박사님은 교내 서버 환경에서는 Elastic Search를 쓰지 않고, MySql 데이터베이스로만 진행하기를 원하셨다. 따라서 필요한 데이터만 MySql로 보내어 Elastic Search를 이용하는 코드 부분을 MySql로 치환하기만 하면 된다...고 생각하였다.
그런데 내 노트북에서는 사이트 구동이 잘 되는데, 일부 아이피에서는 Scatter Plot 이미지를 불러오지 못하는 현상이 발생하였다.
원인을 추측해보니 내 아이피에서만 8000번 포트 연결 신청이 되어있어, 백엔드와 통신이 가능했던 것이었다. 즉, 클라이언트에서 백엔드와 연결을 하고 있었다. 이것은 원래 원하던 그림이 아니었다.
원래 프론트엔드 코드에선 Axios 인스턴스를 생성하여 백엔드와 연결하고 GET 요청을 보내고 받아오는 형식으로 되어 있었다. 이것이 프론트엔드 서버에서 이루어지는 것이 아니라, 프론트엔드 서버에서 이를 렌더링한 후, 클라이언트에서 이 명령을 실행하도록 하는 것이었다.
혹시 클라이언트가 아닌 프론트엔드 서버 자체에서 백엔드와 통신하는 방법은 없을 지 고민해 보았다. 그러던 도중 React에서 아주 손쉽게 Proxy 설정을 할 수 있다는 것을 찾아내었다.
즉, 클라이언트가 요청을 리액트 프론트엔드 서버에 보내면, 리액트 프론트서버에서 대신 백엔드의 정보를 불러와 대신 전송해주는 역할을 한다. 한마디로 프록시의 역할을 하는 것이다.
이 설정은 package.json 에 아래와 같은 코드를 넣어 매우 손쉽게 할 수 있다.
{
proxy : '백엔드 주소:포트'
}이렇게 하면, axios나 fetch에 로컬 주소를 입력하면, 백엔드 주소로 REST API 요청을 보내고 받을 수 있다. 즉, 아래와 같은 구조가 되었다.
이 설정을 했더니 IP주소로는 접속이 잘 되는데, URL 주소로 접속했을 때 invalid host error가 뜨는 것을 볼 수 있었다. 이는 webpackDevServer.config.js에서 disableHostCheck:True로 바꾸어 주라고 하는데... 문제는 내 프로젝트에서는 저런 파일이 없었다.
이는 아직 설정파일이 추출되어 있지 않고 내장된 형태로 있는 것으로, yarn eject 명령어를 통해 추출할 수 있었다. 추출 뒤 config/webpackDevServer.config.js를 찾아 바꿀 수 있었다.
결과는 교내의 모든 컴퓨터에서 만족스럽게 작동하는 것을 확인할 수 있었다.
아직 외부 IP에서는 http포트조차 접속이 안된다는 것과, 데이터베이스를 아직 다 옮기지 않아 페이지 하나만 테스트 가능했다는 문제점이 있다.
전자는 오늘 저녁 정보화본부에서 이메일이 왔으므로, 출근하는 대로 일단 그래도 지침을 따라야 할 것이고, 후자는 먼저 설정을 마친 후에 천천히 옮겨봐야겠다는 생각이다.
데이터가 MySQL에 있는 것, 파일로 존재하는 것, ElasticSearch에 있는 것으로 나뉘어져 있어 통합이 쉽지 않을 것 같지만... 일단 차근차근 해보면 될 것 같다.