ngrok - 로컬 애플리케이션에 외부에서 접근 허용 도구

로컬에서 SpringBoot 프로젝트를 개발하는 도중에 웹브라우저에 입력하는 주소는 http://localhost:8080 이 기본이다. 그런데, https://iwoohaha.tistory.com/345 에서 설명하고 있는 Sign in with Apple 기능의 구현은 애플에서 localhost 를 허용하지 않기 때문에 로컬에서 테스트가 불가능한 상황이다.

이런 경우에 외부에서 내 로컬 애플리케이션에 접근이 가능하도록 도와주는 도구가 있는데, ngrok 이다.

ngrok 을 사용하게 되면 임의의 도메인이 localhost 에 매핑되므로 외부에서도 해당 도메인으로 내 애플리케이션에 접근할 수 있게 된다. 게다가 HTTPS 프로토콜로 접속할 수 있도록 해준다.

이번 포스트에서 macOS 를 기준으로 ngrok 의 설치부터 사용 방법까지 알아보고자 한다.

설치

macOS 에 Homebrew 를 설치한 상태라면 아래의 명령어를 이용하여 ngrok 을 간단하게 설치할 수 있다.

brew install ngrok/ngrok/ngrok

macOS 이외의 OS 에서도 설치할 수 있는데, https://download.ngrok.com/ 주소에서 설치 방법을 안내해주고 있다.

ngrok 계정 생성 및 인증환경 구성

https://ngrok.com/ 으로 이동하여 Sign up 버튼을 클릭하여 계정을 생성한다.

생성한 계정으로 로그인하여 https://dashboard.ngrok.com/get-started/your-authtoken 로 이동하면 인증토큰을 얻을 수가 있다.

터미널에서 아래 명령어를 사용하여 인증관련 환경을 구성하면 된다.

ngrok config add-authtoken $YOUR_AUTHTOKEN

$YOUR_AUTHTOKEN 대신 나의 인증토큰값을 붙여넣기하여 사용하면 된다.

ngrok 실행

이제 ngrok 을 실행시켜서 외부에서 접근 가능한 환경을 구성한다.

ngrok http http://localhost:8080

위 명령어가 실행되면 아래 스크린샷과 같은 화면이 표시된다.

빨간 사각형 안의 주소가 ngrok 을 통하여 얻어진 도메인이다.

웹브라우저에 https://1445-112-175-250-218.ngrok-free.app 를 입력하면 로컬에서 실행되는 내 SpringBoot 프로젝트 화면을 볼 수 있다.

https://iwoohaha.tistory.com/345 에서 미처 설명하지 못한 Register Website URLs 단계를 마저 설명하자면,

Domains and Subdomains 에는 ngrok 가 부여해준 도메인 주소를 입력하고, Return URLs 에는 Redirect URI 정보로 사용할 https://1445-112-175-250-218.ngrok-free.app/login/oauth2/code/apple 입력하면 된다. 

주의할 것은 ngrok 무료 계정인 경우 이 도메인 주소가 고정이 아니라 매번 실행시마다 변경된다는 점이다. 변경될 때마다 애플 개발자센터에서 새로운 도메인을 등록해 주어야 하는 불편함이 있다.