[네트워크] 네트워크 실습 프리 서버 연결하기(백엔드 + 프론트)

최동혁·2023년 2월 1일
0

컴퓨터 네트워크

목록 보기
19/19
post-thumbnail

VMware 가상 머신 2개 실행

  • 프론트의 아이피는 192.168.214.129로 정했다.

  • 백엔드의 아이피는 192.168.214.128로 정했다.

  • 포트 포워딩을 30006번과 31006번으로 내 PC의 사설 IP인 192.168.0.100 으로 설정해주었다.

  • 그렇다면 112.~.~.~:30006 이나 31006으로 접속했을때 내 PC로 접속이 되는 것이다.

  • 그곳에서 내 가상 머신으로 접속이 되게 하려면?

  • Virtual Network Editor를 열어서 NAT를 세팅해주어야 한다.
  • 30006번 포트로 들어왔을때는 192.168.163.129:80(프론트엔드)으로 31006번으로 들어왔을 때에는 192.168.163.128:443(백엔드)로 연결이 되게 가상 공유기를 설정해주는 것이다.
  • 그렇다면 112.~.~.~:30006으로 접속을 하면, 192.168.163.129:80으로 들어가게 해주는 것이고, 112.~.~.~:31006으로 들어가면 192.168.163.128:443으로 들어가지는 것이다.
  • 사용자에게 보여지는 것은 프론트이다.
  • 그렇기에 사용자는 30006으로 들어와야 한다.

프론트 엔드

  • 저번 시간에 실습했던 apache24를 로컬 디스크에 넣어주자.
  • 그 후, htdocs 파일 안의 내용물을 전부 삭제 후, 프론트 파일을 다운 받아서 압축 해제해서 web 폴더 안에 있는 파일들을 apache24/htdocs 폴더 안에 넣어주자.

  • 이런식으로 넣어주면 된다.
  • 그 후, index.html을 메모장으로 열어서 연결 ip를 세팅해주어야 한다.

  • 밑으로 내리다 보면 위의 그림과 같은 라인이 있을 것이다.
  • 이건 localhost 즉, 내 ip만 허용하겠다는 것이다.
  • 우리는 백엔드와 프론트의 ip가 다르기 때문에, 백엔드 ip를 추가해주어야 한다.
  • 위에 가상머신 설정에서 우리는 112.~.~.~:31006으로 외부에서 접속을 하면 192.168.163.128:443으로 접속이 되게끔 설정을 해주었다.
  • 128은 백엔드의 주소이다. 그렇기 때문에 우리는 우리의 공유기 공인 112.~.~.~:31006을 작성해주어야 프론트가 192.168.163.128:443과 통신을 할 수 있다.

  • 위의 그림과 같이 작성해주면 112.~.~.~:31006 ->(포트포워딩)->192.168.0.100:31006->(NAT)->192.168.163.128:443 으로 ip와 port가 변환되어서 통신한다.
  • 사용자의 입장에서는 프론트만 보면 되기 때문에 주소창에는 112.~.~.~:30006을 이용해 접속하게 된다.
  • 서버를 아직 키지 않아도, NAT 설정과 포트포워딩을 다 해놓았기 때문에 공유기의 공인 ip:30006으로 외부에서 접속하면 시작화면까지는 볼 수 있다

백엔드

깃허브 파일 다운로드

  1. Node.js 파일 설치
  2. 깃허브 파일 설치 후, 압축 해제
  3. run 폴더 안에 있는 win-Install_Dep 실행
  4. win-Start 실행

  • 그렇다면 해당 가상 머신에서 게임 서버를 실행시킨것이다.
  • 우리는 앞에서 포트 포워딩으로 공유기 공인 ip로 접속했을때 내 컴퓨터의 사설 ip:31006과 30006으로 오게끔 설정해주었다.
  • 그리고 가상 공유기도 NAT 설정으로 가상 백엔드 ip:443과 가상 프론트:80으로 해주었다.
  • 프론트에서 메모장을 켜서 백엔드와 통신이 되게 설정까지 해주었으니, 위와 같이 세팅을 해주면 프론트와 백엔드가 연결이 되고, 외부에서 공인 ip:30006을 통해 들어와서 게임을 즐길 수 있다.

  • 여기서 나오는 Local 443과 Local 8080, server는

  • 프론트에서 설정을 변경해준 위의 그림을 보여주는 것이다.
  • 우리는 서버를 가장 아래칸에 두었기 때문에 가장 아래 server를 선택하고 즐겨주면 된다.

결과

profile
항상 성장하는 개발자 최동혁입니다.

0개의 댓글