웹이나 모바일 개발을 주로하신다면 로컬 개발 서버를 외부에서 접속해야 할때가 있습니다.

예를들면 이런 경우죠

  • 간단한 로컬 개발 버전을 고객이 외부에서 간단하게 확인해보려 한다.

  • 로컬환경에서 버그를 계속 수정하고 외부에서 테스트가 필요할때..

  • 규모가 작아 개발서버를 두기가 어려워 로컬에서 개발한후 프로덕션 서버에 배포한다.

  • 모바일 네이티브앱이 https 경로만 가능하도록 강제하기 때문에 개발서버에 배포하는 작업이 추가된다.

특히 로컬에서 모바일 앱 개발시에는 외부에 노출된 https 연결이 꼭 필요하기 때문에 로컬 서버의 변경을 바로 테스트하기 어렵고 개발서버나 프로덕션 서버에 배포 해야하는 비효율이 발생하게 됩니다.

이럴 경우에 사용하는 터널링 툴들이 몇가지 있는데 ngrok이나 localtunnel 입니다.

프로세스는 간단한데 로컬에서 ngrok이나 localtunnel 실행파일을 실행하면 연결 가능 도메인을 알려주고 그도메인으로 연결하면 됩니다.

ngrok 을 주로 사용하다가 현재는 localtunnel로 사용하고 있습니다. (서브도메인 지정이 무료이기 때문이죠 💰)

‼️ localtunnel 을 좀 써봤는데 서비스가 조금 불안정하고 서브도메인을 확보하고 사용하는게 아니라서 중복이 발생하는 경우가 있는 것 같습니다. 그래서 저는 다시 ngrok 유료로 돌아가려고 합니다.

ngrok

ngrok 을 사용하게 되면 명령어 몇번으로 내부의 포트를 https 로 바로 연결할 수 있습니다.

사용방법

  1. https://dashboard.ngrok.com/signup 에 가입합니다.

  2. download ngrok 에서 ngrok 압축파일을 다운받고

  3. 압축을 푼후에

unzip /path/to/ngrok.zip
  1. ngrok 실행파일로 홈페이지의 authtoken 을 설정합니다.
./ngrok authtoken 3BdGTc6gVXds1goCCtU7w_Jmqqhfj8jZgaitgyRuwS
  1. 로컬 개발 서버에서 사용하는 포트 (여기서는 80) 으로 ngrok 파일을 실행해줍니다.
./ngrok http 80
  1. 터미널에 표시되는 ngrok url을 브라우저에 입력하면 로컬 서버의 실행이 외부 에서(https) 보여집니다.

설정도 간단하고 속도도 빠르고 기능도 많지만 단점이 있습니다.

무료버전의 경우 실행할때마다 서브도메인이 바뀝니다. 클라이언트의 환경 설정에서 서버 url을 계속 바꿔야 하는 문제가 생깁니다.

물론 유료로 사용하면 해결가능한 문제입니다.

랜덤 서브도메인의 경우는 무료지만 서브도메인을 지정해서 경로가 바뀌지 않게 만들 경우에는 월 $5의 금액이 발생하고 1년 단위의 결제밖에는 되지않기 때문에 $60 달러를 내야합니다.

금액에 부담이 없으시다면 ngrok 추천합니다.

localtunnel

현재 사용하는 툴은 localtunnel 입니다.

소개 홈페이지는 https://localtunnel.github.io/www/ 이고 깃허브 경로는 https://github.com/localtunnel/localtunnel입니다.

장점

  • 무료
  • 서브도메인 지정이 가능하다.

단점

  • 조금 느리고 불안정하다.

  • 서브도메인 지정형이 아니라서 누군가가 서브도메인을 사용하면 사용할수가 없다.

입니다.

설치 방법

  • npx 를 사용하신다면 설치 없이 다음 명령어를 실행하시면 됩니다. (가장 간단합니다.)
npx localtunnel --port 8000
  • 패키지 매니져로 전역(global) 설치로 사용
npm install -g localtunnel

로 설정하시면 lt 라는 명령어로 실행 할 수 있습니다.

  • 프로젝트 내에 설치하신다면
yarn add localtunnel

로 설치할 수 있습니다.

실행방법

  • npx 는 그냥 실행하면됩니다.
npx localtunnel --port 8000
  • 전역 설치일 경우에는 lt 명령어로 포트를 지정해주면됩니다.
lt --port 8000

  • 프로젝트 내에 설치의 경우

    node_modules내에 bin 폴더를 찾아서 lt.js를 실행해줍니다.

서브도메인 적용 방법

서브도메인이 랜덤으로 설정되지 않고 지정된 서브도메인을 원하신다면

실행시에 --subdomain 옵션을 지정해주면 지정된 서브도메인으로 접근이 가능합니다.

(이미 사용중인 서브도메인이라면 안될것 같은데 테스트 해보지는 않았습니다.)

npx 로 실행하신다면

npx localtunnel --port 8000 --subdomain devabcds

전역환경으로 설치하셨다면

lt --port 8000 --subdomain devabcds

로 실행하시면 https://devabcds.loca.lt 경로로 접근이 가능합니다.

결론

외부에서 로컬 개발 서버에 비교적 간단하게 접근할 수 있는 방법을 알아보았습니다. 이 방법보다 더 좋은 방법이 있으신 분들은 댓글 남겨주시면 정말 감사하겠습니다. :)