FlaskをVisual Studio Codeで動かしデバックする

2021-02-18

Pythonの人気のWebアプリケーションフレームワークFlaskをVisual Studio Codeで動かす方法です。

Flask用のPython仮想環境を構築

Visual Studio CodeでCtrl + Shift + @、あるいはメニューのターミナル(T) > 新しいターミナルでターミナルを表示する。環境を作りたいディレクトリに移動して、以下のコマンドを実行すると"myflask"の名称でPythonの仮想環境が作られる。 (myflaskの名称でディレクトリが作成され、中にライブラリやpythonのexeが作成される)

python -m venv myflask

Ctrl + Shift + Pでコマンドパレットを表示し、“interpreter"と入力し、Pythonインタープリターを選択、作成した仮想環境が表示されいればそれを、なければ.\myflask\Scripts\python.exeのように入力する。

改めてCtrl + Shift + Pでコマンドパレットを表示し、Python Create Terminalと入力する。
ターミナルが立ち上がり(myflask)と先頭に表示されていれば、仮想環境のPythonが叩けます。

(ターミナルで.\myflask\Scripts\Activate.ps1としても仮想環境への切り替えが行なえます。)

Flaskのインストール

Pythonの仮想環境でFlaskのインストールを行う。

pip install flask

自分の環境だと以下のエラーがでたので指示に従ってpipをアップグレードしてから再度インストールしました。

WARNING: You are using pip version 20.1.1; however, version 21.0.1 is available.
You should consider upgrading via the 'c:\path\src\myflask\scripts\python.exe -m pip install --upgrade pip' command.

c:\path\src\myflask\scripts\python.exe -m pip install --upgrade pip
pip install flask

動作確認用にapp.pyを以下のように作成しておきます。

# app.py
from flask import Flask
app = Flask(__name__)

@app.route('/')
def hello_world():
    return 'Hello, World!'

Python FlaskのVS Codeデバッグ環境

Ctrl + Shift + Dあるいは、虫に三角形のマークからデバッグのメニューを表示し、“実行とデバッグ"をクリックします。
選択肢は"Python Flask"を選びます。

Flaskのファイルがrun.pyのようにapp.pyと異なる場合は、launch.jsonを適宜編集し、 FLASK_APPにファイル名を指定しておきます。

"env": {
    "FLASK_APP": "run.py",
},

デバッグ実行は緑色の三角ボタンで実行できます。
ソースコード上行数の左をクリック、あるいは、F9でブレークポイントを指定します。

コマンドでFlaskを立ち上げる場合は以下のようにします。

$env:FLASK_APP = "run.py"
flask run

(コマンドプロンプトでなくPowerShellの場合 set FLASK_APP=run.pyでなく上記でないと動かないようです)