[ngrok] localhost를 외부에서 접속할 수 있게 해주는 툴.

이전부터 유용하게 써왔던 도구 이지만,

막상 생각할려면 이름을 까먹어서 이참에 리뷰해봅니다.

 

 

 

언제 사용될까?

서버를 컴퓨터에서 구동하면 주로

127.0.0.1:8080 또는 localhost:8080 이런 웹 서버 주소로 만들어지게 됩니다.

로컬 주소다보니 외부 컴퓨터에서는 찾을 수 없는 서버 주소이죠.

그럴때 외부 서버가 찾을 수 있는 dns를 만들어주며 연결도 가능한 도구 입니다.

 

 

 

ngrok를 사용하기 전에는 어떻게 했을까요?

물론 지금도 사용하는 방법이긴 하지만,

1) 로컬 네트워크에서 내 아이피 주소를 찾고 (ex. 192.168.0.11)

2) 공유기에 접속해서 내 주소를 포트포워딩을 하거나, DMZ을 해줍니다.

2-1) 그리고 또 다른 공유기로 가서 또 포트워딩을 하거나 DMZ해제 해주고..

3) 마지막으로 외부 ip를 알아내서, 다른 서버에 알려주곤 했습니다.

4) 다른 서버에 ip를 알려줄땐 속살을 들키는 느낌이라 꺼림직할땐, DNS를 신청해주고 세팅하고 

5) dns주소를 알려주곤 했습니다 (ex.www.my-com.com)

한마디로 192.168.0.11에 접속할 수 있게 하기 위해 여러 과정을 거친것이죠.

 

 

ngrok은 어떻게 작동하는 걸까요?

ngrok 공식사이트

로컬 컴퓨터의 네트워크 환경과 글로벌 인터넷 환경 사이에서 연결해주는 역활을 해줍니다.

 

 

 

ngrok은 어떤 환경에서 사용할 수 있나요?

 

 

 

MacOS에서 사용방법

이전엔 조금 더 복잡했지만, ngrok이 클라우드를 지원하고부터 더 쉽게 변경되었습니다.

작업하기전 homebrew를 먼저 설치해주세요.

 

1.  홈페이지(ngrok.com)에 접속해서 oauth 로그인(구글 로그인)을 먼저 해줍니다.

2. 대쉬보드 페이지(dashboard.ngrok.com)로 이동

3. Getting Started > Setup & Installation 클릭

4. 적용하려고 하는 os (platform) 선택

 

5. 터미널 앱 실행후 아래 있는 명령어를 입력합니다.

$ brew install ngrok/ngrok/ngrok
$ ngrok config add-authtoken ************************************

(********* 은 개인 코드를 적어야 합니다. 개인코드는 홈페이지에서 확인 할 수 있습니다.)

 

6. 그리고 터미널에 ngrok을 통해서 외부에서 접속하게 만드록 싶은 포트번호를 적습니다.

$ ngrok http 80

localhost:80 서버 주소를 ngrok을 통해서 외부에서 접속하게 만들려면, "$ngrok http 80"을 입력합니다.

 

7. 결과화면

터미널에 적힌 화면을 보면, japan 지역으로 세팅되었고

Forwarding을 보시면 ngrok에서 생성된 주소로 접속하면, localhost 80포트로 접속할 수 있다고 알려줍니다.

 

이제 forwarding에 적힌 ngrok주소로 접속하면 끝 입니다.

 

 

 

 

추가로 

http://127.0.0.1:4040 으로 들어가면 ngrok으로 

들어가고 나간 요청들을 inspect로 볼 수 있어요!

 

 

 

결론

로컬개발하고 webhook을 받아야 할때, 고민하지말고 ngrok 써보세요~!