ngrok 활용해서 외부에 로컬 서버 공개 & 터널링 방법 정리

🤷‍♂️ 본론에 앞서

---

프로젝트 개발을 하다 보면 로컬에서 개발 중인 버전을 배포하지 않고 외부에서 접근할 수 있도록 서버를 구축해야 할 일이 있습니다.

예를 들어 외부 협력업체, 거래처에서 개발 중인 버전을 확인하고 싶을 때나 외부에서 테스트를 위해서 외부에서 로컬에 접근을 위한 서버를 만들어야 됩니다.

 

외부에 접근을 위해서 다양한 방법들이 존재합니다.

공유기 설정에서 포트포워딩 방식, 외부에서 접근할 수 있도록 서버를 구축하는 방법 등등... 언급한 2가지 방법은 상당히 까다롭고 시간이 필요한 작업입니다.

위에 두가지 방법 없이 외부에서 로컬을 접속 가능하게 하는 터널 프로그램 ngrok에 대해서 알아보겠습니다.

 

 

 

🤷‍♂️ ngrok란?

---

ngrok은 외부에서 로컬에 접속할 수 있도록 도와주는 터널링 프로그램이며 개발자 친화적이며 명령어로 즉시 외부에서 로컬로 접속할 수 있도록 URL을 만들어주며 REST API 서버 or 프런트 화면도 바로 외부에서 URL 통해서 접근할 수 있다. 

 

 

ngrok는 외부에서 로컬에 접속 가능하게 하는 터널 프로그램이다.

 

 

ngrok 공식 홈페이지

ngrok 무료플랜 장점

1. HTTP/TCP 접속을 위한 랜덤 URL 생성 (외부에서 접근할 수 있도록 돕는 URL)
2. 최대 1개의 ngrok 프로세스
3. ngrok 프로세스당 4개의 터널링 가능
4. 분당 최대 40개의 커넥션

무료플랜을 사용하는 것을 추천드립니다^^

 

🤷‍♂️ ngrok 설치하기

---

ngrok 공식 홈페이지에서 설치 방법을 자세히 설명해줍니다.

Mac OS 기준이며 brew 선행 설치가 되어 있어야 됩니다.

brew 설치방법

1. ngrok 설치

brew install ngrok/ngrok/ngrok //ngrok 설치 명령어

위에 명령어를 입력하면 ngrok 설치된다.

 

2. ngrok 토큰 추가

ngrok는 기본 세션 유효시간 2시간이 존재하며 2시간이 만료되면 ngrok 다시 실행해줘야 합니다.

이러한 불편함을 해결하기 위해서는 ngrok 토큰을 추가해줘야 합니다.

 

 

 

ngrok config add-authtoken "your token" // your Authoken 입력해 주세요.

설치 후

Authtoken saved to configuration file: "your path" //ngrok.yml 파일이 생긴 경로

*꿀팁

“your path”에서 /Application Support/ngrok/ngrok.yml cd 경로 이동 중에 폴더 공백이 포함되어 오류가 발생하는 경우가 있습니다.

 

해결방법

폴더명을 '' 따옴표로 감싸준다.
cd /'Application Support'/ngrok/ngrok.yml

 

3. ngrok 터널링 추가

vim “your path”/ngrok.yml 파일에서 아래의 터널을 추가해 줍니다.

version: "2"
authtoken: "위에 token을 생성하면 자동으로 추가됩니다."

//1개 이상의 터널이 필요하면 아래의 명령어로 여러개의 터널을 추가할 수 있습니다.
tunnels:
  web-3000:
    addr: 3000 //본인의 포트
    proto: http
  web-3003:
    addr: 3003 //본인의 포트
    proto: http

//위에 파일을 저장하고 아래의 명령어를 입력하면 됩니다.
ngrok start --config "your path/ngrok.yml" --all

 

ngrok.yml 입력한 2개의 터널 생성되며 각각에 외부에서 접근할 수 있는 URL 포워딩시킵니다.

 

 

4. ngrok 실행하기

여러 개의 포워딩을 할 때  ngrok.yml 터널 명령어을 작성을  하지만 1개의 터널만 필요하다면 아래의 명령어로 외부에서 접속 가능한 URL을 생성할 수 있습니다.

ngrok http 3000 //로컬 포트는 본인에 맞는 포트를 입력해주세요.

 

로컬 포트 3000을 외부에서 접속할 수 있는 URL을 줍니다.

 

🤷‍♂️ 마지막으로

---

프로젝트를 진행하다 보면 로컬 개발 환경을 외부에서 급하게 접근해야 되는 상황이 왔을 때 ngrok 도구를 활용해서 빠르고 안전하게 외부에서 로컬 개발환경을 접근할 수 있는 효율적인 방법입니다. 

---

 

재밌는 오늘의 띠별 운세 보고 가세요! 

 

 

https://cometruedream.tistory.com/247

[React] Tailwind 한줄, 두줄, 세줄 효과 className 커스텀

 

 

https://cometruedream.tistory.com/243

NestJS Lifecycle (생명주기) 개념

 

 

https://cometruedream.tistory.com/242

리액트 Vite Proxy 활용한 CORS 오류 해결

 

 

https://cometruedream.tistory.com/241

React 폴더구조 FSD 기능 분활 설계 아키텍처

 

 

https://cometruedream.tistory.com/244

쉽게 이해하고 사용할수 있는 Prisma 명령어 정리