【FlaskをAPIサーバー化】環境設定とルーティングの構築！

こんにちは！今回は、Flask を使ってAPIサーバーを構築する方法について紹介します。

前回の設定から進めて、Flaskアプリケーションのフォルダ構成を整理し、環境変数の取り込みやルーティングの設定を行います。このステップを通じて、Flaskを使ったAPIサーバー化の準備が整います。

※前回からの続きになりますので、まだ記事を見ていない人はこちらから確認してみてください。

【Vue + Flask環境構築】Dockerでクライアントとサーバーを立ち上げよう！
こんにちは！今回は、Vue.js と Flask の環境を Docker を使って構築する方法について紹介します。Vue.jsはフロントエンド、Flaskはバックエンドのフレームワークとして使い、両者をDockerで一緒に動かすことで、効率...
www.ss-engineer.net
2025.01.11

では、早速始めていきましょう！

1. フォルダ構成の整理

まず、プロジェクトの構成を整理します。以下のように新しいフォルダを作成します。

  • /backend/flask_chat_server フォルダを作成
  • flask_chat_server フォルダ内に __init__.py を作成

このようにフォルダを分けることで、Flaskアプリケーションの整理がしやすくなります。

app.py の修正

app.py は、flask_chat_server を読み込むだけのシンプルなファイルにします。

from flask_chat_server import app

if __name__ == '__main__':
    app.run(host='0.0.0.0', debug=True)

これで、Flaskの設定が整理され、構造がスッキリとします。

2. Flaskアプリケーションの初期設定

次に、Flaskアプリケーションの初期設定を行います。環境変数を読み込むために、python-dotenv をインストールします。

dotenvのインストール

pip install python-dotenv

.env ファイルは app.py と同じ階層に配置します。環境変数を .env で管理することで、設定を簡単に変更できるようになります。

init.py の修正

flask_chat_server/__init__.py に、dotenvで環境変数を読み込む設定を追加します。

from dotenv import load_dotenv, find_dotenv
load_dotenv(find_dotenv(), override=True)

これで、.env ファイルから環境変数を読み込む準備が整いました。環境変数を参照するには、以下のように os.environ.get() を使用します。

import os
database_url = os.environ.get("DATABASE_URL")

3. ルーティングとブループリントの設定

Flaskのルーティングを管理するために ブループリント を使います。ブループリントを使うことで、コードが整理され、機能ごとにルーティングを分けることができます。

mainフォルダの作成

flask_chat_server フォルダ内に main フォルダを作成し、__init__.py と views.py を作成します。

  • /flask_chat_server/main/__init__.py: 空ファイル。これで main フォルダ内が Python のパッケージとして認識されます。
  • /flask_chat_server/main/views.py: ルーティングを定義します。

views.py でルーティングを設定

以下のように、views.py にルーティングを定義します。

from flask import Blueprint, request, jsonify

main = Blueprint("main", __name__)

@main.route('/')
def index():
    return "Welcome to the Flask API!"

@main.route('/api/send', methods=["POST"])
def requestWhisperAPI():
    print("受け取ったデータ:")
    data = request.json
    print("受け取ったデータ:", data)

    return jsonify({
        "message": "データを受け取りました！",
        "received": data
    }), 200

このコードでは、/ と /api/send のルートを定義しています。/api/send ではPOSTリクエストを受け取り、データを返します。

4. ブループリントをアプリに登録

次に、flask_chat_server/__init__.py で、views.py で定義したブループリントをアプリケーションに登録します。

from flask import Flask
from flask_cors import CORS
from flask_chat_server.main.views import main

app = Flask(__name__, static_folder="../../frontend/dist/static", template_folder="../../frontend/dist")

CORS(app, resources={r"/api/send": {"origins": "http://localhost:8083", "methods": ["POST"]}}, supports_credentials=True)

app.register_blueprint(main)

これで、/api/send へのリクエストが localhost:8083 からのみ受け付けるように制限されます。

5. 最終的なファイル構成

最終的な flask_chat_server/__init__.py は以下のようになります。

import os
from flask import Flask
from flask_cors import CORS

app = Flask(__name__, static_folder="../../frontend/dist/static", template_folder="../../frontend/dist")

CORS(
    app,
    resources={r"/api/send": {"origins": "http://localhost:8083", "methods": ["POST"]}},
    supports_credentials=True,
)

from flask_chat_server.main.views import main
app.register_blueprint(main)

これで、FlaskのAPIサーバーがセットアップされ、/api/send というエンドポイントでデータを受け取る準備が整いました。

まとめ

次回は、Vue のフロントエンドから実際に Flask サーバーにリクエストを送信してデータをやり取りする方法を紹介します。これにより、フロントエンドとバックエンドが連携した実際のアプリケーションが完成します！

参考文献

これで、FlaskをAPIサーバー化するための初期設定とルーティングの構築方法が完了しました。次回は、VueからFlaskにリクエストを送信する部分を実装していきますので、引き続きお楽しみに！

コメント