以下では、ngrokのダウンロードから具体的な使い方まで解説しています。
ngrokを使うための準備
ngrokの公式サイトにアクセスして画面右上の「SIGN UP」からログインします。
ダウンロードページからngrokをダウンロードします。
Authページから「Authtoken」を取得します。Authtokenはこの後使いますので、テキストエディタ等にコピーしておきましょう。
ダウンロードしたファイルを解凍して、ngrok.exeを開きます。
コマンドを入力して、Authtokenを紐付けます。
※<Authtoken>の部分は先ほど取得したAuthtoken文字列に置き換えてください。
1 | $ ngrok.exe authtoken <Authtoken> |
以上で準備は完了です。
ngrokの起動方法
ngrok.exeを開いて、コマンドを入力します。
1 | $ ngrok.exe http <ポート番号> |
ngrokの終了する時は「Ctrl + C」を押します。
具体的な使用方法は以下で解説します。
具体的な使用方法
Node.jsがインストールされていることが前提です。
手軽にローカルサーバを起動できる「http-server」をインストールします。
1 | $ npm install http-server -g |
testディレクトリの中にindex.htmlを作成します。
1 2 3 4 5 6 7 8 9 | <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> </head> <body> <h1>Hello World!</h1> </body> </html> |
testディレクトリに移動してローカルサーバを立ち上げます。
1 | $ http-server |
ブラウザで「http://localhost:8080/」を開きます。
「Hello World!」の文字が表示されれば成功です。
ローカルサーバのポート番号を覚えておきます。上のURLでは「8080」がポート番号です。
次に、ngrok.exeを開いて以下のコマンドを入力します。
1 | $ ngrok.exe http 8080 |
このような画面が表示されます。
黄色で囲んだURLをブラウザで開いてみます。
※URLはngrokを立ち上げる度に異なります。
ブラウザに「Hello World!」が表示されれば成功です。
次に、ご自身のスマートフォンで先ほど開いたURLにアクセスしてみましょう。
「Hello World!」が表示されましたか？
僕はスマートフォンで表示された時、けっこう感動しました。
ngrokを使うとローカル環境で作ったものをサーバにアップロードしないで別の端末からアクセスできるようになります。もちろん、ローカル環境と同じネットワークでなくてもアクセス可能です。
