Ngrok으로 로컬서버 외부 접근하기

웹 개발을 하다 보면 로컬 서버의 작업을 간단하게 접근해서 테스트하고 싶은 경우가 있습니다.
물론 내부에서 모두 접근하면 베스트지만, 외부 접근이 필요한 경우가 생기는데 (예: 웹훅 테스트) 이런 경우에 사용하는 것이 Ngrok 서비스입니다.

Ngrok 설치

먼저 Ngrok을 설치해야 합니다. Ngrok은 다양한 운영 체제를 지원하기 때문에 자신의 운영체제에 맞는 설치 방법을 선택하면 됩니다.

Windows: Ngrok 공식 사이트에서 Windows용 설치 파일을 다운로드하고 설치합니다.
Mac: 터미널을 열고 아래 명령어를 입력합니다.

brew install ngrok/ngrok/ngrok

Linux: 터미널을 열고 아래 명령어를 입력합니다.

sudo apt-get install ngrok

Ngrok 실행

Ngrok 설치가 완료되면, 로컬 서버를 외부에 공개해보겠습니다. 예를 들어, 로컬 서버가 5000번 포트에서 실행 중이라면, 다음 명령어를 터미널에 입력합니다.

ngrok http 5000

이 명령어를 실행하면 Ngrok이 로컬 서버를 외부에 노출시키고, 터널 URL을 제공합니다. 터널 URL은 보통 https://abc123.ngrok.io와 같은 형태로 생성되며, free 계정의 경우 free라는 도메인이 붙을 수 있습니다.

터널 URL 확인

Ngrok 실행 후 터미널에 표시되는 터널 URL을 확인합니다. 이제 이 URL을 통해 외부에서도 로컬 서버에 접근할 수 있게 되었습니다!

Forwarding                    https://abc123.ngrok.io -> http://localhost:5000

번외 : 웹훅 테스트

이제 외부 서비스에서 웹훅을 설정할 때 Ngrok의 터널 URL을 이용할 수 있습니다. 예를 들어, ClickUp에서 웹훅을 설정할 때 Ngrok 터널 URL을 입력하여 테스트가 가능합니다.

{
  "endpoint": "https://abc123.ngrok.io/webhook",
  "events": [
    "taskCreated",
    "taskUpdated"
  ]
}

웹훅 이벤트가 발생하면, Ngrok을 통해 로컬 서버로 이벤트 데이터가 전달됩니다.

이 글이 여러분의 개발에 도움이 되길 바라요. Happy coding! 😊

레퍼런스

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