ngrok으로 외부에서 로컬호스트 환경 접속하기

0. 인트로

로컬 환경에서 개발 중인 작업물을 급하게 외부에서 확인해야할 일이 있을 때 어떻게 하시나요?
여러 좋은 방법들이 있겠지만 ngrok을 사용해서 간단하게 해결했던 경험이 있어 이를 공유드리고자 글을 작성했습니다.

1. ngrok

ngrok은 외부에서 로컬에 접속 가능하게 하는 터널 프로그램 중 한 가지입니다.
보안 연결을 통해 웹 애플리케이션에 접근할 수 있도록 돕기 때문에 안전하게 로컬 서버를 외부에서 접근할 수 있습니다.

설치
brew install ngrok/ngrok/ngrok

설치 완료된 이후에는 ngrok 홈페이지에서 로그인/회원가입을 진행합니다.

이후 Your Authtoken을 들어가서 토큰을 복사하는 데, 아래 ngrok config add-authtoken $YOUR_AUTHTOKEN을 복사해서 터미널에 붙여넣으면 세팅이 완료됩니다.

접속
터미널에서 ngrok http localhost:${접속할 포트번호}를 입력합니다.

접속하게 되면 위와 같은 화면이 출력되며 포워딩에 있는 주소로 접속하면 외부에서도 접속할 수 있는 링크가 됩니다.

굉장히 간편하게 SSL을 지원하는 링크를 공유할 수 있으나, 무료 플랜의 경우 시간 및 대역폭 제한이 있으며, 주소가 서버를 재시작할 때마다 변경되기 때문에 장기간 사용하기에는 불편함이 존재합니다.

하지만 실행까지의 과정이 매우 간편하기 때문에 짧게 짧게 로컬 개발을 공유할 때는 편리하게 사용할 수 있습니다.

2. ngrok의 동작 원리

이렇게 간편하게 사용할 수 있는 ngrok의 동작 원리가 궁금하여 알아봤습니다.

ngrok http로 실행한 환경은 로컬에 ngrok 클라이언트를 띄워 ngrok서버와 TLS로 연결을 맺습니다.

TLS란? : 전송 계층 보안(Transport Layer Security)의 약자. 인터넷 통신을 안전하게 사용
하기 위한 암호화 프로토콜입니다.

통신하고 있는 ngrok서버에서 외부에서 접근 가능한 퍼블릭 주소를 발급합니다.
퍼블릭 주소에 외부에서 접속요청이 들어오면 ngrok 서버를 거쳐 연결되어있는 ngrok 클라이언트로 터널을 통해 전달되어 배포하려는 로컬 환경이 공유됩니다.

3. 마무리 및 참고자료

ngrok서버를 거쳐서 공유가 되기 때문에 보안에 너무 민감한 데이터는 사용을 자제하는 것이 좋을 것 같습니다. 하지만 이외의 노멀한 데이터 혹은 UI 확인 등을 빠르게 공유해야할 때 적용하시면 잘 사용할 수 있다고 생각합니다

quora