웹브라우저 개발자도구의 네트워크 탭에서 API서버 도메인 주소가 출력되는 건 관련 질문

Question

안녕하세요. 웹서비스의 네트워크 관련하여 문의드립니다.[1번 WEB 서버]3000번 포트에 웹서비스 프론트 서비스 배포 (vue.js)Nginx를 이용하여 80포트로 신호가 들어오면, 3000번 포트에서 실행되는 서비스로 연결되도록 프록시 구성[2번 WAS 서버]8080 포트에 스프링부트로 만든 API용 서버 배포 (내장 톰캣)Nginx를 이용하여 80포트로 신호가 들어오면, 8080번 포트에서 실행되는 API 서비스로 연결되도록 프록시 구성즉, 프론트와 백엔드가 분리되어 개발되어 있고 서버도 분리되어 있습니다.사용자가 웹페이지에 접속 후 로그인, 데이터 조회 등을 하는 경우, ajax를 이용하여 API서버로 데이터를 요청함.(ex) 아래 도메인은 설명을 위한 의미없는 주소임.frontexample.com 이라는 도메인에서 로그인 및 데이터 요청을 하면, API서버인 backendexample.com 쪽으로 ajax를 통해 데이터를 요청하고 있음.이 때, 사용자의 웹브라우저에서 개발자 도구를 켜고 네트워크 탭으로 이동하면 API서버로 요청을 할 때마다 API 주소 및 요청에 대한 기록이 화면에 보임.(ex) backendexample.com/login 이런 식으로...위와 같은 구조인 경우, 사용자의 PC(웹브라우저)에서 WAS에 해당하는 API서버와 통신이 되어야 하기 때문에,WAS서버의 80포트를 모든 곳에서 통신이 되도록 열어놓아야 하기 때문에 보안 지적사항이 됨.따라서,2번 WAS 서버의 도메인 DNS를 2번 서버(WAS)가 아니라 1번 서버(웹서버)쪽으로 연결하고,1번 WEB 서버에 Nginx 추가 설정을 하여 backendexample.com 로 신호가 들어오면 2번 서버로 통신되도록 구성을 한 상태입니다.따라서, 2번 WAS 서버의 80포트는 1번 WEB 서버와만 통신이 되도록 방화벽을 설정해둔 상태이고요.위와 같은 상황에서 질문을 드립니다.위와 같은 구조에서 웹브라우저 개발자도구에서 네트워크 탭에 API서버와 통신하는 기록들이 출력되지 않도록 하는 방법이 있나요?스프링을 이용하여 프론트와 백엔드 소스가 분리되지 않고 하나의 프로젝트에 있는 경우, WAS쪽으로 통신하는 것은 자바스크립트단에서 ajax를 이용하여 호출하는 것은 동일한 것 같은데, 이런 경우에는 웹브라우저 개발자도구 네트워크 탭에서 ajax를 이용하여 데이터를 요청하는 기록들이 남지 않더라구요. 기록이 안 남는 것은 왜 그럴까요?즉, 어떤 서비스들은 개발자 도구 네트워크 탭에 기록이 남고, 어떤 서비스들은 네트워크 탭에 기록이 남지 않습니다. 이게 어떤 경우에 이렇게 되는지 궁금합니다.

Clickin · Answer

리버스 프록시에 대해서 알아보세요간단하게 설명드리면 frontexample.com/api -> 2번 was로 가도록 proxy pass 하면 됩니다.추가로 프론트 구조를 어떻게 하셨는지는 모르겠으나 CSR이라 서버사이드 렌더링이 없다면 노드 필요없고 엔진엑스가 바로 서비스 가능합니다. 굳이 노드 돌리고 엔진엑스를 앞단에 두는거보다 엔진엑스가 바로 html/css/js 서비스하는 쪽이 성능도 좋고 자원도 덜 먹습니다.

웹브라우저 개발자도구의 네트워크 탭에서 API서버 도메인 주소가 출력되는 건 관련 질문

1개의 답변

기술 목록