로컬 서버를 공개 서버로 돌리기 (feat. ngrok)

Minsu·2024년 10월 22일

개요

로컬 환경에서 애플리케이션을 개발하면서, 간혹 로컬 환경 외에서 테스트가 필요한 상황이 생기기도 한다. 아래는 실제 내가 테스트 필요성을 느꼈던 부분이다.

구현한 기능이 카카오 인앱 브라우저와 같이 특수한 모바일 환경에서 잘 동작하는지 확인 필요
설정한 OG(Open Graph)태그가 잘 적용되었는지 확인 필요

이외에도 간혹 실제 모바일 기기의 터치 환경에서 서비스를 바로바로 테스트 해보고 싶을 때가 있다.
이럴 때마다 일일이 배포 후 확인하는 과정을 반복하기에는 비효율적이라는 생각이 들어 더 나은 방법을 찾아보던 중, ngrok이라는 서비스를 사용하면 로컬 서버를 공개 서버로 만들어 외부와 통신 가능하도록 해준다는 것을 알게되었다.

ngrok이란?

ngrok은 로컬에서 실행 중인 서버나 애플리케이션을 외부에서 접근할 수 있도록 만들어주는 터널링 서비스이다. (공식홈페이지에서는 이를 '역방향 프록시'로 소개하고 있다.) 주로 개발 환경에서 로컬 서버를 인터넷에 공개해야 할 때 유용하다. ngrok을 사용하면 고유한 임시 URL을 생성하여 외부에서 로컬 서버에 접근할 수 있으며, 이를 통해 로컬에서 실행 중인 애플리케이션을 다른 클라이언트에서 바로 확인할 수 있게 된다. 주로 외부와의 테스트가 필요한 웹훅, API 서버, PWA 앱 개발 등의 작업에 활용된다.
한마디로 locallhost 주소를 public URL로 만들어 주는 것이다.

장점

간편한 터널링: HTTPS, HTTP, TCP 등 다양한 프로토콜을 지원하며, 특정 포트에 터널을 열어 외부에 쉽게 공개할 수 있다.
보안성: ngrok은 HTTPS 암호화를 통해 안전한 접근을 제공한다.
디버깅: ngrok을 사용하면 트래픽을 캡처하고 디버깅할 수 있는 웹 대시보드를 제공하여 개발 중 발생하는 요청을 모니터링할 수 있다.
간편한 테스트: 외부 API나 웹훅 서비스와의 통합 테스트를 로컬에서 바로 수행할 수 있어 개발 효율성을 높일 수 있다.

ngrok 사용법

ngrok을 사용해 public URL로 접속하는 방법을 알아보자!

설치

Mac 환경에서는 homebrew를 통해 간편하게 설치 가능하다.

brew install ngrok

이외 다운로드 관련 자세한 내용은 Download ngrok을 참고하자.

public url 생성

ngrok 실행
ngrok http 뒤에 사용 중인 포트 번호를 넣어주면 된다.

ngrok http localhost:3000

그럼 터미널에 아래와 같은 내용이 출력된다.

위 내용 중 Forwarding 필드에 찍힌 주소가 public URL이다.
해당 주소로 접속하면 아래와 같이 안내창이 뜨고, Visit Site 버튼을 클릭하면 로컬 서버 기반으로 돌아가는 서비스와 동일한 웹사이트가 뜬다.
해당 URL을 들고 다니면서 원하는 환경에서 링크를 열어 서비스를 실행하고 테스트 할 수 있다.

HTTP Requests 부분을 보면, 200 OK status로 통신에 성공했다는 걸 알 수 있다.

유의사항

당연히 로컬호스트 서버가 실행 중이어야한다.
이렇게 생성된 URL의 세션 유지 시간은 2시간으로 제한된다. 2시간이 지나면 세션이 만료되고 해당 URL은 더이상 사용할 수 없으며, 위에 실행했던 ngrok 명령어를 재실행해 다시 포워딩해줘야 한다.
ngrok에 회원가입 하고 Authentication Code를 발급받으면 세션 만료 걱정 없이 해당 경로를 사용할 수 있다.

Localtunnel

ngrok에 대해 알아보던 중, 그와 유사한 서비스로 Localtunnel이라는 오픈소스 라이브러리가 있다는 걸 알게되었다.
node 패키지라 node + npm 환경이 세팅되어 있어야 사용 가능하다.

ngrok과 Localtunnel의 차이점은 다음과 같다.

무료 버전 사용 시 기능 제한 및 도메인 변경 불가한 ngrok과 달리 Localtunnel은 모든 기능을 무료로 사용할 수 있으며 도메인 변경도 무료로 가능하다.
- ngrok의 경우 무료 버전 기준으로 분당 120회의 tcp 커넥션이 허용된다.
오픈 소스 라이브러리인 Localtunnel과 다르게 ngrok은 상용 서비스이다 보니, 보다 안정적인 서비스를 제공한다. (웹 인터페이스나 디버깅 측면을 고려한다면 ngrok이 더 나을수도 있다.)