[macOS & Windows] XAMPPなどのローカルWEB環境を別ネットワークからも参照できるように外部公開できる「ngrok」が超絶便利

ローカル環境で色々と作業をしているとChromeデベロッパーツールではなくスマホの実機で挙動を確認したくなる場面がちょいちょいある。

同一ネットワークに繋げることができる環境にあればIPアドレスでアクセスして終わりなのだが、それが出来ない環境でこの方法が役に立つ。

Windows で ngrok を実行

Windowsの場合、ユーザー登録をして実行ファイルをダウンロードすれば使えるようになるのでとても簡単。

動作確認済みのPC環境

  • Windows 10 Pro 64bit

01. ngrok公式サイト でユーザー登録して実行ファイルをダウンロードする


今回はGoogleアカウントで登録


Windows用のプログラムをダウンロード


ダウンロードしたファイルを解凍して実行するとコマンドプロンプトが開かれ、こんな感じの画面になる。
どうやらココで ngrok.exe http 80 と実行すれば良さそう。

02. ローカルWEBの準備をする

今回は xampp を例にしていますが、Docker でもok。


xampp のコントロールパネルを立ち上げ Apache を Start

htmlファイルは SublimeTextEmmet (Ctrl + E)で html5 コードを作成したものを xampp の htdoc 配下に設置

PCから http://localhost/ にアクセスしてページが表示されることを確認

03. ngrok.exe を立ち上げて、コマンド「ngrok.exe http 80」を実行

コマンド「ngrok.exe http 80」を実行後に発行される「https://xxxxx.ngrok.io」というアドレスにアクセスすると、同一ネットワークに接続していないスマホからもアクセスが可能になる


アクセス状況はリアルタイムで更新される様子


終了したいときは「Ctrl+C」で処理を抜けれる

04. ngrok.exe を実行せずとも、コマンドプロンプト内であればいつでもngrokコマンドを実行できるようにパスを通す


パスを通していない状態で ngrok コマンドを実行するとこのようなメッセージが表示される

パスの通し方(windows)を参考に「winKey + R > sysdm.cpl > 詳細設定 – 環境変数 > システム環境変数 – Path > 新規」へ ngrok.exeが置かれているフォルダのパス を追加する。

そうすると winKey + R > cmd からコマンドプロンプトを立ち上げた画面からも ngrok コマンドが有効になる。

Mac で ngrok を実行

基本は Windows と同じで、ユーザー登録後にプログラムをダウンロードして実行すればok。

動作確認済みのPC環境

  • macOS Catalina (バージョン 10.15.2)、メモリ: 8GB

01. ngrok公式サイト でユーザー登録して実行ファイルをダウンロードする


ダウンロードしてターミナルを立ち上げただけだと ngrok コマンドは反応しない

mac では先に ngrok コマンドを有効化しておいた方が都合が良いので、次のステップで対処する。

02. 解凍した ngrok ファイルを /usr/local/bin に配置して ngrok コマンドを有効にする

Finder で commnad + shift + G(フォルダへ移動)>「/usr/local/bin」で素早く移動可能。

03. Macに入ってるApacheでローカルWEBサーバを起動する

  • sudo apachectl start (Apacheを起動する)
  • sudo apachectl stop (Apacheを止める)

ターミナルを起動して上記のコマンドを実行すると、Finder > commnad + shift + G(フォルダへ移動)>「/library/webserver/documents」のフォルダ内にあるファイルが公開されるようになる。

04. ターミナルから「ngrok http 80」コマンドを実行

コマンド「ngrok http 80」を実行後に発行される「https://xxxxx.ngrok.io」というアドレスにアクセスすると、同一ネットワークに接続していないスマホからもアクセスが可能になる


終了したいときは「Control+C」で処理を抜けれる

参考

Share