これを読めば思い出す

漫画好きWebデザイナーのTipsブログ

Web開発

ngrokでローカル環境を外部公開してテストに活用する

XAMPPやDockerなどのローカル環境下で開発を進める中で同一ネットワーク外の実機でテストしたいときに使える「ngrok」（エヌジーロック）の使い方について解説します。

スマホで見る

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公式サイト でユーザー登録して実行ファイルをダウンロードする


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


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


ダウンロードしたファイルを解凍して実行するとコマンドプロンプトが開かれ、こんな感じの画面になる。
どうやらココで 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」というアドレスにアクセスすると、同一ネットワークに接続していないスマホからもアクセスが可能になる


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


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

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」というアドレスにアクセスすると、同一ネットワークに接続していないスマホからもアクセスが可能になる


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

参考

Share