WEB開発備忘録

Ngrok / Windows8+VMPlayer(NAT)でWebhook開発

Webhookの開発にローカル開発環境でもデバッグを行えるよう、開発環境を調整しました。

端的に言えば「ngrok」というツールを使用して、グローバルなホスト名をローカルPCに転送出来るようにしました。
加えて、ローカル開発環境が「VMPlayer」を「NAT」で使用していたため
ローカルのゲストOS(VM)に外部から接続出来るよう調整しました。
→ MacのVirtualBoxなどの情報は大量にネット上に溢れていたのですが、意外にWindowsの情報は少なかったので、メモを備忘録として残しておきます。

[前提] 開発環境はwindows8/VMPlayer

 

(1).ngrokのダウンロード・インストール・セットアップ

まずはngrokを入手します。Googleアカウントでアカウント作成出来ました。
https://ngrok.com/

自分のクライアントOSに併せて入手します。私はwindowsです。
1.ngrokを入手

 

適当な場所に解凍します。exeファイルが現れます。
2.ngrock実行ファイルを入手

 

このままでは使えません。認証を行います。
まずは認証トークン(authtoken)を入手しましょう。
2-2.認証トークンを入手

 

exeを実行して認証しましょう。
exeをクリックするとコマンドプロンプトが立ち上がります。

[prompt] ngrok.exe authtoken 認証トークン

認証が済めば使用可能になります。
以下のようにコマンド入力します。マスクしているのはローカルで転送したいポート番号です。
仮に「80」とします。

[prompt] ngrok.exe http 80

そうするとこんな風にngrokのサブドメインとしてホストが自動生成されます。

Version 2.2.8
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://adareraera.ngrok.io -> localhost:80
Forwarding https://adareraera.ngrok.io -> localhost:80

で、http://adareraera.ngrok.io にアクセスすると自分のローカルPCの指定したポート(この場合80番)にトンネルされるという訳です。

 

(2).VMPlayer(NAT)のインターネット開放

ローカルへ転送してくれても、「VMPlayer」が「NAT」接続になっているならば「localhost」でゲストOSには接続出来ません。
今回はここが結構苦労しました。

 

2-1.ポート転送の設定

vmplayerのクライアントからゲストへのポート転送設定は「vmnetnat.conf」ファイルで行います。
ファイルの場所は「C:\ProgramData\VMware」です。
この「C:\ProgramData\VMware\vmnetnat.conf」に以下のように記述を加えます。

[incomingtcp]
クライアントで開放するポート = ゲストOSのIPアドレス:ngrokで指定した転送ポート
たとえば
80 = 192.168.133.3:80

 

2-2.windowsのポート開放の設定

windowsのポートを開放する必要があります。
※ セキュリティのリスクがあります。必要時のみ開放して、不要時は閉じましょう。

まずはWindowsファイアウォール設定画面を表示します。

左サイドメニューより「詳細設定」をクリックします。

 

表示された詳細設定画面で左メニューの「受信の規則」、次に右サイドメニューの「新しい規則」をクリックします。

「新しい規則」を右サイドメニューからクリック

 

「ポート」を選択します。

開放する「ポート」の”種類”と”番号”を指定します。

 

接続を許可します。

 

ngrokからの転送を許可しますので、パブリックからも接続を許可しましょう。

 

識別しやすい名前をつけて完了です。

 

開発時以外、不要な時はまめに設定を無効化しましょう。

 

 

———-
これでngrokで生成されたURLにアクセスすると、あなたのローカルのVMPlayerにNAT接続で立ち上げられたOSへアクセスされるようになりました!
めでたしめでたし。。。