개요
가상 환경(Guest System)에서 개발을 하다보면 로컬 머신(Host System)에서의 접근 외에 외부 환경/외부IP에서 접근을 해야할 경우가 있습니다. 이때 ngrok를 사용하면 간단하게 환경을 구성할 수 있습니다.
아래에 링크는 ngrok를 테스트하기 위해 앤서블(Ansible)로 만든 라라벨(Laravel)의 가상 환경(Guest System)입니다.
여기서 소개할 ngrok의 사용법은 어디까지나 개발과 테스트를 위한 방법입니다.
- ngrok 공식 사이트: https://ngrok.com/
앤서블 설정
아래에 링크를 통해 구성한 가상 환경(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은 파일을 압축 해제만 합니다. 여기에 필요한 파일을 아래에 링크를 통해 다운로드합니다.
- ngrok 다운로드 사이트: https://ngrok.com/download
또는 우리의 저장소(Repository)에서 다운로드합니다.
- laravel-devtool github: laravel-devtool
다운로드한 파일을 ansible/files에 복사합니다.
위에서 설정한 ngrok의 role을 사용하기 위해 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)은 아래에 링크를 통해 확인하실 수 있습니다.
제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다!
앱 홍보
Deku가 개발한 앱을 한번 사용해보세요.Deku가 개발한 앱은 Flutter로 개발되었습니다.관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.














![[심통]현장에서 바로 써먹는 리액트 with 타입스크립트 : 리액트와 스토리북으로 배우는 컴포넌트 주도 개발, 심통](https://img1c.coupangcdn.com/image/affiliate/banner/7cba8cb0601eebaf88a17a0c3cf65a63@2x.jpg)