LHJ

I'm a FE developer.

윈도우, 맥 로컬서버 외부 기기에서 쉽게 접속하는 방법

25 Sep 2020 » issue

윈도우, 맥 로컬서버 외부 기기에서 쉽게 접속하는 방법

중요!!!!

./ngrok http 포트번호

위와 같은 식으로 ./ 이를 앞에 붙여서 사용하자!
그 이유는 Mac 에선 파일 path가 다르게 인식하기 때문이다! 윈도우랑 달라!!!
그래서 노드js에도 path 모듈이 있는거!!! 상기하자!!!!

ngrok 프로그램 활용

웹사이트나 API 서버 등을 개발할 때 보통은 로컬에 개발환경이 구축되어있으므로 외부에서 접근하려면 외부에서 접속할 수 있는 서버에 올리거나 해야한다.
이는 일반적인 개발 단계이기는 하지만 배포단계가 아닌 개발단계에서 외부에 열어주어야 하는 경우에는 상당히 귀찮은 일이다.
예를 들어 만들고 있는 웹사이트를 기획자나 디자이너한테 공유해서 보여주고 의견을 들어야 한다거나 폰이나 태블릿에서 접속해서 테스트를 해보아야 하는데 같은 네트워크에 접속되어 있지 않다면 수정하고 배포하는 단계가 아주 귀찮아지기 마련이다.

ngrok

ngrok 사이트에는 Secure tunnels to localhost라고 나와있는데, 새로운 개념이라기보다는 방화벽을 넘어서 외부에서 로컬에 접속 가능하게 하는 터널 프로그램이라고 할 수 있다.

사용방법

해당 프로그램은 Mac / Window 모두 지원한다.

우선 window 설치방법부터 설명하도록 하겠다.

  1. 다운로드

  2. 다운로드받은 압축파일을 더블클릭하여 압축을 푼다.
  3. 압축푼 파일을 더블클릭하여 실행한다.
  4. 다음을 명령어를 실행한다.

    이 명령을 실행하면 기본 ngrok.yml 구성 파일에 authtoken이 추가됩니다.
    이렇게하면 더 많은 기능과 더 긴 세션 시간에 액세스 할 수 있습니다.
    실행중인 터널은 대시 보드의 상태 페이지에 나열됩니다.

    ./ngrok authtoken 1hykNFRQ62516cun1cbHuK6Oxj1_83cFQuoGa8CwzTAx99jQJ
    
  5. 서버를 실행하기 위해 다음과 같은 명령어를 입력한다.

    ./ngrok http (외부접속가능하게할 포트번호)
    

여기서 중요한 점은 포트번호를 현재 열려있는 그리고 외부기기로 접속해서 보고싶은 로컬서버 포트번호와 일치시켜야된다는 점이다.

Mac은 다음과 같이 설치하면 된다.

  1. 압축해제 명령어

    unzip /path/to/ngrok.zip
    

나머진 window와 동일하다.