ngrok은 NAT 및 방화벽 뒤에 있는 로컬 서버를 보안 터널을 통해 외부로 공유하는 도구입니다. 쉽게 말해, 외부에서도 localhost에서 실행되고 있는 애플리케이션에 접근할 수 있게 하는 터널 프로그램이라고 할 수 있습니다.
이 글에서는 ngrok의 사용법과 사용 시 유의 사항, 사용 예시에 대해 설명합니다. 자세한 내용은 ngrok 공식 문서를 참고해주세요.
1. 로컬 환경에서 개발한 것을 외부로 공유하는 방법
대부분의 개발자는 로컬 환경에서 개발한 것을 외부로 공유해야 할 순간을 맞는다. 이렇게 외부로 공개하는 것을 '호스팅한다'라고 표현하는데, 호스팅하는 방법을 알아보자.
1.1 배포를 통한 외부 공유
일반적인 경우, 배포를 통해 호스팅을 한다. Amazon의 AWS, Google의 GCP, Microsoft의 Azure, Naver의 NCP 등의 클라우드 컴퓨팅 서비스를 활용하는 경우가 대부분이고, 최소한의 성능으로 과금 없이 배포하고 싶은 경우 Heroku, Netlify 등을 활용하기도 한다.
1.2 ngrok을 활용한 외부 공유
배포를 통해 외부로 공유하는 방법은 비용이 발생할 수도 있고, 배포 과정이 익숙하지 않은 개발자들에게는 그 과정 자체에 어려움을 느낄 수 있다. 만약 프로토타입을 잠시 공유해야 하는 상황이거나, 로컬 환경에서 테스트하기 힘든 애플리케이션을 테스트해야 하는 상황이라면 배포를 통해 외부로 공유하는 방법은 과할 수 있다.
필요한 시간 동안 잠시 외부로 공유하는 상황이라면 ngrok을 활용하는 것을 고려해 보자.
2. ngrok 사용법
ngrok 설치에 대한 설명은 ngrok 공식 홈페이지에서 운영체제별로 안내하는 것으로 갈음한다. 설치 가이드에서 authtoken을 추가하는 과정이 포함되어 있는데, ngrok을 불편함 없이 사용하기 위해서 회원가입 후 authtoken을 추가하기를 권장한다. 여기서 authtoken이란, 회원가입 후 계정마다 발급된 '계정을 식별할 수 있는 코드'라고 생각하면 편하다.
2.1 실행 방법
ngrok은 아래 명령어로 간단하게 사용할 수 있다.
ngrok http <외부로 호스팅하고 싶은 port 번호>가령, 로컬 환경에서 애플리케이션이 포트 번호 8080에서 구동되고 있다면, 터미널에 아래의 명령어로 ngrok을 사용한다.
ngrok http 8080ngrok이 정상적으로 시작되면 console UI로 아래와 같은 정보들이 대시보드 형태로 보인다.
위 대시보드에 대한 설명은 아래와 같다.
- Session Status: 세션의 활성 상태를 보여준다. 값이 online일 경우 세션이 정상적으로 살아 있음을 의미한다. 즉, ngrok에서 제공하는 URL을 통해 로컬 환경으로 접근할 수 있다는 것을 의미한다.
- Session Expires: 세션이 만료되기까지의 시간을 보여준다.
- Version: ngrok의 버전을 의미한다.
- Region: ngrok agent가 터널을 호스팅하기 위한 region을 의미한다.
- Web Interface: ngrok 대시보드를 UI로 제공하는 URL이다. Web UI 대시보드에서는 request에 대한 분석은 물론이고, connection이나 세부 옵션 등에 대한 상태도 제공한다.
- Forwarding: ngrok에서 제공하는 터널 URL로, 이 URL을 통해 외부에서도 로컬 환경에 접근할 수 있게 된다. URL은 http URL과 https URL 모두 제공된다.
- Connections: ngrok에서 제공하는 터널에 대한 connections 관련 정보다. 더욱 정확한 정보를 참고하려면 Web Interface로 확인하자. 공식 문서에도 rt1, rt5 등의 용어에 대한 자세한 설명이 기재되어 있지 않고, 문의해도 정확한 답변을 받지 못했다는 말도 있다.
2.2 ngrok 계정 연결과 authtoken
본 장의 서두에서 언급했다시피 ngrok 계정을 연결하지 않고 ngrok을 사용할 경우 불편한 점이 많아서, ngrok 회원가입 및 계정 연결 후 사용하기를 권장한다.
2.2.1 ngrok 계정 연결을 하지 않았을 때 발생할 수 있는 불편함
단순히 API를 제공하는 용도로는 ngrok 계정을 연결하지 않아도 큰 불편함 없이 이용할 수 있다. 하지만 웹 애플리케이션의 Frontend 서버 용도로 호스팅하는 거라면 ngrok 계정을 필수적으로 연결해 줘야 한다. ngrok 계정을 연결하지 않고 ngrok에서 제공하는 URL로 접근을 시도할 경우, 아래처럼 ERR_NGROK_6022 에러 정보가 기재되어 있는 에러 페이지가 반환된다.
또, ngrok 계정을 연결하지 않으면 기본적으로 Session Expires가 2시간으로 설정되어 있는데 2시간보다 더 오랫동안 세션을 유지해야 하는 경우 ngrok 계정을 연결해야 한다. 세션이 만료될 때마다 다시 ngrok을 실행하는 방법도 있겠지만 매번 다시 시작하는 것도 번거롭고, 세션 만료 후 다시 ngrok을 실행하면 이전의 URL과 다른 URL이 제공되어 불편하다.
2.2.2 authtoken을 활용한 ngrok 계정 연결 방법
ngrok 계정은 authtoken 정보를 입력하여 연결할 수 있다. 구체적인 방법은 다음과 같다.
1. ngrok dashboard에서 본인의 authtoken을 확인한다. 만약 ngrok 계정을 만들지 않았다면 회원가입을 먼저 하자.
2. 아래의 명령어를 터미널에 입력하여 ngrok 계정을 연결한다.
ngrok authtoken <token>
정상적으로 명령어가 수행될 경우, 'Authtoken saved to configuration file: <ngrok.yml이 저장된 path>' 라는 문구가 출력된다. 아래의 그림을 참고하자.
3. ngrok 계정이 정상적으로 연결된 후, ngrok을 다시 실행하면 아래의 그림과 같이 console UI에서 Account 정보가 연동된 것을 확인할 수 있다.
3. ngrok 활용 예시
지금까지는 ngrok 사용법에 대해 살펴봤다. 그렇다면 ngrok은 어떤 때에 활용할 수 있을까? 실사용 사례를 통해 알아보자.
3.1 Frontend 프로토타입 공유
본인이 제작한 Frontend 프로토타입 프로젝트를 외부에 잠깐 공유해야 할 때 ngrok을 활용할 수 있다. 일회성으로 일시적인 공유를 할 때 사용하는 것이 좋고, 며칠 혹은 그보다 더 장기간 무중단으로 외부에 공유해야 할 때는 배포하는 것이 좋다. 또한, 무료 버전의 ngrok을 활용할 경우 허용 가능한 connection 개수가 제한적이라 불특정 다수에게 공유해야 하는 해커톤, 박람회 등은 ngrok 사용을 지양하는 것이 좋고 ngrok을 굳이 사용하겠다면 무료 버전은 피하자.
3.2 Slack App 개발 시 테스트
협업 도구 Slack에서 사용자들이 사용할 수 있는 App 개발 시, Slack 내에서 이벤트가 발생할 때 알림을 받을 수 있는 Event Subscriptions 기능이 있다. 해당 기능을 사용하려면 event subscriber 역할을 할 API의 URL이 필요한데, slack에서 보내오는 event notification을 받기 위해서는 로컬 환경에서 한계가 있다. 배포를 통해 Public IP를 확보할 수 있지만, 기능을 한참 개발하는 도중에 테스트할 때마다 배포하는 건 번거롭다. 그래서 이때 ngrok을 활용하면 편하다.
가령 본인이 제작한 애플리케이션에서 /slack/event 라는 path의 API로 이벤트를 구독할 경우, ngrok을 활용하면 다음과 같이 Request URL을 등록할 수 있다.
4. 마치며
이 글에서는 ngrok에 대한 간단한 설명과 사용법, 사용 예시 등을 설명했다. 설명한 것 이외에도 유료 버전의 ngrok을 사용한다면 고정적인 도메인 주소를 사용할 수 있다거나 로드밸런싱이 가능해지는 등 다양한 기능을 활용할 수 있다. 다만 이 글은 로컬 환경을 간단하게 호스팅하는 것에 초점을 두었기에 최소한의 내용만을 다루었다. 이 글이 잠시 동안 간편하게 호스팅하고자 했던 개발자들에게 도움이 되길 바라며 글을 마친다.