Ngrok을 통해 외부에서 localhost 주소 접속하기

개발 과정에서 기능을 구현한 뒤 로컬 환경에서 테스트하고 최종적으로 푸시하는 방식은 흔히 쓰이는 패턴이다. 하지만 소셜 로그인과 같이 프런트엔드와의 협업을 반드시 거쳐야 하는 기능 테스트에 해당 방식을 그대로 적용하면 여러 가지 불편한 점들이 발생한다.

예를 들어, 로컬 환경에서는 문제가 없던 기능을 테스트 서버에 배포한 후에야 프런트와의 연동 과정에서 오류를 발견한다면, 이를 수정하고 다시 배포하는 반복 작업에 많은 시간과 에너지를 소모하게 된다. 결국 이러한 비효율적인 과정들은 의미 없는 병목 현상을 유발하면서 개발 생산성을 크게 저하시킨다.

 

본인도 실제로 소셜 로그인 기능을 구현하면서 많은 애로사항을 겪으면서, '로컬의 빌드 환경을 외부에서 접속하여 테스트할 수 있다면, 정말 좋을 것 같은데..'라는 생각을 자주 하고는 했다.

 

그리고 위 생각을 ngrok을 통해 실제로 적용할 수 있었다.

 

ngrok

ngrok | API Gateway, IoT Device Gateway, Secure Tunnels for Containers, Apps & APIs

 

간단히 말해, ngrok은 로컬 환경에서의 주소, 즉 localhost주소를 외부에서 접근이 가능하도록 만들어주는 일종의 터널링 서비스이다.

물론 해당 기능만 제공하는 것은 아니고, 로드 밸런서나 자격 증명 등 다양한 기능을 제공하지만, 이번 글에서는 개발 환경의 외부로의 안전한 공개에 대해서만 언급하도록 하겠다.

 

Homebrew 설치

만약 Homebrew가 설치되지 않은 맥북 이용자라면, 보다 원활한 패키지 관리를 위해 설치하는 것을 적극 추천드리니, 아래 링크를 통해 설치하면 된다!

 

Homebrew

 

ngrok 설치

Download ngrok

 

Homebrew가 설치되었다면, 터미널에서 다음과 같은 명령어를 입력해 ngrok을 설치해 줄 수 있다.

brew install ngrok

 

설치가 완료된 ngrok

 

설치가 정상적으로 완료되었다면, 다음과 같은 명령어를 통해 ngrok의 버전을 확인할 수 있다.

ngrok --version

 

ngrok 토큰 발급

설치한 ngrok을 통해 localhost 주소를 외부로 공개하려면, ngrok에서 발급해주는 Authtoken을 발급받고, 로컬 환경에 해당 토큰을 추가해주어야 한다. 이를 위해 다음과 같은 과정을 거쳐야 한다.

1. ngrok 사이트에 접속하여 가입하기(sign up)
2. 가입 이후 리다이렉트되는 사이트의 설명에 따라 토큰 추가하기

정말 쉽고 간단하다. 가입이 정상적으로 이루어졌다면, 다음과 같은 화면이 보일 것이다.

토큰이 정상적으로 발급된 모습

 

이후 화면에 나와있는 두 번째 명령어를 복사한 다음, 터미널 창에 그대로 기입해주면 된다.

ngrok config add-authtoken [Authtoken]

 

정상적으로 기입이 완료되었다면, 다음과 같은 결과를 확인할 수 있다.

Authtoken이 정상적으로 저장된 모습

 

이제 모든 준비는 완료되었고, 개발 환경을 외부에 공개할 일만 남았다.

 

로컬 환경을 외부에 공개하기

이제 ngrok 명령어를 통해, 로컬 환경에서 실행중인 웹 애플리케이션/서버를 외부에 공개할 차례다. 실행되고 있는 애플리케이션에 따라 포트 번호가 다르니, 이를 유의하여 다음과 같이 명령어를 작성해 주면 된다.

본인의 경우, 스프링 부트를 사용하기에 http://localhost:8080을 작성해주었다.

ngrok http http://localhost:8080

 

정상적으로 실행이 완료되면, 터미널 창에 다음과 같은 내용이 보이게 된다.

ngrok이 정상적으로 실행된 모습

 

제공된 도메인에 최초 접속 시, 다음과 같은 안내 페이지를 보게 된다. 해당 페이지는 각 방문자가 최초 접속 시에만 보게 되는 내용으로, 일종의 간단한 경고(?)를 안내하고 있다.

 

이후 Visit Site 버튼을 선택해 접속하게 되면, 정상적으로 로컬 환경을 외부에서 접속할 수 있게 된다.

 

마무리

이로서 ngrok을 통해 로컬 환경에서의 웹 서버/애플리케이션을 외부로 안전하게 공개하는 방법을 알아보았다. 해당 서비스를 통해 서비스 개발 환경에서 팀원들과 원활하고 신속한 소통을 통해 반복되는 트러블슈팅 과정을 줄여 보다 이상적인 협업을 진행할 수 있을 것이라 생각한다.(물론 나부터가 너무 행복해졌다..)

 

유의할 점은, 무료 계정으로 해당 서비스를 이용할 경우 url이 영구적이지 않으니, ngrok을 실행할 때마다 꼭 터미널 창을 확인해서 올바른 도메인을 팀원에게 공유해줘야 한다는 것이다!

 

만약 본인이 한 개의 프로젝트만 진행하고 있다면, ngrok에서 제공해 주는 정적 도메인을 통해 개발 환경을 준영구적으로 외부에 공개할 수 있으니, 해당 방식을 선택하는 것도 하나의 방법이 될 수 있겠다.

ngrok에서 제공해주는 정적 도메인