Python：Reflex：VSCodeのDevContainer内でリモートデバッグを設定

Refexについて

Reflexは、Pythonだけでフロントエンドも作れるWebアプリ作成ライブラリです。
フロントエンドやバックエンドの実行環境がオールインワンなので開発準備がとても簡単です。

アメリカの大手企業でも使われているようです。

１．前提条件

• Poetryを利用してReflexなどのライブラリはインストール済み
• VSCodeのDevContainerは設定済み
• Reflexのプロジェクトは作成済み

２．デバッガの起動設定ファイルlaunch.jsonを作成

VSCodeでコンテナを起動し、コンテナ内で以下の操作を行う。

①左のデバッグメニューをクリックし、launch.jsonを作成する。

②Python Debuggerを選択。

③Moduleを選択。

④モジュール名に「reflex」を入力し、Enterキーを押す。

３．launch.jsonファイルを編集

以下のように記載する。（一例です）

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Reflex Debug",
            "type": "debugpy",
            "request": "launch",
            "module": "reflex",
            "cwd": "${workspaceFolder}/app",
            "args": [
                "run",
            ],
            "justMyCode": true,
            "env": {
                "PYTHONPATH":"${PYTHONPATH}:${workspaceFolder}", 
            }
        }
    ]
}

ポイントは以下です。

• moduleにはreflexを設定
• cwdにreflexのプロジェクトフォルダを設定
• argsにはreflexの実行コマンドを設定

上記の設定は、以下のプロジェクトフォルダ内の構成を前提としています。

appがreflexのプロジェクトフォルダです。
screenはアプリフォルダであり、screen.pyがアプリの起動ファイルです。

３．デバッガ実行

①左のデバッグメニューをクリックし、「Reflex Debug」を実行。

reflexアプリが起動します。

②ブレークポイントを設定して、ブラウザからアクセスする。ブレークボイントで止まり、変数の値がダンプされます。