- Published on
ローカル環境を外部に公開できるngrokのインストール方法・使い方・セキュリティ対策
- Authors
- Name
- Shou Arisaka nyapp.buzz/shou
- short bio
- Z世代の情報技術者。Next.jsで自作SNSを個人開発中。
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
ngrokでトークンを認証する
ngrokをトークンなしで使用すると、ベーシック認証など一部のオプションが使えない状態となります。トークンは取得しなくとも使えますが、取得を推奨します。
トークンの取得は以下から可能です。まずはアカウントを作成します。無料です。
ngrok - secure introspectable tunnels to localhost
次に以下のページでトークンを確認します。
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
以下のようなローカル環境のサイトがあれば、
以下のようにインターネットからアクセスが可能となります。
コマンドラインは以下のように統計情報が表示されています。 これを終了するには、ctrl-Cをタイピングします。
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コマンドを使用してください。
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
ngrokに類似したサービス
当ブログでも何度か紹介している、localtunnelというツールがあります。
localtunnel/localtunnel: expose yourselfもし今回紹介したngrokがうまく動作しない、といった場合は、localtunnelを使ってみることを推奨します。
まとめ
ローカル環境の開発段階のウェブサイトやウェブサービス、ウェブアプリをインターネットに公開し、誰でもアクセス可能な状態にすることができる、Linux・Windows・Macで動作するコマンドラインツール、ngrokを紹介しました。
ngrokのインストール方法はとても簡単です。使い方も比較的シンプルで、アカウント作成もあくまで任意です。ベーシック認証を使ってのセキュリティ対策も可能でしたね。
ngrokは開発段階のサイトのテストを行うのに便利なツールです。ぜひ今後のプログラミング、サービス開発にお役立てください。
15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。
