들어가며

웹이나 모바일 개발을 할 때에 로컬 개발서버를 외부에서 접속해야 하는 경우가 있어요.
공유기 설정을 변경하여 포트포워딩을 할 수 있거나 한다면 로컬에 접속하는 것이 수월할 수도 있겠지만 회사나 카페, 외부에서 테터링을 사용하는 등 내가 네트워크 설정을 변경할 수 없는 경우에 많이 유용할 것 같아요.

간단하게 시작해 보자.

npm을 통해 ‘localtunnel’ 설치를 시작해요.

npm install -g localtunnel

자. 준비가 끝났어요.
응…?
벌써…?!

간단하게 실행해 보자.

React 또는 Vue 와 같은 Front-End 프로젝트를 하고 있다면 대부분 http://localhost:3000 으로 로컬에서 서버를 실행하고 있을 거에요.
그 외에도 ‘serve’나 ‘http-server’와 같은 것들을 이용할 수도 있고요.
무엇이든 우선 로컬에 서버를 실행해요.

그리고 lt 명령어를 사용하면 끝이에요.

lt --port [포트 번호]

옵션을 통해 도메인을 설정할 수도 있어요.

lt --port [포트 번호] —subdomain [도메인 이름]

예를 들어

lt --port 8080 --subdomain doworld

와 같이 실행했다면 https://doworld.loca.lt/ 의 URL로 현재 로컬에서 실행 중인 프로젝트를 외부에서 접속할 수 있어요.

이런 점이 좋아요

• 회원가입이나 계정을 등록할 필요가 없어요.
• 오픈 소스로 개발 중이에요. 비용이 들지 않아요.
• Sub-domain을 지정할 수 있어요.
• 로컬 개발서버로 전달되는 request들을 확인할 수도 있어요.
• Node 기반으로 운영체제와 무관하게 사용할 수 있어요.

이런 점이 아쉬워요

• 하나의 IP에서 브라우저로 처음 접속하거나 7일마다 안내 페이지가 나와요.
• 접속 속도가 빠르지는 않은 것 같아요.
• 오픈 소스로 개발 중이라 접속이 되지 않을 경우도 있어요.

마치며

외부에서 로컬 개발 서버에 비교적 간단하게 접근할 수 있는 방법을 알아보았는데요.
다른 기기에서 테스트가 필요하거나 개발 중에 커뮤니케이션을 위해 빌드 후 서버에 배포하는 번거로움을 생략할 수 있어 종종 요긴하게 사용할 수 있을 것 같아서 소개 드립니다.