【Python】Flask + Vite + React

Uncategorized
364 words

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

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

フォルダー構成

1
2
3
4
5
6
7
8
9
flask-vite-react
┣ app
┃ ┣ dist
┃ ┣ node_modules
┃ ┣ public
┃ ┣ src
┃ ┣ index.html
┃ ┗ package.json
┗ main.py

サーバー側

Flask

モジュール一覧

1
pip install Flask

main.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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フォルダー内に作成していきます。

1
2
3
4
npm create vite@latest
cd app
npm install
npm run dev

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

1
2
npm run build

vite-project@0.0.0 build
tsc && vite build

1
2
3
4
5
6
7

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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