노마드코더의 영상을 보다가, 유용한 내용이 있어 기록해 둔다.
localhost 환경에서 실행한 애플리케이션을 외부에서 접속할 수 있도록 URL을 만들어 주는 툴들이 있다.
원래 배포를 위해서는 최소 DNS, 가상 머신 등의 자원이 필요하고 이를 적절하게 설정하기 위해 시간을 들여야 한다. 하지만 본문에서 소개하는 툴들을 활용하면, 개발한 내용을 프로덕션에 올리기 전 실제 디바이스에서 실행해 보거나 임시적으로 시연을 해야 할 때 유용하게 사용할 수 있을 것이다.
ngrok
로 실행할 수 없고, 해당 프로그램이 위치한 경로로 직접 이동한 후 ./ngrok
로 시작해야 한다.ngrok
라는 파일이 생성되는데, 본인에게 가장 편리한 경로로 이동시켜 준다.ngrok 마이페이지에 접속해서 Personal authtoken을 확인 및 복사한다.
터미널을 이용해 ngrok 프로그램이 위치한 경로로 이동한다.
$ cd directory_ngrok # 경로명은 각자 다를 수 있습니다.
$ ./ngrok config add-authtoken <token> # <token> 부분을 각자 발급된 토큰으로 바꿔넣으세요.
$ cd directory_ngrok # 경로명은 각자 다를 수 있습니다.
./ngrok http
명령어로 애플리케이션을 외부에 호스팅한다. 이때, 호스팅하고자 하는 애플리케이션이 실행되고 있는 포트 번호를 함께 입력한다. 만약 애플리케이션이 3000번 포트에서 실행되고 있다면, 3000
을 입력한다.$ ./ngrok http 3000
그러면 터미널이 아래와 같이 변하면서, 현재 ngrok에 의해 실행된 애플리케이션의 정보가 나온다. Forwarding
은 https 주소를 나타내며, 이 링크를 통해 애플리케이션에 접속할 수 있다.
ngrok이 제공해 준 링크를 클릭하면, 최초에 다음과 같은 화면이 등장한다. 여기서 Visit Site
버튼을 눌러주면, 잠시 로딩되다가 애플리케이션으로 이동한다.
ngrok으로 애플리케이션을 실행하는 동안, Http 요청 로그를 확인할 수 있다. 아래의 ngrok 실행 화면에서 Http Requests
라고 된 부분을 통해 확인할 수 있고, 더 자세한 로그는 Web Interface
의 127.0.0.1:4040
로 접속하여 확인할 수 있다.
https://github.com/localtunnel/localtunnel
# Globally
npm install -g localtunnel
# As a dependency in your project
yarn add localtunnel
localtunnel은 프로그램이 아니다. 그래서 전역 설치를 했다면 아무 경로에서나 할 수 있고, 프로젝트의 dependency로 설치했다면 프로젝트 경로에서 바로 실행할 수 있다.
subdomain
argument에 원하는 도메인명을 전달하면 된다.Click to Continue
버튼을 누르면, 애플리케이션으로 이동한다.