[WEB] PC에서 실행중인 localhost 페이지를 모바일에서 확인하는 방법

채팅 앱을 개발하면서 다른 전자기기로 서로 채팅을 주고받는 것이 가능한지 확인해보기 위해 pc에서 실행한 localhost페이지에 모바일로 접속을 하는 방법을 찾아서 알아낸 내용을 포스팅하려고 합니다.

 

먼저 간단하게 웹서버 구축 후 

// server.js

// 서버 사용을 위해 http모듈을 http라는 변수에 담는다.
var http = require('http');

// http모듈로 서버를 생성한다. 
var app = http.createServer(function(req,res){
  // 사용자에게 요청이 들어오면 응답해준다.
  // 콘텐츠타입은 텍스트, html형식!
  res.writeHead(200,{'Content-Type':'text/html'});
  res.end('server is running...');
});

// listen 함수로 3000 포트에 서버를 실행한다.
app.listen(3000, function(){
  console.log("server is running.")
});

 

모바일로 접속 시 방화벽 때문에 접속이 되지 않습니다.

 

<해결 방법>

 

1. 윈도우 검색탭에서 방화벽 클릭

 

2. 방화벽 왼쪽 탭에서 고급설정 - 왼쪽 탭의 인바운드 규칙 - 오른쪽 작업 탭에 새 규칙 클릭

 

3. 규칙 생성

특정 로컬 포트는 사용하지 않는 임의의 번호로 지정

 

 

이름 지정 후 마침 클릭

 

4. 방금 생성한 규칙 더블클릭 후 속성 창의 프로토콜 및 포트에서 프로토콜 종류를 'IPv6'로 변경 

 

5. cmd창에서 'ipconfig' 명령어를 통해 해당 PC의 IPv4 주소를 알아냅니다.

알아낸 IPv4 주소를 192.168.0.111로 가정한다면 모바일 브라우저에서 192.168.0.111:3000으로 접속을 하면 PC에서 실행한 서버로 접속이 가능하게 됩니다. (PC에서 3000번 포트로 서버를 열었기 때문.)

모바일 환경에서 localhost 서버 접속 성공

 

저희 집의 경우 PC, 노트북, 스마트폰 모두 같은 인터넷, WiFi를 이용하고 있으며
스마트폰에서 LTE를 킨 상태로는 localhost서버에 접속이 되지 않으며 방법이 좀 더 복잡하니 참고 바랍니다.