Linux・Ubuntu

ローカル環境を外部に公開できるngrokのインストール方法・使い方・セキュリティ対策

投稿日: yuis

https://yuis.xsrv.jp/data/w5p1K3dDvXHFpQsiFjTYCtnsm9E1j6dL.png

ngrokは、ローカル環境の開発段階のウェブサイトやウェブサービス、ウェブアプリをインターネットに公開し、誰でもアクセス可能な状態にすることができる、Linux・Windows・Macで動作するコマンドラインツールです。
ngrokでは、コマンドライン上でサーバーなどを立てて、友達などがアクセスできるようにしたい、自分が外出中に見れるようにしたい、webhookなどのデバッグに使用したい、といったことが可能となります。

今回はngrokのインストール方法、使い方、セキュリティ対策方法まで詳しく解説していきます。

ngrokのインストール

ngrokのインストール方法は3通りあります。ただし、私の環境で成功した方法は1つだけでした。最後のコマンドがそれです。また、3つ目が一番後述するエラーもでにくいやり方なので、こちらのインストール方法を推奨します。

# npmでインストール
sudo npm install ngrok -g

# aptでインストール
sudo apt update ; sudo apt-get install ngrok-client

# 直接インストール
wget https://bin.equinox.io/c/4VmDzA7iaHb/ngrok-stable-linux-amd64.zip
unzip ngrok-stable-linux-amd64.zip

npmおよびaptでインストールした場合、コマンドパスにngrokコマンドが通るため、ngrokコマンドにて実行が可能です。
直接インストールされたngrokを使う場合、./ngrokで解凍された実行ファイルを実行する形でコマンドを実行できます。

ngrokを手動でダウンロードしたい場合は、以下より可能です。

ngrok – download

上記のwgetでは”Linux”のwgetファイルをダウンロードしています。ほとんどのLinuxマシンであれば、このファイルで問題ありません。
その他のディストリビューションやオペレーティングシステムは以下の通りです。

  • Mac OS X
  • Linux
  • Mac (32-bit)
  • Windows (32-bit)
  • Linux (ARM)
  • Linux (ARM64)
  • Linux (32-bit)
  • FreeBSD (64-Bit)
  • FreeBSD (32-bit)

ngrokのコマンドオプション

ngrok --helpを実行すると、オプションの一覧の確認が可能です。使いたいオプションがあるかどうか、一度見てみましょう。

yuis ASUS /mnt/c/_tmp/20200109023429$ ./ngrok --help
NAME:
ngrok - tunnel local ports to public URLs and inspect traffic

DESCRIPTION:
ngrok exposes local networked services behinds NATs and firewalls to the
public internet over a secure tunnel. Share local websites, build/test
webhook consumers and self-host personal services.
Detailed help for each command is available with 'ngrok help <command></command>'.
Open http://localhost:4040 for ngrok's web interface to inspect traffic.

EXAMPLES:
ngrok http 80                    # secure public URL for port 80 web server
ngrok http -subdomain=baz 8080   # port 8080 available at baz.ngrok.io
ngrok http foo.dev:80            # tunnel to host:port instead of localhost
ngrok http https://localhost     # expose a local https server
ngrok tcp 22                     # tunnel arbitrary TCP traffic to port 22
ngrok tls -hostname=foo.com 443  # TLS traffic for foo.com to port 443
ngrok start foo bar baz          # start tunnels from the configuration file

VERSION:
2.3.35

AUTHOR:
inconshreveable - <alan@ngrok.com></alan@ngrok.com>

COMMANDS:
authtoken    save authtoken to configuration file
credits      prints author and licensing information
http         start an HTTP tunnel
start        start tunnels by name from the configuration file
tcp          start a TCP tunnel
tls          start a TLS tunnel
update       update ngrok to the latest version
version      print the version string
help         Shows a list of commands or help for one command

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_de8b27e0-8445-4bb7-9d17-7ebde751d3cd.png

ngrokでトークンを認証する

ngrokをトークンなしで使用すると、ベーシック認証など一部のオプションが使えない状態となります。トークンは取得しなくとも使えますが、取得を推奨します。

トークンの取得は以下から可能です。まずはアカウントを作成します。無料です。

ngrok – secure introspectable tunnels to localhost

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_c077ee41-d9b4-40c1-a6f4-8eabab03ac01.png

次に以下のページでトークンを確認します。

ngrok – secure introspectable tunnels to localhost

そして最後に、以下のコマンドを実行します。 [token]を取得されたトークン文字列に置き換えてください。

./ngrok authtoken [token]
# e.g. ./ngrok authtoken k3h53lh6ll34k5

トークンの登録が正常に完了すると、以下のように表示されます。

Authtoken saved to configuration file: /home/yuis/.ngrok2/ngrok.yml

ngrokの使い方

ngrokの使い方を解説します。

例えばポート8111、localhost:8111でサイトを動かしている場合で、このサイトにインターネットからアクセスしたい、という場合は、以下のようなコマンドとなります。

./ngrok http -auth="user:pw" 8111

以下のようなローカル環境のサイトがあれば、

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_fe1971bc-803b-4c9b-a3b0-950313ee54a4.png

以下のようにインターネットからアクセスが可能となります。

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_81832497-f231-4335-9d92-12cb37c02f8c.png

コマンドラインは以下のように統計情報が表示されています。 これを終了するには、ctrl-Cをタイピングします。

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_9ec34aba-231b-49b6-b777-5cdf87b916ec.png

ngrokでよくあるエラー

ngrokを使っているうちに遭遇する可能性の高い、よくあるエラーをまとめました。

You may only specify one port to tunnel to on the command line, got 2

You may only specify one port to tunnel to on the command line, got 2 エラーは以下のような状況で再現されるようです。

This means you’re trying to run an ngrok2 command with the older ngrok1 client. Either use the old syntax for an ngrok1 client ngrok 80 or make sure you grab the latest ngrok from https://ngrok.com/download

このエラーの意味するところは、あなたが古いバージョンであるngrok1クライアントでngrok2コマンドを動かそうとしていることが原因です。このエラーを解決するには、ngrok1に互換性のある古いシンタックスでコマンドを使用するか、以下のリンクから最新のngrokをダウンロードして使うことです。

use ./ngrok http 80

./ngrok http 80コマンドを使用してください。

You may only specify one port to tunnel to on the command line, got 2 · Issue #304 · inconshreveable/ngrok
You may only specify one port to tunnel to on the command line, got 2 – Google Search

wgetでインストールした方であれば、このエラーが出ることはないでしょう。それ以外の方法でインストールされた方は前述のインストール方法を試してみてください。

You may only specify one port to tunnel to on the command line, got 2
'ngrokd.ngrok.com:443': lookup ngrokd.ngrok.com: no such host

Failed to bind a tunnel with HTTP authentication for an unauthenticated client.

トークンを登録していない状態でngrokにベーシック認証をつけようとすると出るエラーです。

$ ./ngrok http -auth="user:password" 8111
HTTP auth is only available after you sign up.
Failed to bind a tunnel with HTTP authentication for an unauthenticated client.
Sign up at: https://ngrok.com/signup

If you have already signed up, make sure your authtoken is installed.
Your authtoken is available on your dashboard: https://dashboard.ngrok.com

ERR_NGROK_304

https://yuis.xsrv.jp/images/ss/ShareX_ScreenShot_ccab46bf-648b-485d-8888-3a6cd4e659aa.png

ngrokに類似したサービス

当ブログでも何度か紹介している、localtunnelというツールがあります。

localtunnel/localtunnel: expose yourself

もし今回紹介したngrokがうまく動作しない、といった場合は、localtunnelを使ってみることを推奨します。

まとめ

ローカル環境の開発段階のウェブサイトやウェブサービス、ウェブアプリをインターネットに公開し、誰でもアクセス可能な状態にすることができる、Linux・Windows・Macで動作するコマンドラインツール、ngrokを紹介しました。

ngrokのインストール方法はとても簡単です。使い方も比較的シンプルで、アカウント作成もあくまで任意です。ベーシック認証を使ってのセキュリティ対策も可能でしたね。

ngrokは開発段階のサイトのテストを行うのに便利なツールです。ぜひ今後のプログラミング、サービス開発にお役立てください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です