ngrokによるローカル環境内のWebアプリケーション公開

ngrokのアカウント作成

ngrokのホームページにアクセス。
https://ngrok.com/

画面右上の「Sign up」をクリックする。

Open

「Sign up」画面が表示される。「Name」には英数字で名前、「E-mail」には自分のメールアドレス、「Password」には8文字以上の英数字の組み合わせを入力する。この時、「私はロボットではありません。」と表示されることがある。表示された場合は、チェックを入れ、画面の指示に従って画像の組み合わせを選ぶこと。

「I accept the terms of service and privacy policy」にチェックを入れる。その後、「Sign Up」をクリックする。

Open

本人確認

メールによる本人確認として、入力したメールアドレス宛に「Verify email address for ngrok.com 」という件名のメールが届く。
メール本文内のURLをクリックし、本人確認を行う。

ダッシュボード画面の表示

本人確認が完了すれば、ダッシュボード画面が表示される。本人確認が終わっていない場合は、ダッシュボード画面の上部に、「A verification link has been sent to ….」で始まる本人確認を直ちに行うよう警告文が表示されているので、容易に判別ができる。

ngrokのインストール

Ubuntu ( Linux ) の場合

vboxuser というユーザー名でログインし、ngrok をインストールする場合。ユーザー名は、自分のものに読みかえること。

Webアプリケーション稼働している環境に合わせたngrokをインストール

ダッシュボード画面では、「1.Unzip to install」と表示されている。Ubuntu ( Linux ) 環境では、次のようにコマンドを実行する。

ダウンロードした、tgz ファイルを解凍する。

解凍したngrokを、/usr/local/bin に移動する。

ngrokコマンドの動作確認として、ngrokのバージョン情報を呼び出してみる。

実行結果 ( 2023年4月時点 )

トークンによるアカウント接続

ngrokのダッシュボード画面内の「Getting Started」の「Setup & Installation」に表示されている「Connect」下のコマンド(ngrok configからはじまる)をコピーして実行する。トークンの値を各自で異なるので、必ず自分のものを実行すること。

実行結果

Mac の場合

homebrewを使ってインストールします。homebrewをインストールしていない場合は、ngrok のインストールを行う前に、homebrew のインストールを行うこと。

homebrewがインストール済みかどうか見分ける方法

homebrewをインストール済みの場合は、この作業は飛ばしてください。確認方法は、Macのターミナルアプリで次のコマンドを実行すればわかります。

実行結果として、ヘルプ情報が表示されれば、homebrewはインストール済みとなります。ヘルプ情報が表示されない場合は、homebrewをインストールしてください。

homebrewのインストール方法

MacにHomebrewを使ってPythonをインストール にアクセスし、記載の手順に従って、「homebrew」をインストールしてください。

Webアプリケーション稼働している環境に合わせたngrokをインストール

homebrewを使って、次のようにコマンドを実行する。

ngrokコマンドの動作確認として、ngrokのバージョン情報を呼び出してみる。

実行結果 ( 2023年4月時点 )

トークンによるアカウント接続

grokのダッシュボード画面内の「Getting Started」の「Setup & Installation」に表示されている「Connect」下のコマンド(ngrok configからはじまる)をコピーして実行する。画面内の表示されている赤枠内のコピーボタンをクリックします。トークンの値を各自で異なるので、必ず自分のものを実行すること。

ターミナルアプリ上で実行します。

Windows の場合

chocolateyを使ってインストールします。chocolateyをインストールしていない場合は、ngrok のインストールを行う前に、chocolatey のインストールを行うこと。

chocolateyのインストール方法

Chocolateyは、Chocolatey Software社が開発しているWindows向けのパッケージ管理ツール、ソフトウェアインストールツールです。MacやLinuxであれば、homebrewのようなものです。コマンドラインで操作します。Chocolateyのインストールには、PowerShellを管理者として実行する必要があります。

Windowsのスタートメニューで、「PowerShell」を探し、「管理者として実行する」をクリックします。PowerShellは、Windows 7 以降に標準搭載されているCLIツールです。

PowerShell上で、次のコマンドを実行します。

インストールが出来たかどうか確認するため、バージョン確認を行います。次のコマンドを実行します。

実行結果 ( 2023年4月現在 )

Webアプリケーション稼働している環境に合わせたngrokをインストール

chocolateyを使って、次のようにコマンドを実行する。

ngrokコマンドの動作確認として、ngrokのバージョン情報を呼び出してみる。

実行結果 ( 2023年4月時点 )

トークンによるアカウント接続

ngrokのダッシュボード画面内の「Getting Started」の「Setup & Installation」に表示されている「Connect」下のコマンド(ngrok configからはじまる)をコピーして実行する。トークンの値を各自で異なるので、必ず自分のものを実行すること。

ngrok コマンドが実行できるか確認

ngrokコマンドの使い方は、help を起動することで表示される。<< ngrokのダッシュボード画面内の「3.Fire it up」に表示されてる箇所

実行結果として、使い方が表示される。特に「EXAMPLES:」に実行例が紹介されているので、必ず確認すること。

ローカルのWebアプリケーションを、インターネットに公開と停止

例1.Python Webサーバー ( llama-cpp-pythonによるAPIサーバー、あるいはDjangoやFlaskで作ったアプリを動かす場合 )

例として、llama-cpp-pythonによるOpenAI互換のAPIサーバーを動かしているものとします。llama-cpp-pythonについては日本語LLMを使って生成AI用のOpenAI互換のAPIサーバーを構築する手順 をご覧ください。

http://127.0.0.1:8000 で起動していると仮定する。起動している状態で、ターミナルアプリ内にタブを新規作成します。

インターネットへの公開

ターミナルアプリで、作成したタブに切り替えます。Python Webサーバーが起動しているタブは閉じてはいけません。

プロトコルがHTTPで、ポート番号が8000番を使う「Python Webサーバー」が起動している場合は、次のようにコマンドを実行することで、インターネットに公開される。

実行結果 ( ngrokをインストールした時期によって、ngrokのバージョンが下記を異なる )

Forwarding に表示されているURL（例 https://xxx-xxx-xxx-xx-xxx.ngrok-free.app）をコピーし、Webブラウザで、/docsを加えてアクセスする。（例 https://xxx-xxx-xxx-xx-xxx.ngrok-free.app/docs）

下図のように表示されるので、「Visit Site」をクリックする。

https接続で、ngrok-free.appが含まれる公開URLが表示されており、ngrok-free.appを含むURLにアクセスすることで、インターネット経由で、ローカル環境上のWebアプリケーションにアクセスすることができる。ngrok側で、SSLサーバ証明書も付与される。

インターネットへの公開を停止

ターミナルアプリで、ngrokコマンドが実行され、インターネットへ公開されている状態とする。たとえば、下図のようなとき、ターミナルアプリ上で、「Ctrl + cキー」を押すことで、ngrok コマンドが停止され、インターネットへの公開が終了する。

例2. Webアプリケーション ( 産業向けIoTやAIの標準ツール Node-REDの場合 )

http://127.0.0.1:1880 でNode-REDが起動していると仮定する。

Node-REDをまだインストールしていない場合

以下はUbuntu ( Linunx )環境の場合

次のコードをターミナル上で実行する。以下を入力し、Enterキーを押す。

以下を入力し、Enterキーを押す。入力を求められるので、y キーを押す。

以下を入力し、Enterキーを押す。入力を求められるので、Nキーを押す。

Node-REDの起動。以下を入力し、Enterキーを押す。

Node-REDの自動起動設定。以下を入力し、Enterキーを押す。

WIndowsやMacの場合

参考資料 >> を参照のこと。

インターネットへの公開

プロトコルがHTTPで、ポート番号が1880番を使う「Node-RED」を起動している場合は、次のようにコマンドを実行することで、インターネットに公開される。

実行結果 ( ngrokをインストールした時期によって、ngrokのバージョンが下記を異なる )

Forwarding に表示されているURL（例 https://xxx-xxx-xxx-xx-xxx.ngrok-free.app）をコピーし、Webブラウザでアクセスする。下図のように表示されるので、「Visit Site」をクリックする。

https接続で、ngrok-free.appが含まれる公開URLが表示されており、ngrok-free.appを含むURLにアクセスすることで、インターネット経由で、ローカル環境上のWebアプリケーション（ここではNode-RED）にアクセスすることができる。ngrok側で、SSLサーバ証明書も付与される。

インターネットへの公開を停止

ターミナルアプリで、ngrokコマンドが実行され、インターネットへ公開されている状態とする。たとえば、下図のようなとき。

ターミナルアプリ上で、「Ctrl + cキー」を押すことで、ngrok コマンドが停止され、インターネットへの公開が終了する。

例3. Webサーバーの公開 ( ApacheやNginxを使ったWebアプリケーションの場合 )

http://127.0.0.1:80 で、ApacheもしくはNginxが起動していると仮定する。( 下図は、Nginxの場合 )

NginxまたはApacheをまだインストールしていない場合

以下はUbuntu ( Linunx )環境の場合

次のコードをターミナル上で実行する。以下を入力し、Enterキーを押す。

Nginxの場合

インストール

インストールすることで、自動起動が行われる。起動状況を確認するには、以下のコマンドを実行する。

Aapcheの場合

インストール

インストールすることで、自動起動が行われる。起動状況を確認するには、以下のコマンドを実行する。

インターネットへの公開

プロトコルがHTTPで、ポート番号が80番を使う「Apache」または「Nginx」が起動している場合は、次のようにコマンドを実行することで、インターネットに公開される。

実行結果 ( ngrokをインストールした時期によって、ngrokのバージョンが下記を異なる )

Forwarding に表示されているURL（例 https://xxx-xxx-xxx-xx-xxx.ngrok-free.app）をコピーし、Webブラウザでアクセスする。下図のように表示されるので、「Visit Site」をクリックする。

https接続で、ngrok-free.appが含まれる公開URLが表示されており、ngrok-free.appを含むURLにアクセスすることで、インターネット経由で、ローカル環境上のWebアプリケーションにアクセスすることができる。ngrok側で、SSLサーバ証明書も付与される。

インターネットへの公開を停止

ターミナルアプリで、ngrokコマンドが実行され、インターネットへ公開されている状態とする。たとえば、下図のようなとき。

ターミナルアプリ上で、「Ctrl + cキー」を押すことで、ngrok コマンドが停止され、インターネットへの公開が終了する。