ngrok

2020-12-16 hit count image

ngrok을 사용하여 외부 환경에서 가상 환경(Guest System)에 접근해 보도록 구성해 보겠습니다.

개요

가상 환경(Guest System)에서 개발을 하다보면 로컬 머신(Host System)에서의 접근 외에 외부 환경/외부IP에서 접근을 해야할 경우가 있습니다. 이때 ngrok를 사용하면 간단하게 환경을 구성할 수 있습니다.

아래에 링크는 ngrok를 테스트하기 위해 앤서블(Ansible)로 만든 라라벨(Laravel)의 가상 환경(Guest System)입니다.

여기서 소개할 ngrok의 사용법은 어디까지나 개발과 테스트를 위한 방법입니다.

앤서블 설정

아래에 링크를 통해 구성한 가상 환경(Guest System)은

아래와 같습니다.

|-- ansible
|    |-- init
|    |    |-- tasks
|    |    |    |-- main.yml
|    |-- docker
|    |    |-- tasks
|    |    |    |-- main.yml
|    |-- laradock
|    |    |-- tasks
|    |    |    |-- main.yml
|    |-- php
|    |    |-- tasks
|    |    |    |-- main.yml
|-- Vagrantfile

여기서 ngrok에 필요한 role 파일을 ansible/ngrok/tasks/main.yml에 추가합니다.

|-- ansible
|    |-- init
|    |    |-- tasks
|    |    |    |-- main.yml
|    |-- docker
|    |    |-- tasks
|    |    |    |-- main.yml
|    |-- laradock
|    |    |-- tasks
|    |    |    |-- main.yml
|    |-- php
|    |    |-- tasks
|    |    |    |-- main.yml
|    |-- ngrok
|    |    |-- tasks
|    |    |    |-- main.yml
|-- Vagrantfile

추가한 ansible/ngrok/tasks/main.yml 파일을 열어 아래와 같이 수정합니다.

---
- name: Unarchive ngrok
  become: true
  unarchive:
    src: ngrok.zip
    dest: /vagrant
  tags:
    - ngrok

실제로 이 role은 파일을 압축 해제만 합니다. 여기에 필요한 파일을 아래에 링크를 통해 다운로드합니다.

또는 우리의 저장소(Repository)에서 다운로드합니다.

다운로드한 파일을 ansible/files에 복사합니다.

위에서 설정한 ngrokrole을 사용하기 위해 ansible/playbook.yml 파일을 열고 아래와 같이 수정합니다.

---
- hosts: localhost
  connection: local
  roles:
    - init
    - docker
    - laradock
    - php
    - ngrok

가상 환경 구동

아래에 명령어를 통해 가상 환경(Guest System)을 구동합니다.

vagrant up

처음으로 가상 환경(Guest System)을 구동하였다면 상당한 시간이 걸립니다. 또한 위에서 추가한 ngrok 설정도 자동으로 진행됩니다.

기존에 우리가 만든 앤서블(Ansible)을 이용하여 가상 환경(Guest System)을 구성한 적이 있는 분은 아래에 명령어를 통해 ngrok 설정을 실행합니다.

# vagrant up
vagrant ssh
sudo ansible-playbook /vagrant/ansible/playbook.yml --tags 'ngrok'

ngrok 실행

위에서 가상 환경(Guest System)을 구성하였다면 아래에 명령어를 통해 ngrok를 실행합니다.

# vagrant ssh
cd /vagrant/
./ngrok http -region=ap 80

그러면 아래와 같은 화면을 볼 수 있습니다.

Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.2.8
Region                        Asia Pacific (ap)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://cf354047.ap.ngrok.io -> localhost:80
Forwarding                    https://cf354047.ap.ngrok.io -> localhost:80

여기서 보이는 Forwarding URL을 사용하여 외부에서 가상 환경(Guest System)에 접속이 가능합니다. 어디까지나 테스트용이므로 개발이나 테스트할 때에만 사용하시기 바랍니다.

완료

앱을 위한 api 서버를 개발할 경우, 위와 같이 ngrok를 사용하면 로컬 머신(Host System)의 가상 환경(Guest System)에서 개발중인 api 서버를 쉽게 이용할 수 있습니다.

위에서 만든 라라벨(Laravel) 가상 환경(Guest System)을 위한 앤서블(Ansible)은 아래에 링크를 통해 확인하실 수 있습니다.

제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!

앱 홍보

책 홍보

블로그를 운영하면서 좋은 기회가 생겨 책을 출판하게 되었습니다.

아래 링크를 통해 제가 쓴 책을 구매하실 수 있습니다.
많은 분들에게 도움이 되면 좋겠네요.

스무디 한 잔 마시며 끝내는 React Native, 비제이퍼블릭
스무디 한 잔 마시며 끝내는 리액트 + TDD, 비제이퍼블릭
[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통
Posts