ngrokでローカル環境を外部公開してテストに活用する
XAMPPやDockerなどのローカル環境下で開発を進める中で同一ネットワーク外の実機でテストしたいときに使える「ngrok」(エヌジーロック)の使い方について解説します。
スマホで見る
目次
ngrokでローカル環境を外部公開してテストに活用する
本ページ内のコマンドまとめ
コマンド | 解説 |
---|---|
ngrok.exe http 80 ngrok http 80 |
ポート80で動作している環境に対してngrokでトンネルを作りアクセス可能にする |
ngrok http -host-header="127.0.0.1:8000" 8000 | Dockerで動かしているWordPress環境(http://127.0.0.1:8000)を外部公開したコマンド例 (「ngrok http 80」で思った挙動がされないときにお試しあれ) |
Control + C | 動作中のngrokを停止させる |
sudo apachectl start (Apacheを起動する) sudo apachectl stop (Apacheを止める) |
macOSにプリインストールされているApacheでローカルWEBサーバを起動する (/library/webserver/documents の中身が公開される) |
一度ngrokを使う環境を整えてしまえば基本上記のコマンドで事足りるはず。
そのためのまとめ。
環境構築は下記をご参照ください。
Windows環境で ngrok(エヌジーロック) を実行する方法
Windowsの場合、ユーザー登録をして実行ファイルをダウンロードすれば使えるようになるのでとても簡単。
動作確認済みのPC環境
- Windows 10 Pro 64bit
01. ngrok公式サイト でユーザー登録して実行ファイルをダウンロードする
ダウンロードしたファイルを解凍して実行するとコマンドプロンプトが開かれ、こんな感じの画面になる。
どうやらココで ngrok.exe http 80
と実行すれば良さそう。
02. ローカルWEBの準備をする
今回は xampp を例にしていますが、Docker でもok。
xampp のコントロールパネルを立ち上げ Apache を Start
htmlファイルは SublimeText の Emmet (Ctrl + E)で html5 コードを作成したものを xampp の htdoc 配下に設置
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
アクセステスト
</body>
</html>
PCから http://localhost/ にアクセスしてページが表示されることを確認
03. ngrok.exe を立ち上げて、コマンド「ngrok.exe http 80
」を実行
コマンド「ngrok.exe http 80
」を実行後に発行される「https://xxxxx.ngrok.io」というアドレスにアクセスすると、同一ネットワークに接続していないスマホからもアクセスが可能になる
04. ngrok.exe を実行せずとも、コマンドプロンプト内であればいつでもngrokコマンドを実行できるようにパスを通す
パスを通していない状態で ngrok コマンドを実行するとこのようなメッセージが表示される
パスの通し方(windows)を参考に「winKey + R > sysdm.cpl > 詳細設定 – 環境変数 > システム環境変数 – Path > 新規」へ ngrok.exeが置かれているフォルダのパス を追加する。
そうすると winKey + R > cmd からコマンドプロンプトを立ち上げた画面からも ngrok コマンドが有効になる。
macOS環境で 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」というアドレスにアクセスすると、同一ネットワークに接続していないスマホからもアクセスが可能になる