「ngrok」使って簡単にローカル環境を外部に公開【mac用】
こんにちは、プログラマーのだいき(@dotpro_pm)です。
Webアプリケーションを作り終わり、様々なデバイスでデザインがずれていないかやブラウザごとにバグが発生ないのかを確かめるために、テストしていく必要がありますが、そのテスト環境を整えるのがめんどくさいときありませんか。
正直、僕はWebアプリケーションでちょっとしたテストをするときも、今までherokuを使っていましたが、デプロイするのが面倒し、デザインを少し変更したり、機能を変えたりした時に毎回デプロイする必要があり、かなりの時間がかかって、本当に嫌いな作業です。
そこで今回は、そのような悩みをなくすことができる「ngrok」という無料のツールをご紹介したいと思います。「ngrok」を使うと、localhostで動いているサーバーを外部（LAN外）からアクセスできるになります。
この記事を読むと以下のことを知ることができます。
- 「ngrok」とは何か
- 「ngrok」をインストールする方法
- 「ngrok」の感想
「ngrok」とは何か
「ngrok」とは、localhostで動いているサーバーを外部（LAN外）からアクセスできるになるツールです。
例えば、「http://localhost:3000」が「http://c3f4avrc.ngrok.com」になって公開されてるイメージです。
「ngrok」をインストールする方法
「ngrok」をダウンロード
macならば、下記のコマンドを実行すると、自動的にツールをダウンロードしてくれます。
$ brew install ngrok
もし、上記のコマンドダウンロードができない場合は、下記のコマンドも実行しましょう。
$ brew cask install ngrok
他にも、「ngrok」からダウンロードすることができます。
「ngrok」を実行
ngrokの後にローカルで起動しているページのポート番号を入れ、以下のコマンドを入力すると起動します。
$ ngrok http 3000
起動に成功すると、以下のような文字列が表示されます。
Session Status online
Session Expires 7 hours, 59 minutes
Version 2.2.8
Region United States (us)
Web Interface http://127.0.0.1:4040
Forwarding http://a6a7d19f.ngrok.io -> localhost:3000
Forwarding https://a6a7d19f.ngrok.io -> localhost:3000
Connections ttl opn rt1 rt5 p50 p90
0 0 0.00 0.00 0.00 0.00 あとは、「Forwarding」に表示されているURLにアクセスしましょう。上の例だと、「http://a6a7d19f.ngrok.io」または「https://a6a7d19f.ngrok.io」にアクセスすると、あなたが作ったWebアプリケーションが表示されるでしょう。
「ngrok」を停止する方法
「ngrok」を停止する方法は、「Cnt + C」を入力すると停止します。
「ngrok」の感想
実際に「ngrok」を使ってみて、デバイスごとにテストするのが驚くほど簡単だということです。今までherokuで細かいテストを行なっていた時間がもったいないと感じるほどです。また、テストを行うことへのストレスもかなり緩和され、作業自体が苦痛ではなくなりました。
デメリットとしては、サーバーとして自分のパソコンを使うため、ある程度スペックが必要になってしまうということです。「MacBook Air」だとパソコンのファンがうるさいほど回り、表示速度も遅い印象を受けました。おそらく、ある程度スペックがあるパソコンならばこのようなことはならないのではないかと思います。
ただ、それを割り引いても「ngrok」はかなりすごいツールだと思います。「ngrok」では、「ngrok」を継続していくために、寄付を募っているので少し考えてみてもいいのではないかと思います。
まとめ
今回は、「ngrok」について記事を書いてみました。「ngrok」は本当に便利なツールなのでぜひ一度使ってみてほしいです。
以上、だいき(@dotpro_pm)でした。
