ngrokとは
ローカルPCで構築中のWebサイトを外部公開できるサービスおよびCLIアプリです。3e26.*****.jp.ngrok.io のように、ngrokが自動生成するURLを使って、外部の人に簡単にアクセスさせることが可能です。
主な利用シーン
- スマホ実機でローカル環境にアクセス
- リモートチームメンバーに共有
- 制作中のサイトを顧客に見せる
ngrokを使えば、テスト用サーバを用意せずに、カジュアルに外部公開できます。
必要条件
ローカルPCでWebサーバが動作していることが前提です。
アカウントの作成
- ngrok公式サイトでアカウントを作成します。GitHubアカウントを使用することで簡単に作成できます。
- アカウント作成後、ユーザ画面にログインします。
クライアントのインストール
Macでのインストール
- ダッシュボードに表示されるコマンドをコピーして、ターミナルで実行します。トークンが自動で埋め込まれているので、そのままコピペするだけでインストールと初期設定が完了します。
WSLでのインストール
Linuxのインストール手順を使います。Macと同様、コピペでインストールが可能です。下記は、パッケージリポジトリを追加する手順が含まれるため少し複雑に見えますが、インストール自体はaptコマンドで行うようになっています。
なお、Linux用Homebrewではインストールできません。
Windowsでのインストール(非WSL)
ngrok公式サイトでは、Chocolatyを使ったインストール手順が提供されており、Macの場合と同様、コピペで簡単にインストールと初期設定を済ませることができます。
Chocolatyをインストールしていない場合は、代わりに、Windowsで広く普及しているWinGetを使ってインストールすることを推奨します。
WinGetでのインストール
winget install Ngrok.Ngrok
もしWinGetがインストールされていない場合は、Microsoft Storeアプリから簡単にインストールできます。
Chocolatyでのインストール
Chocolatyを導入済みの場合は、以下の公式コマンドでインストールするとよいでしょう。
choco install ngrok
ngrokの使い方
以下のコマンドでローカルのWebサイトを外部公開できます。
ngrok http 80
生成されたURL（例: 3e26.*****.jp.ngrok.io）を他のメンバーや顧客に共有できます。公開を停止したい場合は、ctrl + c で停止できます。
稼働状態の確認
稼働中のngrokトンネルの状態は、以下のURLで確認できます。
http://127.0.0.1:4040
永続的な固定URLの利用
永続的な固定URLを利用することもできます。セッションごとにURLが変わる通常の利用とは異なり、一度生成された固定URLは同じものを何度でも使うことができます。
「Claim your free static domain.」をクリックすると、永続的な固定URLが自動生成されます。URLを構成される文字列はランダムに決定されます。
自動生成されたURLが気に入らない場合、何度でも再生成が可能です。有料プランを契約すると、任意のURLを設定できるようになります。
SSHでのトンネル構築
ngrokでは、SSH公開鍵を登録することで、SSHのRオプションを使ってトンネルを実現できます。これにより、ngrokコマンドのインストールが不要になります。
SSH Public Keysのページ内では、SSH公開鍵を登録した後、提供されているコマンドラインをコピペして使うだけで簡単にトンネルを開始できます。
ページ内に書かれているように、以下のコマンドでトンネルを開始できます。
ssh -R 443:localhost:80 v2@connect.ngrok-agent.com http
このコマンドを使用することで、ローカルのポート80をリモートのポート443にリバーストンネリングし、ngrokエージェントを介してトンネルを構築できます。
まとめ
ngrokを使うことで、簡単なコマンド一つでローカル環境を外部に公開できます。