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 Syste)を構成した方は下記のコマンドで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で開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts