ngrok을 사용하여 외부에서 로컬 개발환경 localhost에 접근하는 방법을 살펴보겠습니다.
(기본적인 동작은 설치 및 가입 이후 간단한 명령어만 사용하면 되기 때문에 크게 어렵지 않습니다.)
먼저 ngrok에 대해서 설명하자면, ngrok은 로컬 개발환경인 localhost에서 구동 중인 웹 서비스를 외부 인터넷 환경에서 접근할 수 있도록 만들어주는 툴입니다.
Ngrok exposes local servers behind NATs and firewalls to the public internet over secure tunnels.
(ngrok 공식 홈페이지에서는 다음과 같이 설명되어 있습니다.)
웹 서비스를 개발하다 보면 localhost가 아닌 외부 환경에서 개발 중인 서비스에 접근해야 하는 경우가 발생할 수 있습니다. 이때 포트를 열어서 외부에서 접근할 수 있도록 하는 것은 보안상 위험할 수 있고, 그렇다고 해서 AWS(Amazon Web Service) 등 외부 서버에 서비스를 배포하여 테스트하는 것은 서버 세팅 및 환경 설정에 시간이 소비되기 때문에 다소 비효율적일 수 있습니다.
이러한 상황에서 유용하게 사용할 수 있는 것이 바로 'ngrok'인데요.
ngrok은 개발자로 하여금 기존의 localhost 개발 환경을 유지하면서, 외부 인터넷 환경에서 개발 중인 웹 서비스에 접근하는 테스트 환경을 간단하게 지원해주기 때문에 개발자는 서비스 개발에만 집중할 수 있게 해주는 장점이 있는 툴입니다.
(비회원 또는 무료 회원가입을 통해 간단한 터널링 기능을 사용할 수 있으며, 유료 서비스에 가입하면 개인 도메인, IP 제한 등 다양한 기능을 사용할 수 있습니다.)
먼저 다운로드입니다. 위 공식 홈페이지를 통해 각 개발 환경별로 다운로드할 수 있습니다.
또한 mac 환경에서는 brew를 통해 다운로드 받을 수도 있습니다.
(해당 포스팅은 mac 환경에서 brew를 통해 설치하고 터미널을 사용하여 동작시키는 방법을 기준으로 작성되었습니다.)
설치 이후에는 'ngrok --help' 명령어를 통해 사용가능한 명령어들을 볼 수 있습니다.
가장 기본적인 터미널 동작 명령어 'ngrok http (port번호)' 입니다.
8088 포트 번호를 통해 localhost:8088에서 동작중인 웹 서비스를 Forwarding 하여 새로운 주소를 만들어줍니다.
현재 회원가입 없이 비회원으로 다운로드 후 바로 실행하여 사용하고 있는 상태이며, Session Expires 세션 만료 기간을 보면, 기본 2시간이 주어지는데요. 만료 기간이 지나게 되면 포워딩된 주소가 바뀌게 됩니다.
포워딩 이후 지급받은 주소로 연결하였고, 다음과 같은 오류가 발생했는데요.
MVC 웹 서비스를 터미널링하여 테스트하였는데, HTML이 없는 REST API의 경우 실행만으로 사용할 수 있지만, HTML을 사용하는 경우에는 오류 메시지처럼 무료 회원가입 이후 authtoken이 필요한 것 같습니다.
Before you can serve HTML content, you must sign up for a free ngrok account and install your authtoken.
(authtoken의 경우 이메일로 간단한 회원 가입 후 바로 발급받을 수 있습니다.)
토큰을 발급받은 후 'ngrok authtoken (토큰 값)'명령어를 입력하면 Authtoken saved to configuration file: .ngrok2/ngrok.yml 이라는 메시지와 함께 토큰 값이 저장됩니다.
토큰 저장 후 'ngrok http (포트 번호)' 명령어를 통해 다시 포워딩하여 HTML 페이지를 연결한 상태입니다.
이때는 아까 비회원으로 사용할 때와 다르게 Session Expires 세션 만료 기간이 없고, 해당 위치에 Account (Plan: Free)가 되어있는 것을 볼 수 있는데요.
이렇게 무료 회원가입을 통해 사용하게 되면 시간제한 없이 터미널링을 사용할 수 있게 됩니다.
< ngrok 홈페이지 >
ngrok - secure introspectable tunnels to localhost
@Botto ngrok, probably the best tool I have started to use for my webwork since firebug also great support
ngrok.com
'Programming > Web' 카테고리의 다른 글
| 구글 클라우드 플랫폼 GCP 무료 서버 생성하기(22년 6월 기준) (0) | 2022.06.20 |
|---|---|
| 구글 클라우드 플랫폼(GCP) 프로젝트 삭제하는 방법 (0) | 2022.06.19 |
| 동기와 비동기, 블로킹과 논블로킹 개념 정리 (0) | 2021.12.28 |
| 디자인 패턴 - 퍼사드 패턴 (Facade Pattern) 개념과 예시 (0) | 2021.12.16 |
| Apache Log4j2 치명적 취약점, 해결방안은? CVE-2021-44228 (0) | 2021.12.12 |