【Python】Flask + Vite + React

Flask でWebアプリケーションを作成します。

クライアント側は Vite と React を使います。

フォルダー構成
サーバー側
1. Flask
クライアント側
動作確認

フォルダー構成

flask-vite-react
┣ app
┃ ┣ dist
┃ ┣ node_modules
┃ ┣ public
┃ ┣ src
┃ ┣ index.html
┃ ┗ package.json
┗ main.py

サーバー側

Flask

モジュール一覧

pip install Flask

main.py

from flask import Flask, render_template, send_from_directory

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

@app.route("/", methods=['GET'])
def index():
    return render_template('index.html')

@app.route('/<path:filename>', methods=['GET'])
def resource(filename):
    return send_from_directory("./app/dist", filename)

@app.route('/assets/<path:filename>', methods=['GET'])
def assets_resource(filename):
    return send_from_directory("./app/dist/assets", filename)

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=80, debug=True)

React を Vite でまとめると、JSファイルとCSSファイルが assetsフォルダーに出力されるため、assetsフォルダーのファイルを読み込むようにしています。

クライアント側

クライアント側は appフォルダー内に作成していきます。

npm create [email protected]
cd app
npm install
npm run dev

ローカルで動くことを確認してから、ビルドします。

npm run build

> [email protected] build
> tsc && vite build

vite v4.1.1 building for production...
✓ 34 modules transformed.
dist/index.html                   0.46 kB
dist/assets/react-35ef61ed.svg    4.13 kB
dist/assets/index-d526a0c5.css    1.42 kB │ gzip:  0.74 kB
dist/assets/index-64bab72d.js   143.55 kB │ gzip: 46.17 kB

appフォルダー内に distフォルダーが作られてその中にビルドされたファイルが出力されます。

動作確認

main.py を実行して正しく表示されればOK

python main.py
 * Serving Flask app 'main'
 * Debug mode: on
 * Running on all addresses (0.0.0.0)
 * Running on http://127.0.0.1:80
 * Running on http://192.168.0.9:80
Press CTRL+C to quit
 * Restarting with stat
0.01s - Debugger warning: It seems that frozen modules are being used, which may
0.00s - make the debugger miss breakpoints. Please pass -Xfrozen_modules=off
0.00s - to python to disable frozen modules.
0.00s - Note: Debugging will proceed. Set PYDEVD_DISABLE_FILE_VALIDATION=1 to disable this validation.
 * Debugger is active!
 * Debugger PIN: 134-274-126