외부에서 로컬 개발 서버에 접근하기

들어가며

COVID19가 창궐한 이후, 그동안 원격근무를 하며 웹이나 모바일 개발을 할 때에 로컬 개발서버를 외부에서 접속해야 하는 경우가 있었는데요.

원격 근무를 하는 동안에 집에서 일할 경우 공유기 설정을 변경하여 포트포워딩을 할 수 있거나 한다면 로컬에 접속하는 것이 수월할 수도 있겠지만 회사나 카페, 외부에서 테더링을 사용하는 등 내가 네트워크 설정을 변경할 수 없는 경우에 많이 유용할 것 같아요.

간단하게 시작해 보자.

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 --local-host localhost

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

이런 점이 좋아요

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

이런 점이 아쉬워요

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

마치며

외부에서 로컬 개발 서버에 비교적 간단하게 접근할 수 있는 방법을 알아보았어요.
고객은 기획문서 또는 디자인을 보고 '이것이 실제로 어떤 모습으로 동작하는지' 상상하기 어려워하는 경우가 많아요.
개발 중에 커뮤니케이션을 위해 빌드 후 서버에 배포하는 번거로움을 생략하고, 주기적으로 현재 개발 중인 프로젝트의 모습을 실시간으로 보여준다면 고객의 의도가 제대로 적용되고 있는지 확인할 수 있을거에요.
그렇다면 잘못된 방향으로 개발을 하는 경우도 줄어들고 고객의 만족도도 높아질 거라 생각해요.
그리고 다른 기기에서 테스트가 필요할 때도 종종 요긴하게 사용할 수 있을 것 같아서 소개드립니다.

이 글은 pxd XE Group Blog에서도 보실 수 있습니다.