[DevTools] 외부에서 로컬 서버 접속하기 — ngrok

로컬 서버를 띄워놓고 작업중인 내용이 외부 네트워크에선 어떻게 작동하는지 테스트하고 싶을 때가 있다. 외부에서 접속하려면 로컬 서버에서 사용하는 포트를(3000, 8080 등...) 열어야 되는데 보안에 좋지 않고, AWS에 올리자니 번거롭다. 이때 ngrok라는 서비스를 사용하면 된다. ngrok는 방화벽 뒷단에 있는 로컬 서버를 보안 터널을 통해 공용 인터넷에 노출되도록 해준다.

 

Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.

 

실행 방법

---

❶ ngrok 회원가입 및 Authtoken 복사(대시보드 좌측 Getting Started → Your Authtoken)

 

❷ ngrok 설치

brew install ngrok

 

❸ 현재 기기 인증

ngrok authtoken 복사한토큰

 

❹ 로컬 서버 실행 (React 프로젝트 실행)

 

❺ ngrok 터널 실행

# 기본 사용법. 입력한 포트 번호로 터널링
ngrok http 포트번호 

# https 서버를 실행할 때
ngrok http https://localhost:포트번호 

# /var/log 폴더 serve (폴더 경로만 가능)
ngrok http file:///var/log

ngrok http 8080                      # forward ngrok.io subdomain to port 80
ngrok http example.com:9000          # forward traffic to example.com:9000
ngrok http -subdomain=bar 80         # request subdomain name: 'bar.ngrok.io'
ngrok http -hostname=ex.com 1234     # request tunnel 'ex.com' (DNS CNAME)
ngrok http -auth='falken:joshua' 80  # enforce basic auth on tunnel endpoint
ngrok http -host-header=ex.com 80    # rewrite the Host header to 'ex.com'
ngrok http file:///var/log           # serve local files in /var/log
ngrok http https://localhost:8443    # forward to a local https server

 

접속 테스트

---

터널을 실행하면 대시보드 화면이 나온다. Forwarding에 나와있는 주소로 접속해보면 현재 로컬에서 실행중인 React 어플리케이션에 접속할 수 있다. 아래 HTTP Requests 부분에서 접속 현황도 실시간으로 볼 수 있다.

 

터널이 실행될 때마다 새로운 URL이 부여된다. URL을 고정해두고 사용하려면 유료 버전을 써야된다.

 

Web Interface 에 나와있는 주소에서 접속해보면 깔끔한 인터페이스의 대시보드를 제공한다.

 

http://127.0.0.1:4040

 

---

글 수정사항은 노션 페이지에 가장 빠르게 반영됩니다. 링크를 참고해 주세요