localhost로 가동하는 프로그램을 외부에 공유하는 툴: ngrok, localtunnel

최건우·2023년 3월 27일
0

노마드코더의 영상을 보다가, 유용한 내용이 있어 기록해 둔다.
localhost 환경에서 실행한 애플리케이션을 외부에서 접속할 수 있도록 URL을 만들어 주는 툴들이 있다.

원래 배포를 위해서는 최소 DNS, 가상 머신 등의 자원이 필요하고 이를 적절하게 설정하기 위해 시간을 들여야 한다. 하지만 본문에서 소개하는 툴들을 활용하면, 개발한 내용을 프로덕션에 올리기 전 실제 디바이스에서 실행해 보거나 임시적으로 시연을 해야 할 때 유용하게 사용할 수 있을 것이다.

ngrok

https://ngrok.com/

  • ngrok은 애플리케이션을 인터넷에 호스팅해주는 서비스이다.
  • 명령어가 아니라, 프로그램이다. 따라서 터미널에서 ngrok 로 실행할 수 없고, 해당 프로그램이 위치한 경로로 직접 이동한 후 ./ngrok로 시작해야 한다.

Download & unzip

  1. 다운로드 페이지에 접속한 후, 자신의 OS에 알맞는 버전을 다운로드 한다.
  2. 다운로드된 압축파일의 압축을 풀어준다. 이때, ngrok라는 파일이 생성되는데, 본인에게 가장 편리한 경로로 이동시켜 준다.

Sign-in

  1. ngrok은 Personal authtoken으로 인증을 해야 사용할 수 있기 때문에, 회원가입을 해야 한다. 홈페이지에서 회원가입한 후 로그인을 해 준다.

Add authtoken

  1. ngrok 마이페이지에 접속해서 Personal authtoken을 확인 및 복사한다.

  2. 터미널을 이용해 ngrok 프로그램이 위치한 경로로 이동한다.

$ cd directory_ngrok  # 경로명은 각자 다를 수 있습니다.
  1. 복사한 authtoken을 ngrok 프로그램의 configuration file에 등록한다. 터미널에서 아래 명령어를 수행하면 된다.
$ ./ngrok config add-authtoken <token>   # <token> 부분을 각자 발급된 토큰으로 바꿔넣으세요.

Run

  1. ngrok로 호스팅하려면 먼저 애플리케이션이 실행된 상태여야 함에 주의한다. 배포하고자 하는 애플리케이션을 실행한 다음에, 몇 번 포트에서 실행 중인지 확인한다.
  1. 터미널을 이용해 ngrok 프로그램이 위치한 경로로 이동한다.
$ cd directory_ngrok  # 경로명은 각자 다를 수 있습니다.
  1. ./ngrok http 명령어로 애플리케이션을 외부에 호스팅한다. 이때, 호스팅하고자 하는 애플리케이션이 실행되고 있는 포트 번호를 함께 입력한다. 만약 애플리케이션이 3000번 포트에서 실행되고 있다면, 3000을 입력한다.
$ ./ngrok http 3000    

그러면 터미널이 아래와 같이 변하면서, 현재 ngrok에 의해 실행된 애플리케이션의 정보가 나온다. Forwarding은 https 주소를 나타내며, 이 링크를 통해 애플리케이션에 접속할 수 있다.

ngrok이 제공해 준 링크를 클릭하면, 최초에 다음과 같은 화면이 등장한다. 여기서 Visit Site 버튼을 눌러주면, 잠시 로딩되다가 애플리케이션으로 이동한다.

ngrok으로 애플리케이션을 실행하는 동안, Http 요청 로그를 확인할 수 있다. 아래의 ngrok 실행 화면에서 Http Requests라고 된 부분을 통해 확인할 수 있고, 더 자세한 로그는 Web Interface127.0.0.1:4040로 접속하여 확인할 수 있다.

Localtunnel

https://github.com/localtunnel/localtunnel

  • localtunnel은 node.js 기반의 오픈소스 라이브러리이다.
  • 따라서 설치 시 npm 또는 yarn이 필요하다.

installation

# Globally
npm install -g localtunnel

# As a dependency in your project
yarn add localtunnel

Run

localtunnel은 프로그램이 아니다. 그래서 전역 설치를 했다면 아무 경로에서나 할 수 있고, 프로젝트의 dependency로 설치했다면 프로젝트 경로에서 바로 실행할 수 있다.

  • 프로젝트를 실행한 상태에서, 다른 터미널을 켜서 다음 명령어를 실행한다. 그러면, 접속 가능한 url이 나온다.
  • 또한, 기본 제공되는 도메인명이 마음에 들지 않으면, 사용자가 custom subdomain을 설정할 수 있다. subdomain argument에 원하는 도메인명을 전달하면 된다.
  • 제공된 URL을 브라우저에 입력하면, 최초에 다음과 같은 화면이 등장한다. Click to Continue 버튼을 누르면, 애플리케이션으로 이동한다.




출처: https://www.youtube.com/watch?v=0lUJvVqSEkY

profile
부족한 경험을 채우기 위한 나만의 기록 공간

0개의 댓글