ngrokとは？インストール〜公開までの手順まとめ

2023年1月9日

ローカル環境で開発しているものを外部に公開したり、HTTPS環境下で動くようにしたりしたいときはありますよね。

第三者にぱぱっと確認してほしい
APIを使うのにHTTPS通信に切り替えが必要

など。

わざわざサーバー立てて環境作って公開して・・・という手順を踏まなくても、ngrokを使えば簡易的に外部公開できるようになります。
超便利！

この記事ではインストール、基本的な使い方に加え、よく使うオプションについてもまとめました。

ngrokはローカル環境下のコンテンツを外部公開できるツール

ngrok（エングロック）とは、nginxをベースにしたローカル上で稼働しているコンテンツを外部に公開できるサービスです。

ngrokのインストール手順

インストールする方法はいくつかありますが、公式サイトから必要なファイルをダウンロードする方法が確実です。
Windows・Macいずれも手順は同じです。

1. nginxをインストール

nginxをインストールしていない場合は、先にインストールしておく必要があります。

インストールしているか確かめたい場合は、ターミナルで以下のようにバージョン確認すればOK。

$ nginx -v
nginx version: nginx/1.23.3

バージョンが表示されなければ、インストールが必要です。

インストールはhomebrewを使うのが一番簡単でおすすめ。

$ brew install nginx

2. 公式サイトにて会員登録

次に下記URLにて無料で会員登録をしておきます。
GitHubやGoogleでも登録できるのでお好きにどうぞ。

3. システムファイルをダウンロード

ログイン後に表示されるページにてZIPファイルをダウンロードします。

ダウンロードしたら解凍してください。
ngrokというファイルが出現するはずです。

解凍後のファイルはどこにおいても大丈夫なので、任意の場所に配置してください。

4. コマンド実行

ngrokのマイページトップに「Connect your account」という欄があり、認証に必要なコマンドが記載されています。

ターミナル（もしくはコマンド・プロンプト）にて実行してください。

`command not found`とエラーがでて実行できない場合

認証コマンドを実行したときにcommand not found: ngrokとエラーが出る場合は、先程ダウンロード・解凍したシステムファイルへのパスが通っていない状態です。

シェルの設定ファイル（.zshrcなど）にてexport PATH=$PATH:ディレクトリまでのパスを記載してパスを通してください。

export PATH=$PATH:ディレクトリまでのパス

ファイルを編集後、source ~/.zshrcなどで再読み込みするのを忘れずに。

これでngrokコマンドが実行できるようになるので、改めて認証コマンドを実行してください。

自分が使っているシェルは、ターミナルでecho $SHELLを実行すると判別できます。

ngrokを使う基本手順

ngrokは非常に簡単に使えます。
ターミナルで下記を実行するだけ。

$ ngrok http ポート番号

例えば、ローカル環境のhttp://localhost:8000/にて稼働するコンテンツがあるとします。
ポート番号が8000なので、以下のコマンドを実行してください。

$ ngrok http 8000

すると以下のように表示されるはずです。

ngrok                                                                                                                                                       (Ctrl+C to quit)
                                                                                                                                                                            
Join us in the ngrok community @ https://ngrok.com/slack                                                                                                                    
                                                                                                                                                                            
Session Status                online                                                                                                                                        
Account                       ABCDEF123 (Plan: Free)                                                                                                                          
Version                       3.1.0                                                                                                                                         
Region                        Japan (jp)                                                                                                                                    
Latency                       25ms                                                                                                                                          
Web Interface                 http://127.0.0.1:4040                                                                                                                         
Forwarding                    https://XXXXXXXXXXXXXXXX -> http://localhost:8000                                                       
                                                                                                                                                                            
Connections                   ttl     opn     rt1     rt5     p50     p90                                                                                                   
                              0       0       0.00    0.00    0.00    0.00

Forwardingの欄に表示されているURL（上記例でいうとhttps://XXXXXXXXXXXXXXXX）が外部公開用のURLです。

これで準備OKなので、別のデバイス等でアクセスしてもコンテンツが表示されるようになっています。

使い終わったらCtrl + Cで終了しましょう。

外部公開用のURLは毎回変更されます。

ERROR: The account “XXX” may not start an ngrok agent session until the admin’s email address is verified と表示される場合

実行したらERROR: The account "XXX" may not start an ngrok agent session until the admin's email address is verifiedとエラーが出る場合があります。

これはメール認証が完了していないせいです。
会員登録時に入力したメールアドレスに案内のメールが送られているはずなので、メール本文内のURLをクリックして認証を完了させてしまいましょう。

ERROR: Your account is limited to 1 simultaneous ngrok agent session. と表示される場合

無料プランでは同時に複数の処理を実行できません。

ERROR: Your account is limited to 1 simultaneous ngrok agent session. と表示された場合は、他に実行しているものがないか確認してCtrl + Cで終了させてから再度実行してください。

ngrokのよく使うオプション

ngrokには多様なオプションが用意されています。

basic認証をかける

basic-authオプションを利用することでbasic認証を設定できます。

$ ngrok http 8000 --basic-auth='XXXXXX:ZZZZZZ'

XXXXXXはID、ZZZZZZはパスワードです。
任意で指定してください。

パスワードは8文字以上、128文字以下にする必要があります。

リージョンを指定

$ ngrok http 8000 --region ja

エリアはデフォルトでus （United States）に指定されていますが、--regionオプションで変更できます。

us（United States）
eu（Europe）
au（Australia）
ap (Asia Pacific）
sa（South America）
jp（Japan）
in（India）

から選択可能。

スキーム変更

--schemeオプションでhttp・httpsを切り替えることもできます。

$ ngrok http 8000 --scheme http

もしくは

$ ngrok http 8000 --scheme https

で設定してください。

ログファイルを出力

任意のファイル名で、任意の形式でログファイルを出力できます。

$ ngrok http 8000 --log ファイルパス  --log-format フォーマット --log-level レベル

--logで出力するファイルを指定します。

ファイルのフォーマットは--log-formatにterm・logfmt・jsonのいずれかを指定することで変更できます。
もし指定しない場合は、term形式がデフォルトで設定されます。

出力するログレベルは--log-levelで指定。
debug・info・warn・error・critのいずれかが設定でき、デフォルトはinfoとなっています。

具体的には以下のように設定できるかと思います。

$ ngrok http 8000 --log system.log --log-format logfmt --log-level error

その他のオプション

そのほか、指定できるオプションの一覧は下記の通りです。

OPTIONS:
      --authtoken string                 ngrok.com authtoken identifying a user
      --basic-auth strings               enforce basic auth on tunnel endpoint, 'user:password'
      --cidr-allow strings               reject connections that do not match the given CIDRs
      --cidr-deny strings                reject connections that match the given CIDRs
      --circuit-breaker float            reject requests when 5XX responses exceed this ratio
      --compression                      gzip compress http responses from your web service
      --config strings                   path to config files; they are merged if multiple
  -h, --help                             help for http
      --host-header string               set Host header; if 'rewrite' use local address hostname
      --hostname string                  host tunnel on custom hostname (requires DNS CNAME)
      --inspect                          enable/disable http introspection (default true)
      --log string                       path to log file, 'stdout', 'stderr' or 'false' (default "false")
      --log-format string                log record format: 'term', 'logfmt', 'json' (default "term")
      --log-level string                 logging level: 'debug', 'info', 'warn', 'error', 'crit' (default "info")
      --mutual-tls-cas string            path to TLS certificate authority to verify client certs in mutual tls
      --oauth string                     enforce authentication oauth provider on tunnel endpoint, e.g. 'google'
      --oauth-allow-domain strings       allow only oauth users with these email domains
      --oauth-allow-email strings        allow only oauth users with these emails
      --oauth-client-id string           oauth app client id, optional
      --oauth-client-secret string       oauth app client secret, optional
      --oauth-scope strings              request these oauth scopes when users authenticate
      --oidc string                      oidc issuer url, e.g. https://accounts.google.com
      --oidc-client-id string            oidc app client id
      --oidc-client-secret string        oidc app client secret
      --oidc-scope strings               request these oidc scopes when users authenticate
      --proxy-proto string               version of proxy proto to use with this tunnel, empty if not using
      --region string                    ngrok server region [us, eu, au, ap, sa, jp, in] (default "us")
      --request-header-add strings       header key:value to add to request
      --request-header-remove strings    header field to remove from request if present
      --response-header-add strings      header key:value to add to response
      --response-header-remove strings   header field to remove from response if present
      --scheme strings                   which schemes to listen on (default [https])
      --subdomain string                 host tunnel on a custom subdomain
      --verify-webhook string            validate webhooks are signed by this provider, e.g. 'slack'
      --verify-webhook-secret string     secret used by provider to sign webhooks, if any
      --websocket-tcp-converter          convert ingress websocket connections to TCP upstream