내 웹서비스를 다른 컴퓨터에서 접속하는 방법 - localtunnel (무료)

개요

https://4sii.tistory.com/3

내 웹페이지를 다른 컴퓨터에서 접속하는 방법 (JSP, 포트포워딩, LG유플러스)(톰캣으로 구축한 서

 

최근에 WebRTC 공부를 하다가 내가 local에서 실행한 서비스에 대해 

배포 없이 다른 컴퓨터 또는 핸드폰에서 접속해서 확인해야 되는 과정이 있었는데

 

해당 과정에 대해 localtunnel 이라는 라이브러리를 통해 너무나도 간단하게 가능해서 방법을 공유해보고자 한다.

 

내 블로그 최고 인기글인

포트포워딩을 이용한 웹페이지 다른 컴퓨터에서 접속하는 방법에 대한 글이 생각나면서

해당 방법은 npm을 통해 실행하지 않는 말 그대로 정적인 'Web Server'이거나

포트포워딩을 해보고 싶은 사람에게 추천하는 방법이고

 

지금 할 방법은 npm을 통해 실행하는 'WAS' 이면서 포트포워딩 그런 귀찮은거 하기 싫은 사람들한테 추천되는 방법이다.

 

설치

https://www.npmjs.com/package/localtunnel

localtunnel

 

npm install -g localtunnel

설치를 하는데 내가 들었던 강의 영상에서도 그렇고 

공식 홈페이지의 설치 명령어도 저렇게 글로벌로 설치하라고 안내 되있는걸 보니

글로벌이 아니면 안되는 이유가 있는지 싶다.

 

일단 하란대로 글로벌로 설치한다.

 

이게 준비 끝이다.

 

사용 방법

서버 실행

먼저 서버를 실행한다. 

 

localtunnel 실행

lt --port 포트번호

위 명령어를 통해 localtunnel을 실행할 수 있는데

주의해야할 점이 위에서 실행한 서버를 종료하면 안된다는 것이다.

 

사진처럼 오른쪽에서 새로운 탭을 만들어 server탭에서 server가 실행되게 해놓고

다른 탭에서 (localtunnel) 위 명령어를 입력한다.

 

엔터치면 사진처럼 your url is: ~ 하면서 이상한 주소를 던져주는데

저게 바로 우리가 원하던 다른 컴퓨터에서도 접속할 수 있는 주소다.

 

결과 확인

 

접속하면 위 사진처럼 나오고 가운데 Click to Continue를 누르면 비로소 

우리가 원하던 사이트로의 접속이 된다.

 

* 핸드폰에서도 접속이 가능한데,

아이폰에서는 사파리를 통해선 계속 흰 화면만 뜨며 안되고

네이버 브라우저를 통해 접속하면 되는 것을 확인했다.

 

참고

위 테스트는 맥북 환경에서 vscode의 bash terminal을 통해 설치 및 진행했다.

windows 환경이거나 핸드폰에서 확인할 때 안되는 상황이 발생하면

https://nomadcoders.co/noom/lectures/3076

하단의 댓글에서 비슷한 증상을 겪고 해결한 방법을 확인해서 진행하길 바란다.