/
ngrokによるローカル環境の公開手順

ngrokによるローカル環境の公開手順

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

ngrokのアカウント作成

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

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

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

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

本人確認

メールによる本人確認として、入力したメールアドレス宛に「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 ) 環境では、次のようにコマンドを実行する。

wget https://bin.equinox.io/c/bNyj1mQVY4c/ngrok-v3-stable-linux-amd64.tgz

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

tar xvzf ngrok-v3-stable-linux-amd64.tgz

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

sudo mv ngrok /usr/local/bin/

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

ngrok version

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

ngrok version 3.2.2

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

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

ngrok config add-authtoken 2OJhl15sxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

実行結果

Authtoken saved to configuration file: /home/vboxuser/.config/ngrok/ngrok.yml

Mac の場合

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

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

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

brew

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

Example usage: brew search TEXT|/REGEX/ brew info [FORMULA|CASK...] brew install FORMULA|CASK... brew update brew upgrade [FORMULA|CASK...] brew uninstall FORMULA|CASK... brew list [FORMULA|CASK...] Troubleshooting: brew config brew doctor brew install --verbose --debug FORMULA|CASK Contributing: brew create URL [--no-fetch] brew edit [FORMULA|CASK...] Further help: brew commands brew help [COMMAND] man brew https://docs.brew.sh

homebrewのインストール方法

https://mydocument.atlassian.net/wiki/spaces/support4textbook/pages/1737752577 にアクセスし、記載の手順に従って、「homebrew」をインストールしてください。

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

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

brew install ngrok/ngrok/ngrok

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

ngrok version

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

ngrok version 3.2.2

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

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

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

ngrok config add-authtoken 2OJhl15sxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Windows の場合

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

chocolateyのインストール方法

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

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

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

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

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

choco -v

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

1.3.1

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

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

choco install ngrok

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

ngrok version

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

ngrok version 3.2.2

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

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

ngrok config add-authtoken 2OJhl15sxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

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

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

ngrok help

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

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

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

例として、llama-cpp-pythonによるOpenAI互換のAPIサーバーを動かしているものとします。llama-cpp-pythonについてはhttps://mydocument.atlassian.net/wiki/spaces/support4textbook/pages/1775992841 をご覧ください。

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

インターネットへの公開

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

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

ngrok http 8000

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

ngrok (Ctrl+C to quit) Announcing ngrok-rs: The ngrok agent as a Rust crate: https://ngrok.com/rust Session Status online Account あなたの名前 (Plan: Free) Version 3.2.2 Region Japan (jp) Latency 62ms Web Interface http://127.0.0.1:4040 Forwarding https://xxx-xxx-xxx-xx-xxx.ngrok-free.app -> http

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キーを押す。

bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)

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

Are you really sure you want to do this ? [y/N] ?

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

Would you like to install the Pi-specific nodes ? [y/N] ?

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

sudo systemctl start nodered.service

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

sudo systemctl enable nodered.service
WIndowsやMacの場合

参考資料 >> https://nodered.jp/docs/getting-started/local を参照のこと。

インターネットへの公開

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

ngrok http 1880

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

ngrok (Ctrl+C to quit) Announcing ngrok-rs: The ngrok agent as a Rust crate: https://ngrok.com/rust Session Status online Account あなたの名前 (Plan: Free) Version 3.2.2 Region Japan (jp) Latency 62ms Web Interface http://127.0.0.1:4040 Forwarding https://xxx-xxx-xxx-xx-xxx.ngrok-free.app -> http

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の場合

インストール

sudo apt-get update sudo apt-get install -y nginx

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

sudo systemctl status nginx
Aapcheの場合
インストール
sudo apt-get update sudo apt-get install -y apache2

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

sudo systemctl status apache2

インターネットへの公開

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

ngrok http 80

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

ngrok (Ctrl+C to quit) Announcing ngrok-rs: The ngrok agent as a Rust crate: https://ngrok.com/rust Session Status online Account あなたの名前 (Plan: Free) Version 3.2.2 Region Japan (jp) Latency 62ms Web Interface http://127.0.0.1:4040 Forwarding https://xxx-xxx-xxx-xx-xxx.ngrok-free.app -> http

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 コマンドが停止され、インターネットへの公開が終了する。