MEMO

[ngrok] localhost 외부에서 접속하기 (Windows)

NPC 2021. 7. 22. 23:50

 

 

ngrok - secure introspectable tunnels to localhost

@Botto ngrok, probably the best tool I have started to use for my webwork since firebug also great support

ngrok.com

 

 

ngrok이란?

보통 개발 단계에서는 개발 환경을 로컬에 구축한다.
하지만 이것을 배포 단계 이전에 잠시 외부로 배포하고 싶을 때 ngrok을 사용하면 된다.

ngrok은 간단히 말해 외부에서 로컬에 접속할 수 있도록 하는 터널링 프로그램이다.

ngrok을 사용하면 'http://localhost:[포트번호]/[프로젝트명]/[파일명]' 의 형태로 내 로컬에서만 확인할 수 있던 페이지를
'http://[포워딩 url]/[프로젝트명]/[파일명]' 이렇게 해서 타인도 볼 수 있게 된다.

사용 방법은 매우 간단하다.

 

 

ngrok 사용 방법

1. ngrok 회원가입

먼저 회원가입을 해야 편하다.
깃허브나 구글로도 가입 가능하다.

 

 

2. ngrok 설치

로그인 후 저기 되게 누르고 싶게 생긴 'Download for Windows'를 클릭한다.
그럼 'ngrok-stable-windows-amd64.zip' 파일이 다운받아진다.
다운받은 후 'ngrok.exe' 파일을 압축 해제한다.

 

 

3. ngrok.exe 실행

이렇게 사용 예시나 명령어 등이 뜨고 제일 아래 'C:\Downloads>'가 활성화돼있다면 성공이다.

 

 

4. 명령어 입력 - ① authtoken

여기에 가면 본인의 Authtoken을 확인할 수 있다.
이걸 복사한 뒤 ngrok.exe에 입력하면 발급받은 포워딩 url을 세션 만료 없이 사용할 수 있다.
단, ngrok.exe를 종료한 뒤 재실행하면 새로운 포워딩 url이 발급된다.

ngrok.exe로 돌아와서 'ngrok.exe authtoken [Authtoken]'을 입력한다.
그럼 이렇게 ngrok.yml에 AuthToken 정보가 저장된다.

 

 

5. 명령어 입력 - ② http

이어서 사용 중인 http 포트를 'ngrok.exe http [포트번호]' 혹은 'ngrok http [포트번호]'의 형태로 입력한다.
나의 경우 8090 포트를 사용 중이기 때문에 'ngrok.exe http 8090'을 입력했다.
그럼 다음과 같은 창으로 이어진다.

생성된 포워딩 url을 사용하면 localhost로 배포 중이던 페이지를 다른 사람들도 확인할 수 있게 된다.
화면 하단 HTTP Requests로 로그를 모니터링할 수 있다.

 

 

실행 결과

접속이 잘 된다.
정말 혹시나 내 컴퓨터여서 잘 되는 걸수도 있으니 휴대폰으로도 해봤다.

휴대폰으로도 잘 된다.

다만 서버가 꺼져있을 경우에는 연결되지 않고 이런 페이지가 뜬다.

뭐 간단히 요약하자면 '우린 잘했는데 너네 문제니까 연결 잘 됐나 확인해봐'라는 것이다.

 

 

아쉬운 점

1. ngrok.exe를 껐다가 다시 실행하면 주소가 바뀐다.
2. ngrok.exe와 톰캣이 실행 중이어야 한다.

그래서 배포 단계에서 사용하기보단 개발 단계에서 잠시 사용하는 것이 좋을 듯하다.
AWS EC2를 이용해서 어떻게 해볼 수도 있을까?

일단 ngrok 사용법은 끝이다.