この記事では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とパスワードにおきかえてください。