構築中サイトのテスト公開に便利、「ngrok」(エングロック)の使い方

ngrokとは

ローカルPCで構築中のWebサイトを簡易な手順で外部公開できるサービスとCLIアプリ(コマンド)。上記スクショの 3e26.*****.jp.ngrok.io というのがngrokが自動生成する外部公開URL。

Windows・Mac・Linux・FreeBSDで動作する。

どういう時に必要？

• スマホ実機でローカル環境にアクセス
• リモート先のメンバーに見てもらう
• 制作中のサイトをカジュアルに顧客に見てもらう

普通はテスト用のサーバを用意してそこに仮設置したりするけど、ngrokを使えば簡単。

利用の前提

ローカルPCでWebサーバが動作していること。Docker・Vagrant・MAMP・Laragon・XAMPP・PHPビルトインウェブサーバなど。VSCodeエディタを使っているなら拡張機能で簡単に導入できる。
※Laragonはngrokが同梱されていて、メニュー操作で簡単に実行できる。
※この記事を最初に投稿した時点ではLaragonやMAMPのユーザは多かったけど今はどうなんだろう・・

利用方法

1. ngrokのサイトを開き、アカウントを作成。GitHubのアカウントがあれば簡単。
2. アカウントを作成したらすぐにユーザ画面にログインできるので、あとはそこに書いてあるとおり。「1. Unzip to install」「2. Connect your account」「3. Fire it up」これだけ。簡単なのでここには手順を書かない。
   ※「1. Unzip to install」に関しては、後述するHomeBrewやScoopを使うと簡単。

ngrok http 80

たったこれだけでローカルサイトを外部に公開できる。

自動的に生成されたURLをチャットやメールなどで相手に渡す。

公開を停止したい時は、ctrl＋cで停止するか、コマンドウィンドウを閉じる。

以上。ここまで読んだらとりあえず使える。

覚えておくと便利

パッケージ管理ソフトを使おう

ソフトウェアを手軽にインストールするためのソフトウェア。たとえばscoopというパッケージ管理ソフトであれば、

scoop install ngrok

これだけで数秒でインストールできる。ダウンロード元を探してダウンロードして解凍してどこかにフォルダー作ってコピーして動作確認したらzipファイルを削除して・・などの作業が必要ない。

pathの設定も自動的にやってくれる。

scoop search ngrok

インストールの際に必要なパッケージ名は上記のようにして調べる。

• HomeBrew - Mac・Linux・WSL2用
• WinGet - Windows・WSL2用
• Scoop - Windows・WSL2用

メジャーなものは上記の3つ。

自動的に生成される設定ファイル

ダッシュボードで提示されている2番目の設定手順「Connect your account」のauthtoken登録を行なうと、PC内に設定ファイルが生成される。コマンドラインのオプションでいろいろできるが、設定ファイルを使うと簡単。

https://ngrok.com/docs#config-default-location
デフォルトでは設定ファイルは .ngrok2 フォルダ内に生成される。.ngrok2フォルダはOSのユーザフォルダ内に生成される。

Windowsの場合は「ファイル名を指定して実行」で .ngrok2 と入力すると一発で開くことができる。

おすすめの設定

authtoken: ****************(伏せ字)********************
region: jp
tunnels:
  site-a:
    addr: 80
    proto: http
    host_header: hoge.local
  site-b:
    addr: 80
    proto: http
    host_header: fuga.local

上記のように書くと、localhost以外のホスト名でサーブしているローカルサイトを簡単に公開できる。

ngrok start site-a

上記のように入力して開始する。

また、region: jpとすることで、ngrokサービスの提供リージョンを日本国内のものに変更できる。多少はレスポンスがよくなるはず。

ngrokをアップデート

ngrok update

scoopを使ってインストールした場合はscoopでアップデートしてもいい。

コマンドの打ち方を忘れた時は

ngrok

ngrokとだけ入力してエンター。ヒントが表示されるので、それを見れば思い出せる。

「EXAMPLES」としていくつか表示されていて、たとえば「ngrok http 80」。こういう使い方に慣れるとコマンドインターフェイスに対する苦手感が少なくなる。コマンドは理屈ではなく手を動かして慣れる。

稼働状態の確認

http://127.0.0.1:4040
上記URLを開くと稼働状態を確認できる。

発行されるURLは毎回変わる

URLは毎回変わる。月5ドルの有償プランにアップグレードすると固定URLを設定できる。

その他1

「2. Connect your account」でauthtokenを登録しなくてもすぐに使えるけど、１分くらいするとコネクションが不安定になる。

その他2

https://dashboard.ngrok.com/tunnel-agents/ssh-keys
SSH公開鍵を登録すると、SSHのRオプションでトンネルを実現できるためngrokコマンドをインストールする必要がない。

ssh -R 80:localhost:80 tunnel.jp.ngrok.com http

たとえば上記のように実行する。でも専用コマンドであるngrokを使うほうが簡単。

その他3

Serveoがよさそうだったけど2019年の秋頃からずっとサービスがダウンしている。共有するホスト名が localhost 決め打ちでよければ localhost.run も便利そう。