LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@ry033rdqiita

🌐【体系解説】ローカル vs Colab：Flaskアプリの実行環境と通信の仕組み

Posted at

WebアプリケーションフレームワークFlaskを使う際、開発環境として自分のPC（ローカル）を使う場合と、Google Colaboratory（Colab）のようなクラウド環境を使う場合があります。それぞれ通信の仕組みや設定方法が異なります。

この記事では、ローカル環境とColab環境でFlaskアプリケーションを実行する際の違い、通信の裏側、ポート番号の役割、そして具体的な実行スクリプトまでを体系的に解説します。

1. 実行環境による全体構造の違い

まず、ローカルPCとColab + ngrokでFlaskアプリを実行する場合の基本的な違いを見てみましょう。

項目 ローカルPC Colab + ngrok
サーバー実行場所 自分のPCのメモリ上 Googleデータセンター内の仮想マシン(VM)
基本的なIPアドレス 127.0.0.1 (localhost) 127.0.0.1 (VM内のlocalhost)
外部からの見え方 直接アクセス不可 (通常) 直接アクセス不可 (Firewall)
Flask待機ポート 任意 (例: 5000) 同じ (例: 5000)
ブラウザアクセス方法 http://127.0.0.1:5000 ngrokが生成した公開URL
主な用途 開発、ローカルテスト、学習 クラウドでのテスト、一時的な共有
セキュリティ PC内部で完結し、比較的安全 ngrok URLを知る人のみアクセス可 (一時的)

ポイント:

  • どちらの環境でもFlask自体は 127.0.0.1 (自分自身) の 5000番ポート (例)でリクエストを待ち受けます。
  • 大きな違いは、どうやってブラウザからそのFlaskサーバーにたどり着くかです。

2. 通信経路のイメージ

通信の流れを図でイメージしてみましょう。

【ローカルPCの場合】

+-------------------+      HTTP Request/Response      +--------------------+
| ブラウザ (自分のPC) | <--------------------------> | Flaskサーバー (自分のPC)|
| (例: Chrome)      |      (http://127.0.0.1:5000)   | (Pythonスクリプト)   |
+-------------------+                                +--------------------+
   ↑ あなたが操作                                      ↑ あなたが実行

自分のPC内で完結するため、非常にシンプルです。

【Colab + ngrokの場合】

+-------------------+      HTTPS Request/Response     +-------------------+
| ブラウザ (あなたのPC)| <--------------------------> |  ngrokサーバー     |
| (例: Chrome)      |  (https://xxxx.ngrok-free.app) | (インターネット上)  |
+-------------------+                                +--------⇅----------+
                                                            TCPトンネル
                                                       (暗号化された経路)
                                                         +--------↓----------+
                                                         | Flaskサーバー       |
                                                         | (Google Colab VM)   |
                                                         | (127.0.0.1:5000)    |
                                                         +-------------------+
                                                            ↑ Colabで実行

ColabのVMは外部から直接アクセスできないため、ngrok というサービスが「トンネル」の役割を果たします。

  1. Colab上のFlaskサーバーはVM内の 127.0.0.1:5000 で待機します。
  2. ngrok がColab VMからインターネット上のngrokサーバーへの安全な接続（トンネル）を確立します。
  3. ngrok はインターネットからアクセス可能な公開URL (例: https://xxxx.ngrok-free.app) を生成します。
  4. あなたのブラウザはこの公開URLにアクセスします。
  5. ngrokサーバーがリクエストを受け取り、トンネルを通じてColab VM内のFlaskサーバーに転送します。
  6. Flaskサーバーからの応答も逆の経路でブラウザに返されます。

3. ポート番号の役割

コンピューターがネットワーク通信を行う際、特定のアプリケーションやサービスを識別するために「ポート番号」が使われます。

  • 範囲: 0番から65535番まであります。
  • ウェルノウンポート (0-1023): HTTP(80)、HTTPS(443)、SSH(22)など、よく知られたサービスに使われます。
  • 登録済みポート (1024-49151): 特定のアプリケーション用に登録されています (例: MySQLの3306)。
  • 動的/プライベートポート (49152-65535): アプリケーションが一時的に利用したり、開発用に自由に使われたりします。Flaskでよく使われる 5000番もこの範囲に含まれます。

ローカルとColabでの違い:

  • ローカルPC: Flaskが 5000番ポートで待機すれば、自分のPCのブラウザから http://127.0.0.1:5000 で直接アクセスできます。
  • Colab: ColabのVMにも 5000番ポートは存在しますが、Google Cloudのファイアウォール設定により、外部からそのポートに直接アクセスすることはできません。そこで ngrok が登場し、ファイアウォールを迂回して外部（あなたのブラウザ）と内部（Colab VMのFlaskサーバー）をつなぐトンネルを作成するのです。

4. 実践：Flaskスクリプト例

簡単な四則演算を行う電卓アプリを例に、ローカル版とColab版のスクリプトを見てみましょう。

💻 ローカル環境での実行スクリプト

このスクリプトを app.py などの名前で保存し、ターミナルやコマンドプロンプトで python app.py を実行します。

from flask import Flask, request, render_template_string

app = Flask(__name__)

# HTMLテンプレート（Jinja2形式）
html_template = """
<!DOCTYPE html>
<html>
<head>
    <title>ローカル電卓</title>
    <style>
        body { font-family: sans-serif; }
        .error { color: red; }
        .result { font-weight: bold; }
    </style>
</head>
<body>
    <h2>ローカル電卓</h2>
    <form method="POST">
        <input type="number" step="any" name="num1" required placeholder="数値1">
        <select name="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" step="any" name="num2" required placeholder="数値2">
        <input type="submit" value="計算">
    </form>

    {% if error %}
        <p class="error">エラー: {{ error }}</p>
    {% endif %}
    {% if result is not none %}
        <p>結果: <span class="result">{{ result }}</span></p>
    {% endif %}
</body>
</html>
"""

@app.route('/', methods=['GET', 'POST'])
def calculator():
    result = None
    error = None
    if request.method == 'POST':
        try:
            num1 = float(request.form['num1'])
            num2 = float(request.form['num2'])
            operator = request.form['operator']

            if operator == '+':
                result = num1 + num2
            elif operator == '-':
                result = num1 - num2
            elif operator == '*':
                result = num1 * num2
            elif operator == '/':
                if num2 == 0:
                    error = "0で割ることはできません。"
                else:
                    result = num1 / num2
            else:
                error = "無効な演算子です。"

        except ValueError:
            error = "有効な数値を入力してください。"
        except Exception as e:
            error = f"予期せぬエラーが発生しました: {e}"

    # render_template_stringを使ってHTMLをレンダリング
    return render_template_string(html_template, result=result, error=error)

if __name__ == '__main__':
    # 自分のPCのlocalhost(127.0.0.1)のポート5000で実行
    # debug=Trueにすると、コード変更時に自動リロードされ、エラー表示が詳細になる
    app.run(host='127.0.0.1', port=5000, debug=True)

アクセス方法:
Webブラウザを開き、アドレスバーに http://127.0.0.1:5000 と入力します。

☁️ Google Colabでの実行スクリプト

Colabのノートブックセルに以下のコードを貼り付けて実行します。

# 必要なライブラリをインストール
!pip install flask pyngrok -q

from flask import Flask, request, render_template_string
from pyngrok import ngrok, conf
import os

# ngrok Authtokenの設定（Colab Secretsや直接入力）
# 無料アカウントでも利用可能ですが、長時間利用や安定性を求める場合は
# ngrok公式サイトでアカウント登録し、Authtokenを取得・設定することを推奨します。
# 例: Colabのシークレット機能を使う場合
# from google.colab import userdata
# NGROK_AUTH_TOKEN = userdata.get('NGROK_AUTH_TOKEN')
# if NGROK_AUTH_TOKEN:
#   conf.get_default().auth_token = NGROK_AUTH_TOKEN
# else:
#   print("警告: ngrok Authtokenが設定されていません。接続が不安定になる可能性があります。")
#   print("ngrokダッシュボード (https://dashboard.ngrok.com/get-started/your-authtoken) で取得してください。")

app = Flask(__name__)

# --- ローカル版と同じHTMLテンプレートとルート定義 ---
html_template = """
<!DOCTYPE html>
<html>
<head>
    <title>Colab電卓</title>
    <style>
        body { font-family: sans-serif; }
        .error { color: red; }
        .result { font-weight: bold; }
    </style>
</head>
<body>
    <h2>Colab電卓 (ngrok経由)</h2>
    <form method="POST">
        <input type="number" step="any" name="num1" required placeholder="数値1">
        <select name="operator">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="number" step="any" name="num2" required placeholder="数値2">
        <input type="submit" value="計算">
    </form>

    {% if error %}
        <p class="error">エラー: {{ error }}</p>
    {% endif %}
    {% if result is not none %}
        <p>結果: <span class="result">{{ result }}</span></p>
    {% endif %}
</body>
</html>
"""

@app.route('/', methods=['GET', 'POST'])
def calculator():
    result = None
    error = None
    if request.method == 'POST':
        try:
            num1 = float(request.form['num1'])
            num2 = float(request.form['num2'])
            operator = request.form['operator']

            if operator == '+':
                result = num1 + num2
            elif operator == '-':
                result = num1 - num2
            elif operator == '*':
                result = num1 * num2
            elif operator == '/':
                if num2 == 0:
                    error = "0で割ることはできません。"
                else:
                    result = num1 / num2
            else:
                error = "無効な演算子です。"

        except ValueError:
            error = "有効な数値を入力してください。"
        except Exception as e:
            error = f"予期せぬエラーが発生しました: {e}"

    return render_template_string(html_template, result=result, error=error)
# --- ここまでローカル版と同じ ---

# Colab環境での実行設定
port = 5000

# ngrokでポート5000へのトンネルを作成し、公開URLを取得
# これにより、外部からColab内のFlaskアプリにアクセスできるようになる
public_url = ngrok.connect(port)
print(f"✅ Flaskアプリは以下のURLで公開されています:")
print(public_url)
print("----------")
print(f"内部サーバーは http://127.0.0.1:{port} で実行中です。")

# Flaskアプリを起動（Colabではバックグラウンド実行が基本）
# use_reloader=False にしないと、ngrokがうまく動作しないことがある
app.run(host='0.0.0.0', port=port, use_reloader=False)

# 注意: Colabセルが終了するとngrokトンネルとFlaskサーバーも停止します。
# 実行を続けたい場合はセルを実行したままにする必要があります。
# 実行を停止するには、Colabの■ボタンを押します。

アクセス方法:

  1. 上記のColabセルを実行します。
  2. pip install の後に、✅ Flaskアプリは以下のURLで公開されています: というメッセージと共に https://xxxx-xx-xx-xx-xx.ngrok-free.app のようなURLが表示されます。
  3. この ngrok のURL をコピーし、Webブラウザのアドレスバーに貼り付けてアクセスします。

注意点:

  • ngrok が生成するURLは、実行するたびに変わる可能性があります（無料プランの場合）。
  • Colabのセッションが切れたり、セル実行を停止したりすると、サーバーも止まりURLは無効になります。
  • ngrok の無料プランには利用時間や帯域幅の制限があります。

5. まとめ：ローカル vs Colab

特徴 ローカル環境 Colab + ngrok 環境
手軽さ 環境構築が必要な場合がある ブラウザだけで開発・実行可能
通信経路 PC内部でシンプル インターネット経由でやや複雑
外部公開 基本的に不可 (設定が必要) ngrok で一時的に容易に公開可能
リソース 自分のPCの性能に依存 Googleの計算リソースを利用可能
永続性 PCを起動していれば維持 Colabセッション/セル実行中のみ
主なシナリオ 本格的な開発、デバッグ、学習 簡単なテスト、プロトタイプ共有、教育

おわりに

Flaskアプリケーションを実行する環境として、ローカルPCとColabはそれぞれにメリットとデメリットがあります。ローカル環境は安定した開発基盤を提供し、Colab+ngrokは手軽さと共有のしやすさが魅力です。

この記事で解説した通信の仕組みやスクリプト例を参考に、あなたの目的や状況に合わせて最適な環境を選択し、Flaskアプリケーション開発を楽しんでください！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?