ローカルPCのWebサーバーを外部に公開する便利なngrok

投稿日: 2022/09/24

システム開発

ローカルPCで作成したWebページを誰かに見せたいとき、どうすれば良いでしょうか？

サーバーに公開すれば解決！なのですが、中にはそこまでのものではないことが多々あります。

そんなとき重宝するngrok（エングロック）という便利なツールがあり今回はそちらを紹介します。

利用シーン

正式に公開するまでもないものや、公開前の確認で重宝します。

特に後者の実装中で動きを見る段階のときが一番役に立つと思います。

スマホからの動作確認
関係者に動作を見てもらいたいとき
勉強会の報告
マイクラサーバー公開
などなど......

スマホからの動作確認

基本的にはブラウザの標準機能で疑似的にスマホからのアクセスをすることは可能ですが、実機で確認したい場合に使えます。

関係者に動作を見てもらいたいとき

ちょっとした確認であれば、自席に呼んで見てもらうのが普通でしょう。

しかし昨今は関係者がリモートであることが当たり前になってきています。

そんなときURLを送って見てもらうことが可能になります。

勉強会の報告

成果物をサーバーに公開しておくのも良しですが、すぐに閉じるものに労力を払う必要もなくなります。

マイクラサーバー公開

Minecraftで自分が作った世界を公開するために使う方も多いようです。
私はそれをやっていないのでここでは割愛します。

ngrokの導入

アカウント作成（無料）

まずはngrok公式サイトにてアカウントを作成します。（無料）

GithubやGoogleアカウント連携もできるようです。

昔はアカウントを作らなくても利用できたようですが、今は必須みたいですね。

非営利目的で高機能なことをしない限りは無料で利用できます。

有料版もありますのでご興味がある方はどうぞ。

ngrokコマンドダウンロード

アカウントを作成しログインすると、ダッシュボード画面に遷移します。

ここで各種OSにあわせたコマンドファイルをダウンロードします。

zipファイルがダウンロードされますので、任意の場所に展開してください。
お好みによりPATHを通しましょう。

Authトークン登録

コマンドをダウンロードしたら、次は利用するローカルPCにAuthトークンを登録します。

このトークンは他人に見られたりしないようにしましょう。

もしトークンが盗まれたりしたときは、管理画面からトークンのリセットを行うことができます。

登録コマンド

ngrok config add-authtoken XXXXXXXXXX

登録できたら、Windowsの場合はAppDataに、Macの場合はApplication Supportにngrok.ymlというファイルができあがります

Windowsの場合

C:\Users\ユーザー名\AppData\Local\ngrok\ngrok.yml

Macの場合

/Users/ユーザー名/Library/Application Support/ngrok/ngrok.yml

ローカルWebサーバーを公開する

ローカルWebサーバーが立ち上がっている状態で、次のコマンドを実行すると外部に公開することができます。

ngrok http ポート番号

例えば http://localhost で動かしている場合は、

ngrok http 80

となります。

8080、3000、4200などご自身で使っているポートに適宜読み替えてください。

ngrok                                                                                                   (Ctrl+C to quit)
Visit http://localhost:4040/ to inspect, replay, and modify your requests
Session Status                online
Account                       XXXXXXXXXX (Plan: Free)
Version                       3.1.0
Region                        Japan (jp)
Latency                       -
Web Interface                 http://127.0.0.1:4040
Forwarding                    https://XXXXXXXXXX.ngrok.io -> http://localhost:80

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

実行するとこのような画面が出力され、https://XXXXXXXXXX.ngrok.ioの部分に公開されたURLが書き出されます。

公開URLにアクセスし、「Visit Site」ボタンをクリックするとローカルWebサーバーにアクセスすることができます。

公開が終わればCtl + Cで停止することをお忘れなく！

（おまけ）Basic認証

ngrokではランダムなサブドメインが設定されそこそこ長いURLとなりますので、総当たりされたとしてもよほどでない限りは安全な場所となるはずです。

とはいえ、何かの拍子でURLが見つかってしまうことも無きにしも非ずです。

少しでも安全にするために、Basic認証もあわせて行いましょう。

ngrok http --basic-auth="ユーザー名:パスワード" ポート番号

（おまけ）バーチャルホスト

localhost以外のドメインで開発している場合は、設定にngrok.comを追加しましょう。

ただし、オリジナルドメインは有料版となりますのでご留意ください。

以下にapacheの例を示します。

ドメイン設定

<VirtualHost *>
  ServerName example.com

  ...
</VirtualHost>

ngrok http --hostname="example.com" ポート番号

サブドメイン設定

<VirtualHost *>
  ServerAlias example.ngrok.io

  ...
</VirtualHost>

ngrok http --subdomain="example" ポート番号

（おまけ）ssh接続

なんとngrokはhttp接続のみならず、ssh接続もサポートしています。

ngrok tcp ポート番号

大体 22 だと思いますが、ご自身の環境にあわせて適宜読み替えてください。

実行すると以下のような画面が出力されます。

ngrok                                                                                                   (Ctrl+C to quit)
Try our new native Go library: https://github.com/ngrok/ngrok-go
Session Status                online
Account                       XXXXXXXXXX (Plan: Free)
Version                       3.1.0
Region                        Japan (jp)
Latency                       -
Web Interface                 http://127.0.0.1:4040
Forwarding                    tcp://0.tcp.jp.ngrok.io:ポート番号 -> localhost:22
Connections                   ttl     opn     rt1     rt5     p50     p90
0       0       0.00    0.00    0.00    0.00

あとはsshコマンドでログインできるようになります。

ssh ユーザー名@0.tcp.jp.ngrok.io -p ポート番号

セキュリティは十分にお気を付けください。

終わりに

いかがでしたか。

いかんせんローカル環境を公開するため、セキュリティ面には十分に気を付けないといけません。

しかし、正しく運用すると幅が広がることを実感すると思います。

ぜひお試しくださいませ。