Docker+VSCode+リモート接続の環境で、Dash(Flask)をデバッグする方法

仕事中にハマったので個人的メモ。

0. VSCode上でDockerコンテナにリモート接続

（既に解説記事が豊富にあるため割愛）

1. dash.Dashのserverオプションにflask.Flaskで作ったappを指定

app.py

import flask
import dash
_app = flask.Flask(__name__)
app = dash.Dash(__name__, server=_app)

2. VSCodeのDebug機能→構成を追加→「Python: Flask」を選択

以下の構成がlaunch.jsonに追加される。

launch.json

{
    "name": "Python: Flask",
    "type": "python",
    "request": "launch",
    "module": "flask",
    "env": {
        "FLASK_APP": "app.py",
        "FLASK_ENV": "development",
        "FLASK_DEBUG": "0"
    },
    "args": [
        "run",
        "--no-debugger",
        "--no-reload",
        # 必要に応じて--hostや--portを追加
    ],
    "jinja": true
}

3.追加した構成を選択しデバッグ

Dashのブラウザ上での挙動（変数の作成＆更新、コールバックなど）をリアルタイムにデバッグすることができる。