[Tool] 로컬 서버를 공유하기 위한 수단, ngrok 사용하기

 

로컬 개발 환경을 모바일 기기에서도 확인해 보기 위한 수단!

아주 유용하게 사용하고 있는 ngrok에 대해서 알아보자

 

---

Ngrok

https://ngrok.com/

ngrok | Unified Application Delivery Platform for Developers

 

Secure tunnels to localhost

Ngrok는 방화벽을 넘어 외부에서 로컬에 접속 가능하게 하는 터널 프로그램 중 한 가지이다.

보안 연결을 통해 웹 애플리케이션에 안전하게 접근할 수 있도록 돕기 때문에 안전하게 로컬 서버를 외부에서 접근할 수 있다.

 

 

ngrok는 개발 및 테스트 과정에서 매우 유용하게 사용할 수 있다.

마크업 개발자였던 나는 디자이너에게 만든 화면에 대해 디자인 QA를 받기 위해 ngrok를 애용했었고

현재 프론트엔드 개발자인 나는 로컬 개발 환경에서 만든 웹 애플리케이션을 PC가 아닌 mobile에서 확인하고 싶은 경우에 사용하고 있다.

 

 

 

ngrok 설치

1. 회원가입

개인용 토큰을 발급하기 때문에 회원가입을 필수로 진행해야만 설치를 이어나갈 수 있다.

 

 

2. 데스크탑에 ngrok 설치 파일 다운로드

https://dashboard.ngrok.com/get-started/setup/windows

ngrok - Online in One Line

Windows 전용 설치 안내

 

설치 이전 사용할 환경의 OS를 선택할 수 있다.

Windows는 Chocolatey를 이용해서 설치하거나 압축 파일을 직접 다운로드해서 설치한다.

$ choco install ngrok

 

나는 Chocolatey를 추가로 설치했어야 하는 입장이었기에 후자인 압축 파일 다운로드를 선택했다.

압축 파일 해제 후에 ngrok.exe를 실행. ngrok 명령어를 사용할 수 있는 전용 터미널이기 때문에 이곳에서 이후에서 소개하는 명령어들을 사용한다.

ngrok 명령어를 사용할 수 있는 전용 터미널 제공

 

MacOS는 brew를 이용해서 설치한다. 설치가 완료되면 바로 ngrok 명령어를 사용할 수 있다.

$ brew install ngrok/ngrok/ngrok

 

 

3. 사용자 토큰 입력

홈페이지에서 안내하는 내 토큰을 등록한다.

$ ngrok config add-authtoken 내토큰

 

 

4. 로컬 서버 실행

외부로 공유하려고 하는 로컬 개발 서버를 실행시킨다.

로컬 개발 서버 실행

위의 경우 로컬 서버 주소는 http://localhost:3000. 포트 번호가 3000 임을 확인한다.

 

 

5. ngrok 서버 실행

위의 로컬 개발 서버는 실행한 채로 두고 별개의 터미널에서 로컬 개발 서버의 포트 번호를 등록한다.

* Windows라면 ngrok 전용 터미널에서, MacOS라면 일반 터미널에서

$ ngrok http 3000

ngrok 서버 실행 성공 상태

 

명령어 입력 후 위와 같은 화면이 보여지면 ngrok 서버 실행이 성공한 것이다.

여기에서 Forwarding에 있는 url을 통해 ngrok 서버를 인터넷에서 접근할 수 있다. 이 url은 서버 실행마다 변경되는 고유 주소다.

 

 

ngrok 서버는 약 2시간 동안 유효하며 Ctrl+C 또는 터미널 창 닫기를 통해 종료시킬 수 있다.

또한 개발 로컬 서버를 종료하는 경우에도 해당 서버가 자동으로 닫힌다.

 

 

ngrok 서버에 접근한 사용자가 있는 경우에는 이 터미널창에 계속해서 기록되기 때문에 상황을 지켜볼 수 있다.

누군가가 ngrok 서버에 접속하면 다음과 같이 로그가 출력된다.

 

 

 

ngrok 사용

위에서 공유된 Forwarding url을 모바일로 접근하는 경우 아래와 같이 보인다.

이를 통해 개발 과정에서 PC 환경뿐만 아니라 mobile 환경을 함께 확인할 수 있다 👀 !! 얏호!!