HwangSee

221118 TIL | ngrok 사용하여 로컬 컴퓨터 개발 환경을 인터넷으로 공유하기

  • 2022년 11월 18일

오늘 한 일

  • ngrok 적용

ngrok이란?

  • 로컬 컴퓨터 개발 환경을 인터넷으로 공유해주는 툴입니다.
  • 빌드나 배포 없이 로컬에서 구성한 개발 환경을 공유해야 할 때 사용할 수 있습니다.
  • 다운로드 링크 : ngrok - download

  1. ubuntu 터미널에서 ngrok 설치

     curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list && sudo apt update && sudo apt install ngrok

  2. ngrok 회원가입 후 받은 토큰 설정

     ngrok config add-authtoken {토큰}

  3. http 터널링

     ngrok  --scheme=http http 3000 --host-header="localhost:3000"
    • 이제 다음과 같은 포워딩 화면을 확인할 수 있습니다
    • Forwarding의 URL 주소를 입력하면 웹 서비스에 접근할 수 있습니다. 11

  4. 요청이 이루어졌으나 응답을 받을 수 없다는 CORS 에러가 뜰 경우, 크롬 개발자 지원 링크에 접속하여 블락을 해제합니다.

✅ 네트워크 요청을 풀면 보안이 약해지기 때문에 임시 방편입니다. 해당 설정은 테스트 진행 후 설정을 복원하는 것을 추천드립니다.

에러 노트

ngrok http 3000

Forwarding 주소를 공유하면 공유받은 내 로컬 서버로 접근이 가능하다.

하지만 공유한 주소로 접근하면 Invalid Host header 오류가 뜨고 마는데…

33

해결 방법

  • 엔드포인트 변경 https → http
  • host-header를 localhost:3000으로 설정 후 실행
ngrok  --scheme=http http 3000 --host-header="localhost:3000"

수정 하고 보니 CORS 에러가 떠요..

→ 브라우저에서 origin보다 낮은 수준의 네트워크로 요청을 보내는 경우 에러를 발생시키기 때문이다.

  • 브라우저가 크롬일 경우 개발자 지원 링크에 접속하여
  • Block insecure private network requests를 Disable로 변경
  • 네트워크 요청을 풀면 보안이 약해지기 때문에 임시 방편으로 적용합니다.
검색