Python

ngrokの使い方解説!Pythonで作ったアプリを外部公開してみよう!

ngrok
記事内に商品プロモーションを含む場合があります
ウマたん
ウマたん
当サイト【スタビジ】の本記事では、ngrokの使い方を解説していきます!ngrokはローカル環境で作成したWebアプリをグローバルに公開できる便利ツールです!ぜひ使い方をマスターしていきましょう!

こんにちは!スタビジ編集部です!

今回は「ngrok」の使い方を実際にPythonアプリを公開する形で解説していきます。

Webアプリを開発しただけで外部からアクセスできないと、作った意味が半減してしまいます。

ngrokを使うと簡単にグローバルに公開できるので、使い方をマスターしていきましょう!

ngrok(エングロク)とは

まずは「ngrok(エングロク)」について簡単に見ていきましょう。

ngrokとはローカルで動作しているウェブサーバーやアプリケーションを、一時的に公開して外部からアクセス可能にするためのリバースプロキシツールです。

ngrokではngrok エッジと呼ばれるサーバーがクライアントからのリクエストを受け取り、ngrokのグローバルサービスに接続出来るngrokエージェントに送信します。

次にngrokエージェントからローカル環境のウェブサーバーやアプリケーションにリクエストを送信することで接続できるという仕組みです。

ngrok
ウマたん
ウマたん
簡単にいうとngrokが外部のインターネットからの窓口をしてくれることで、ローカル環境のアプリを外から見ることが出来るんだね!

ngrokの特徴

ngrokの特徴」について見ていきましょう。

ngrokの特徴は以下の3つです。

・簡単な設定でWebアプリのテストが出来る
・様々なプロトコルで通信可能
・オプション機能が充実

それぞれ見ていきましょう。

簡単な設定でWebアプリのテストが出来る

ngrokではngrokをインストールして簡単な設定をするだけで、ローカルのWebアプリを公開することが出来ます。

詳細な手順は後ほど紹介しますが、作成したWebアプリをサーバー上にデプロイしてネットワークの設定をして、、、みたいな複雑なことは不要です。

ウマたん
ウマたん
作ったWebアプリの挙動を確認してみたい時や外部からAPIを実行できるか試すときなどに便利!

様々なプロトコルで通信可能

ngrokでは「様々なプロトコル(HTTP、HTTPS、TCP)のエンドポイントにサポート」しているため通信を試すことが出来ます。

特にngrokでは、個別に証明書の準備をしなくてもngrok側でSSL認証を実施してくれるので、簡単にHTTPS通信を実行することが出来ます。

独自のドメインの設定や証明書の設定も出来るので、いろんなユースケースに対応できます。

ウマたん
ウマたん
証明書を準備しなくてもHTTPS通信を試すことが出来るのはすごい!

オプション機能が充実

ngrokでは「オプション機能が充実」しています。

オプション機能には以下のようなものがあります。

・公開したURLへのアクセスにユーザー名/パスワードを設定する認証機能
・接続できるアドレスを制限するIP制限機能
・ngrokエッジのリージョン指定
・公開するURLのドメイン設定

特にテスト中でアクセスできる人を制限したい場合に認証機能を利用することが多いです。

認証機能にはGoogleアカウントを使ったOAuth認証もあるので、ぜひ試してみて下さい。

オプションについては、ngrok公式サイトもしくはngrokをインストールした後に以下コマンドでオプションの一覧を見ることが出来ます。

$ngrok help コマンド

特に「ngrok help http」で起動時のオプションはよく使うので、覚えておきましょう。

ただしFreePlanでは利用できないオプションもあるので注意が必要です。

ウマたん
ウマたん
オプション機能も充実していて、開発中でも安心してWebアプリの公開が出来るね!

ngrokの使い方

実際にngrokを使ってみましょう!

ngrokの登録

ngrokを利用するにはまずngrokへアカウントの登録が必要になります。

ngrok公式サイトにアクセスしアカウントを作成しログインしましょう。

ngrok

アカウントにはGoogleアカウントやGithubアカウントを利用することも出来ます。

ngrokのインストール

ngrokを利用するために自身の環境に「ngrokをインストール」する必要があります。

ngrok公式サイトにログインした画面で、「Setup & Installation」メニューに環境ごとのインストール方法が記載されているので参考にしてみてください。

ngrok

以下はlinux(ubuntu)環境でインストールした例になります。

$curl -s https://ngrok-agent.s3.amazonaws.com/ngrok.asc | sudo tee /etc/apt/trusted.gpg.d/ngrok.asc >/dev/null && echo "deb https://ngrok-agent.s3.amazonaws.com buster main" | sudo tee /etc/apt/sources.list.d/ngrok.list && sudo apt update && sudo apt install ngrok
ngrok

インストール後に、ngrokにAuthtokenを設定する必要があります。

$ngrok config add-authtoken XXXXX

Authtokenは「Your Authtoken」で確認できます。

ngrok

このAuthtokenの情報があると他の人が別の環境でngrokによる公開が可能になっていしまうので、漏洩しないようにしましょう。

ngrokを試してみる

実際にngrokを試してみましょう。

ローカル環境に以下の「index.html」ファイルを作成します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Title</title>
  </head>
  <body>
    Hello, World
  </body>
</html>

phpを使ってWebサーバーを起動します。

$php -S localhost:8000

ポート番号8000で公開されているのでWebブラウザで「http://localhost:8000」と入力するとWebページが表示されます。

ngrok

この状態でngrokを起動してみましょう。ngrokの起動方法は以下です。

$ngrok http ポート番号

今回ポートは8000を指定しているので、ポート番号のところに8000を入力します。

実行すると以下のような結果が表示されます。

ngrok

Forwardingに書かれているURLが、公開用のURLになります。

このURLをWebブラウザに入力してアクセスしてみましょう。

最初は忠告のような画面が表示されます、「Visit Site」ボタンをクリックします。

ngrok

ローカル環境のサーバーに繋がります。

ngrok

ローカル環境のWebページと同じものが表示されていることを確認出来ました。

FreePlanでは1つのアカウントで1つのアプリしかngrokで公開できないので注意しましょう。

ウマたん
ウマたん
ngrokだと簡単な手順でローカル環境のアプリを公開できると実感!

phpについて詳しく勉強したい方は以下の記事を参考にしてみて下さい。

【初心者向け】PHPのおすすめ学習手順8ステップを紹介!当サイト【スタビジ】の本記事では、初めてPHPを学ぼうとしている方に向けて、おすすめの学習手順と勉強にぴったりな本や学習サイトを紹介しています!この記事を読んでPHPの勉強を始めていきましょう!...

ngrokを使ってPythonアプリを公開してみよう

応用としてPythonアプリをngrokで公開してみましょう。

ローカル環境のPythonアプリを公開

今回はStreamlitを使ってPythonアプリを作って公開していきます。

まずは、app.pyファイルを作成します。

import streamlit as st

#ヘッダー表示
st.header("streamlitテストアプリ")
#タイトル表示
st.title("Webアプリ開発中")
#テキスト表示
st.write("生活用アプリ")

#スライダー(デフォルトでは0~100)
st.title("スライダー")
weight = st.slider("今日の体重は")
st.write("今の体重は" + str(weight) +"kgです")

#ボタン
st.title("今日の天気は")
st.button("リセット", type="primary")
if st.button("晴れ?"):
    st.write("今日も元気に!")
else:
    st.write("傘を忘れずに")

#テキスト入力
st.title("やること")
st.text_input("今やること", key="do")
st.session_state.do #keyでアクセス

#チェックボックス
st.title("ごみ捨てチェック")
is_agree = st.checkbox("ごみ捨てた?")
if is_agree:
    st.write("お疲れ様!")
else:
    st.write("忘れずに!")

Streamlitを使ってアプリを起動します。

$streamlit run app.py

Streamlitでは「http://localhost:8501」で確認できます。

streamlit

では、このアプリを外部から見られるように公開していきましょう。

先ほどと同じようにngrokを起動しますが、今回はbacik認証も設定してみます。

$ngrok http 8501 --basic-auth='ユーザー名:パスワード'

今回は「ngrok http 8501 –basic-auth=’umatan:toukei-lab’」で実行しました。

表示されたURLからWebブラウザで実行しようとすると、ユーザー名とパスワードの入力が求められるようになります。

ngrok

正しいユーザー名とパスワードを入力するとローカルで実行したアプリを確認できます。

ngrok

Streamlitについては以下の記事で詳しく解説しているので、チェックしてみて下さい。

streamlit
Streamlitの使い方を解説!Pythonで簡単にWebアプリを作ってみよう!当サイト【スタビジ】の本記事では、Streamlitの使い方を解説していきます!StreamlitはPythonで実装されたオープンソースのWebアプリケーションのフレームワーク!直感的で簡単にWebアプリを開発できます!...

pyngrokを使ってGoogle Colaboratoryでアプリを公開する

PythonアプリをGoogle ColaboratoryJupyter notebookのようなPython開発環境で開発する方も多いです。

そこでGoogle Colaboratoryでのngrokを使ったアプリの公開方法を見ていきましょう。

まずはGoogle Colaboratoryを開いて必要なツールをインストールします。

!pip install streamlit
!pip install pyngrok

ここではngrokの実行に「pyngrok」を使います。

pyngrokとは、ngrokをPython用にアレンジ(ラッパー)したもので、独自のバイナリを管理していて、Python APIでngrokが利用できます。

import streamlit as st
from pyngrok import ngrok

Google Colaboratoryのディレクトリにapp.pyファイルを置き、ngrokのtoken設定も行います。

!ngrok config add-authtoken トークン

StreamlitでPythonアプリを起動します。

 #出力を非表示にしてバックグランドジョブとして実行
!streamlit run app.py &>/dev/null& 

アプリ起動中にngrokを実行するため、Streamlitはバックグラウンドジョブとして起動します。

ではngrokを使ってPythonアプリを公開しましょう。

url = ngrok.connect("ポート番号")

pyngrokでは「connectメソッド」を使うことで、ngrokに接続⇒ngrokプロセスが起動し、公開用URLを受け取ることが出来ます。

ngrok

URLをクリックするとローカル環境と同じようにアプリを表示することが出来ます。

注意点としてngrokと同じでFreePlanではngrokプロセスを1つしか起動できません。

ngrok.kill()

別のアプリを公開したい場合は上記のkillメソッドを使ってプロセスを終了しておきましょう。

ウマたん
ウマたん
Pythonの場合は、pyngrokを使ってアプリを公開することも出来るんだね!

Google Colaboratoryについては以下の記事で詳しく解説しているので、参考にしてみて下さい。

Google Colaboratory
Google Colaboratoryのメリットと使い方!GPU環境でPython回すならこれだ!当サイト【スタビジ】の本記事では、Googleが無償で提供する機械学習のプラットフォーム「Google Colaboratory」をメリット・デメリット・使い方について見ていきます!実際にPythonを実行していきGPUの威力を見ていきます。...

ngrok 使い方まとめ

ngrok」の使い方について見ていきました。

最後にngrokの特徴をおさらいします。

・簡単な設定でWebアプリのテストが出来る
・様々なプロトコルで通信可能
・オプション機能が充実

見てきた通り、簡単な手順で自身の環境からアプリを公開出来る便利ツールです。

オプション機能も充実しているので、ぜひいろいろ試してみて下さい。

またWebアプリ開発やPythonに興味がある方は、当メディアが運営する教育サービス「スタアカ(スタビジアカデミー)」の講座をチェックしてみてください。

AIデータサイエンス特化スクール「スタアカ」

スタアカトップ
【価格】ライトプラン:980円/月
プレミアムプラン:98,000円
【オススメ度】
【サポート体制】
【受講形式】オンライン形式
【学習範囲】データサイエンスを網羅的に学ぶ
実践的なビジネスフレームワークを学ぶ
SQLとPythonを組み合わせて実データを使った様々なワークを行う
マーケティングの実行プラン策定
マーケティングとデータ分析の掛け合わせで集客マネタイズ

データサイエンティストとしての自分の経験をふまえてエッセンスを詰め込んだのがこちらのスタビジアカデミー、略して「スタアカ」!!

24時間以内の質問対応と現役データサイエンティストによる複数回のメンタリングを実施します!

カリキュラム自体は、他のスクールと比較して圧倒的に良い自信があるのでぜひ受講してみてください!

他のスクールのカリキュラムはPythonでの機械学習実装だけに焦点が当たっているものが多く、実務に即した内容になっていないものが多いです。

そんな課題感に対して、実務で使うことの多いSQLや機械学習のビジネス導入プロセスの理解なども合わせて学べるボリューム満点のコースになっています!

Pythonが初めての人でも学べるようなカリキュラムしておりますので是非チェックしてみてください!

ウォルマートのデータを使って商品の予測分析をしたり、実務で使うことの多いGoogleプロダクトのBigQueryを使って投球分析をしたり、データサイエンティストに必要なビジネス・マーケティングの基礎を学んでマーケティングプランを作ってもらったり・Webサイト構築してデータ基盤構築してWebマーケ×データ分析実践してもらったりする盛りだくさんの内容になってます!

・BigQuery上でSQL、Google Colab上でPythonを使い野球の投球分析
・世界最大手小売企業のウォルマートの実データを用いた需要予測
・ビジネス・マーケティングの基礎を学んで実際の企業を題材にしたマーケティングプランの策定
・Webサイト構築してデータ基盤構築してWebマーケ×データ分析実践して稼ぐ

スタビジアカデミーでデータサイエンスをさらに深く学ぼう!

スタアカサービスバナースタビジのコンテンツをさらに深堀りしたコンテンツが動画と一緒に学べるスクールです。

プレミアムプランでは私がマンツーマンで伴走させていただきます!ご受講お待ちしております!

スタビジアカデミーはこちら