Edited at

ngrokを使ってローカルの開発環境を一時的に外部に公開する

More than 3 years have passed since last update.

この記事ではMac OSX(10.10.4)をつかっています。

nmp(2.5.1)を使ってngrokをインストールします。またnpmはインストール済みの前提です。
インストールしているngrokのバージョンは2.0.19です。


はじめに

サイト制作の過程でクライアントにちょっとした確認をしてもらいたいけど、タイミングによってはテストサーバを準備したりアップロードする作業が煩わしい時があるのではないでしょうか。

そんなときはngrokを使うと、いくつかのコマンドを打つだけで自分のローカル環境を外部に公開することができます。

まずはngrokをインストールします。

インストール

$ npm i -g ngrok


ローカルサーバをたてる

このくだりはMAMPなどを使ってローカルサーバを立てる場合は不要です。

$ python -m SimpleHTTPServer

ポート番号を省略すると8000が用いられます。

$ python -m SimpleHTTPServer 8888

ポート番号8888を指定する場合


ngrokの起動

ローカルサーバを立ち上げたらngrokを起動してみましょう

$ ngrok http 8888

ローカルサーバを立てたポートを指定してngrokを起動します。

以下の様な画面になると思います。

Tunnel Status                 online                                            

Version 2.0.19/2.0.19
Web Interface http://127.0.0.1:4040
Forwarding http://decd3d2a.ngrok.io -> localhost:8888
Forwarding https://decd3d2a.ngrok.io -> localhost:8888

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

HTTP Requests
-------------

確認を依頼したい相手に、http://xxxxxxxx.ngrok.ioの部分を伝えます。自分自身のスマホで確認したい時にも便利かもしれません。

終了したい場合はctl + Cを入力。

認証のパスワードを設定したい場合は、公式サイトにメールアドレスの登録を行うことで設定ができます。

登録が済んだらDashboardのmainタブにあるYour Tunnel Authtoken(英数字の長い文字列)をコピーします。

$ ngrok AUTHTOKEN(←ここをコピーした文字列にする)

もう一度ngrokを起動してみましょう。今度は認証も設定します。

$ ngrok http -auth="id:pswd" 8888

「id」と「pswd」の部分を任意のidとパスワードにおきかえてください。


参考にさせていただいた記事

開発用ローカルサーバを立ち上げる方法