Docker コンテナ内の Webアプリケーション（Python ＋ Flask） を Window 環境の VSCode からデバッグする

前回の記事で、Docker コンテナに Python ＋ Flask ＋ Vue.js ＋ Vuetify の開発環境を構築しました。
今回は、開発をより効率的に進めるため、Docker コンテナ内で起動している Webアプリケーション（Python ＋ Flask）を VSCode からデバッグできるようにしようと思います。

今回のゴール

• Docker コンテナ内で起動している Webアプリケーション（Python ＋ Flask）を VSCode からデバッグする

ディレクトリ構成

今回のディレクトリ構成は下記のようになります。
追加は/home/appuser/workspace/.vscode/launch.jsonファイルのみですので、他は省略します。

Ubuntu

/home/appuser

├── workspace
│   ├── docker-compose.yaml
│   ├── .vscode
│   │   └── launch.json
│   └── web_app003
│       ├── Dockerfile
～～～～～～～～～～ 以下省略 ～～～～～～～～～～

手順

資材作成

1. docker-compose.yamlファイルを修正
   docker-compose.yamlファイルを下記のように修正します。

   • Flask アプリケーションが自動的に起動しないようにcommandを追加
   • デバッグ連携用に5678番ポートを公開
   docker-compose.yaml

   version: '3'
   services:
   
     ##############################################################################
     # Web Application container（Python ＋ Flask ＋ Vue.js ＋ Vuetify）
     ##############################################################################
     web_app003:
       build: "./web_app003/"
       command: "/bin/bash" # Flask アプリケーションが自動的に起動しないようにする設定
       tty: true
       # volumes:
       #   - "./web_app003/opt/web_app/:/opt/web_app/" # ローカル(Ubuntu)のディレクトリと同期する
       ports:
         - "5000:5000" # Flask port
         - "5173:5173" # Vue.js port
         - "5678:5678" # Debug port
       image: "web_app003:develop"
       container_name: "web_app003"
   

   
   

2. Dockerfileファイルを修正
   Dockerfileファイルを下記のように修正します。

   • debugpy をインストール対象に追加
   Dockerfile

   # Amazon Linux 2023
   FROM public.ecr.aws/amazonlinux/amazonlinux:2023
   
   # ミドルウェアをインストール
   RUN dnf install -y \
       util-linux \
       shadow-utils \
       vim-enhanced-2:9.* \
       sudo-1.9.* \
       python3.11-3.11.* \
       python3.11-pip-22.3.* \
       python3.11-devel-3.11.* \
       nodejs-1:18.*
   
   # Python のライブラリをインストール
   RUN pip3.11 install flask==3.0.*
   RUN pip3.11 install flask_socketio==5.3.*
   RUN pip3.11 install flask-cors==4.0.*
   RUN pip3.11 install flask-wtf==1.2.*
   RUN pip3.11 install debugpy==1.8.*
   
   # ホストOS と同じユーザーを追加する
   # 1000 : host OS $(id -g)
   RUN groupadd -g 1000 appuser
   # 1000 : host OS $(id -u)
   RUN adduser -m appuser -u 1000 -g appuser
   # Add SUDO group.
   RUN groupadd sudo
   # Add SUDO authority.
   RUN usermod -aG sudo appuser
   
   # 資材を配置する
   WORKDIR /opt/web_app/
   RUN mkdir -p /opt/web_app/
   COPY ./opt/web_app/ /opt/web_app/
   COPY ./opt/flask_start.sh /opt/
   
   # オーナーとパーミッションを変更する
   RUN chown appuser:appuser /opt/web_app -R
   RUN chmod 775 /opt/web_app -R
   
   # vite で Vue.js 環境を構築してプロダクションビルドする
   WORKDIR /opt/web_app/frontend/
   RUN npm install
   RUN npm run build
   
   # 起動時のコマンドを設定する
   CMD ["sh","/opt/flask_start.sh"]
   

   
   

3. flask_start.shファイルを修正
   flask_start.shファイルを下記のように修正します。

   • Flask アプリケーションをデバッグ起動し、デバッグ連携用に5678番ポートを公開する
   flask_start.sh

   #!/bin/bash
   
   ################################################################################
   # Flask アプリケーションを起動するシェルスクリプト
   ################################################################################
   
   su -l appuser -c "cd /opt/web_app/src/; python3.11 -m debugpy --listen 0.0.0.0:5678 app_controller.py"
   

   
   

4. app_controller.pyファイルを修正
   app_controller.pyファイルを下記のように修正します。

   • デバッグ起動を確認しやすいようにget_index_html()関数を追加
   app_controller.py

   from flask import Flask, render_template
   app = Flask(__name__, static_folder="/opt/web_app/src/templates/static/")
   
   @app.route("/")
   def index():
       """
       初期ページ表示
       """
       index_html = get_index_html()
       return render_template(index_html)
   
   
   def get_index_html():
       file_name = "index"
       file_extension = "html"
       index_html = file_name + "." + file_extension
       return index_html
   
   
   if __name__ == "__main__":
       """
       Flask アプリケーション起動
       """
       app.run(debug=False, host="0.0.0.0", port=5000)
   

   
   

5. VSCode のデバッグ設定ファイルを作成
   VSCode のデバッグ設定ファイルを下記のように作成します。

   • コンテナ内とローカル環境のソースディレクトリをマッピング
   • デバッグ連携用に5678番ポートを公開する

   {
       "version": "0.2.0",
       "configurations": [
           {
               "name": "web_app003 Debugger",
               "type": "debugpy",
               "request": "attach",
               "connect": {
                   "host": "localhost",
                   "port": 5678
               },
               "pathMappings": [
                   {
                       "localRoot": "${workspaceFolder}/web_app003/opt/web_app/src",
                       "remoteRoot": "/opt/web_app/src"
                   }
               ]
           }
       ]
   }
   

VSCode 設定

1. VSCode をインストール
   VSCode を公式サイトからダウンロードしてインストールします。
   公式サイト：https://code.visualstudio.com/download
   
   

2. 拡張機能 Python Debugger をインストール
   拡張機能 Python Debugger を「拡張機能（Ctrl+Shift+X）」タブから検索してインストールします。
   
   
   

3. ワークスペースを設定
   \\wsl$\Ubuntu-22.04\home\appuser\workspaceを VSCode のワークスペースに追加します。
   

動作確認

1. Docker Compose でビルド＆起動
   Docker Compose でカスタムイメージをビルドして起動します。

   Ubuntu

   cd /home/appuser/workspace
   docker-compose build
   docker-compose up -d
   

   
   

2. 起動した Docker コンテナに入る
   docker execコマンドで、起動した Docker コンテナに入ります。

   Ubuntu

   docker exec -it web_app003 bash
   

   
   

3. Flask を起動する
   シェルを実行して Flask を起動します。

   web_app003

   sh /opt/flask_start.sh
   

   
   

4. VSCode でデバッグ待機
   VSCode の「実行とデバッグ（Ctrl+Shift+D）」タブから、web_app003 Debuggerを起動します。
   また、app_controller.pyにブレークポイントを設定します。
   
   
   

5. ローカルホストでアクセス
   Windows のブラウザからローカルホストでアクセスします。
   URLはhttp://localhost:5000/です。
   
   

6. デバッグ操作を確認
   ブレークポイントで処理が止まることを確認します。
   また、ステップオーバー（F10）などの操作ができること、変数の値を参照できることを確認します。
   
   

最後に

今回は Webアプリケーション（Python ＋ Flask）でデバッグ操作できることを確認しましたが、当然ながら、Webアプリケーションでなくても、同様の手順でデバッグ操作することができます。
開発環境を Docker コンテナで作成する手軽さと、VSCode からデバッグ操作できることの両方のメリットを受けることができますので、開発をより効率的に行うことができそうです。