ngrok 導入方法 #ngrok

記事にするほどでも備忘録的に投稿

ngrokとは

ローカル環境を動作確認をスマホなどの実機で行うことができる

環境情報

環境はVagrantを使って以下

種類	バージョン
OS	centos6.7

Vagrantファイルの修正

ポートの設定

  # NOTE: This will enable public access to the opened port
-  # config.vm.network "forwarded_port", guest: 80, host: 8080
+  config.vm.network "forwarded_port", guest: 80, host: 1234

※別ですでに8080使ってたので変えました

IPの設定

  # Create a private network, which allows host-only access to the machine
  # using a specific IP.
-  # config.vm.network "private_network", ip: "192.168.33.10"
+  config.vm.network "private_network", ip: "192.168.33.10"

vagrant起動&SSHログイン

$ vagrant up
$ vagrant ssh

Apache,PHPのインストール

$ sudo yum install -y php
$ sudo yum install -y httpd

apacheにphpを対応

$ sudo vi /etc/httpd/conf/httpd.conf

一番下に以下を追加

AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps

Apache起動と自動起動設定

$ sudo /etc/init.d/httpd start
$ sudo chkconfig httpd on

ngrokインストール

最新版をダウンロード

$ wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip

解凍するためにunzipをインストール

$ sudo yum install -y unzip

解凍

$ unzip ngrok-stable-linux-amd64.zip

パスが通ってるディレクトリに移動させる

$ sudo mv ngrok /usr/local/bin

確認

↓こんなん表示されたらOK

$ ngrok -v
ngrok version 2.2.8

疎通確認用のファイルをドキュメントルートに配置する

※ドキュメントルートの設定を確認したい人は↓でDocumentRoot "{PATH}"みたいな設定があるのでそこを確認してください

$ vi /etc/httpd/conf/httpd.conf

ということで今回はデフォルトの設定のままなので /var/www/html配下に配置します。

$ sudo vi /var/ww/html/index.php

ファイルの中身はシンプルに↓

<?php

echo "OK";

疎通確認

192.168.33.10に接続する

↓こんなん出たらOK

ngrok起動

$ ngrok http 80
Session Status                online
Session Expires               7 hours, 59 minutes
Version                       2.2.8
Region                        United States (us)
Web Interface                 http://127.0.0.1:4040
Forwarding                    http://xxxxxxx.ngrok.io -> localhost:80
Forwarding                    https://xxxxxxx.ngrok.io -> localhost:80

Connections                   ttl     opn     rt1     rt5     p50     p90
                              0       0       0.00    0.00    0.00    0.00

上記のようなメッセージが出てくるのでForwardingに記載されているURLにアクセスすると先ほどの画面が表示されたらOK

ngrokを利用するとどの環境からも(URLさえ知っていれば誰でも)アクセス可能なので利用には十分注意してください

ランダムでURLが生成されているとはいえ,悪意あるユーザからのアクセスが可能性としては0ではありません

Basic認証を用いたngrokの利用方法もあるので↓の記事を参考にしてください。
少しでも安全にngrokを使用する(Basic認証)

ngrok 導入方法