[ngrok] 무료로 내 로컬 웹서버 배포하기 | reverse proxy, local 터널링

내가 만든 웹페이지를 다른 사람들에게 보여주고 싶을 때가 있다.

원래는 AWS나 다른 클라우드 플랫폼에서 내 서버를 배포하여야 하는데,

그 정도까진 하고싶지 않은... 뭔지 알죠.., 

 

이럴때는 reverse proxy 서비스를 이용하여 

나의 로컬서버에 다른 사람들이 접속하도록 만들 수 있다. 

 

사용자와 서버간의 중개자 역할을 하는 서버를 reverse proxy라고 하는데,

나는 reverse proxy를 사용하기 위해 ngrok이라는 솔루션을 사용하려 한다. 

ngrok은 계정마다 하나의 무료 static 도메인을 제공하기 때문에 

별도의 비용없이 진행할 수 있다.

What is ngrok? | ngrok documentation

 

---

ngrok 설치

나는 Windows11 환경에서 ngrok 설치를 진행할 것이다. 

다른 환경의 설치 방법은 아래 공식문서를 참조하길 바란다. 

Download ngrok

---

choco 설치

윈도우에서는 위에 링크에서 파일을 다운로드 받거나 choco를 사용하여 ngrok을 설치할 수 있다.

근데 파일을 다운받으니 아래와 같이 바이러스가 감지되었다고 떠서 어쩔 수 없이 choco로 설치하였다. 

 

choco란 윈도우의 패키지매니저로 명령어를 통해 패키지를 관리할 수 있도록 도와준다. 

PowerShell을 관리자 권한으로 실행한 후 아래 명령어를 입력한다. 

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

 

choco -v 명령어로 choco가 제대로 설치되었는지 확인한다. 

---

ngrok 설치

choco와 마찬가지로 PowerShell에서 아래 명령어를 사용하여 ngrok을 설치한다

choco install ngrok

 

---

ngrok config 설정

ngrok을 설치한 후 권한을 설정하여야 한다. 

 

ngrok - Online in One Line

 

위의 링크에서 다음과 같은 권한 설정 명령어를 복사한 후 PowerShell에서 실행한다

 

해당 명령어에는 민감한 secret key가 들어있기 때문에 절대 다른 곳에 공개하면 안된다.

---

로컬서버 배포하기

이제 배포하고자하는 서버를 실행시킨 후 Static 도메인을 사용하여 배포해보자. 

나는 아래와 같이 nextJS 서버를 배포해보려고 한다. 

 

static domain 발급

이제 배포할 Static domain을 발급받아야 하는데, 권한 설정 명령어를 복사한 곳 아래에 배포 명령어가 있다. 

 

저 명령어를 복사해 PowerShell에서 실행하면 되는데, 실행하기 전 아래와 같이 배포하고자하는 포트로 수정을 하여야 한다. 

내 로컬 웹서버가 3000번 포트에서 실행되고 있으면 80 대신 3000을 써야 한다. 

ngrok http --url=<ngrox static domain> 3000

 

실행해보면 발급받은 도메인이 내 로컬호스트:3000과 연결되어있는 것을 확인할 수 있다. 

 

브라우저에서 해당 도메인에 접속하고 내 로컬 서버가 뜨는지 확인하면 된다.

---

ngrok을 종료하면 해당 도메인과의 연결이 종료된다. 

만약 상시로 내 서버를 배포하고 싶으면 ngrok이 아닌 AWS같은 클라우드 서비스를 이용하는 것이 좋다. 

하지만 개발하는 동안만 배포해야하는 상황이라면 ngrok이 좋은 선택지가 될 수있다.