팀플에서 백엔드와 프론트엔드 통신하기 (netsh 활용 포트포워딩)

개요

최근에 백엔드 관련 프로젝트를 2개 진행하게 되면서 프론트와의 통신과 관련해서 한가지 고민이 생겼었습니다.

첫번째로 진행했던 백엔드 프로젝트에서는 aws를 처음 써봐서 aws를 나중에 적용한 나머지 초반 개발과정에서는 백엔드코드와 프론트 코드를 둘다 github에 올리고 잘 되나 확인해보려면 두쪽에서 각각 백엔드와 프론트를 켜서 확인을 해야 했죠.

aws를 적용한 후에도 비용문제로 각각 확인하는 방식을 많이 활용했고요.

 

하지만 두번째로 진행하는 프로젝트는 mysql을 활용한 데이터베이스를 적용해서 진행을 했습니다.

그러다 보니 그럼 각각 조원이 잘되나 확인해보려면 나랑 데이터베이스나 이런걸 똑같이 다 맞춰놓고 프로젝트를 해야하나.. 너무 비효율적인지 않나 라는 고민이 생겼죠.

 

그러다가 알게된것이 포트포워딩으로 같은 와이파이에 있다는 전재하에 와이파이를 통해 통신하는 방법을 알아냈습니다.

그렇다면 이제 포트포워딩으로 와이파이를 통해 통신한 방법을 알려드리겠습니다.

 

 

포트포워딩

제가 이해한 포트포워딩에 대해서 설명을 짧게 드리겠습니다.

포트포워딩은 한마디로 외부에서 내부로 접속할 수 있도록 해주는 것 이라고 생각하면 될것 같아요!

예를 들면 외부에서 남의 집으로 못들어가지만. 만약 키를 빌려줬다면 열고 들어갈 수 있는 그런 느낌? 이라 생각하면 되고 여기서 키가 포트포워딩인것이죠.

간단하게 그림을 설명하면 위와 같이 생각할 수 있습니다.

그럼 이제 실제 제가 어떻게 활용했는지 말씀드리겠습니다.

 

 

활용방법

먼저 포트포워딩을 해야겠죠?

저는 netsh를 활용해서 포트포워딩을 진행 했습니다.

 

1. cmd를 관리자권한으로 켜줍니다.

2. cmd창에 ipconfig라고 명령어를 적어주세요

저는 아직 보안이나 이런 개념이 부족해서 혹시해서 모자이크를 해 놨지만 제가 모자이크 한 부분에 여러분들은 뭐가 쭉 뜰거에요.

 

여기서 저는 무선 LAN 어댑터 wi-fi의 IPv4주소를 사용했습니다.

 

3. 방화벽 설정

현재 사용하고있는 wifi가 공용인지 개인인지가 중요합니다.

window defender 방화벽 설정 또는 해제로 들어가주세요

그리고 자신이 공용이면 공용, 개인이면 개인으로 가서 방화벽 사용 안 함을 선택해주시면 됩니다.

 

4. 포트포워딩

저는 netsh를 통해서 포트포워딩을 해볼게요

아까 켜놓았던 cmd로 다시 이동하겠습니다. (관리자권한 켜두세요!!)

 

netsh interface portproxy add v4tov4 listenport=8000 listenaddress=127.0.0.1 connectport=연결하고자 하는 포트 connectaddress=IPv4주소

listenport에는 외부에서 접속을 허용하고자 하는 port를 적으시면 됩니다.

listenaddress에는 외부 IP를 적어주시면 됩니다. 저같은 경우는 로컬에서 저의 와이파이 ip로 접속하게 하고싶기때문에 127.0.0.1로 적었습니다. (127.0.0.1이 왜 외부냐!! 할 수 있지만 다른 컴퓨터에서 이 명령어를 적용하면 localhost로 제 와이파이에 접속하는 것이기 때문이에요)

connectport에는 제가 백엔드 코드를 실행시켜 놓은 포트를 적어주시면됩니다. (ex. 8080)

마지막으로 connectaddress에는  아까 ipconfig로 알아놓은 IPv4주소를 적어주시면 됩니다.

 

위에 저 한줄만 적어도 포트포워디잉 된 것이지만, 만약 확인하고 싶다면 

netsh interface portproxy show v4tov4

위 명령어를 입력해주시면 현재 포트포워딩 정보를 볼 수 있어요

 

5. 연결 확인

연결확인 방법은 간단해요

일단 여러분들의 백엔드 코드를 저 wifi IPv4 ip에서 실행시켜 주세요

그리고 인터넷에는 localhost:8000으로 접속해보시면

저는 분명 wifi IPv4 ip에서 실행시켰지만 localhost에서도 접속되는것을 볼 수 있어요.

 

 

즐거운 개발 되세요!!~~