🛠️

DevContainersを使ってコンテナ内でコードをデバッグしてみる

koo

2024/09/30に公開

はじめに

今回はVSCodeの拡張機能であるDevContainersを使用して、コンテナ内でflaskコードをデバッグする環境のサンプルを作ってみます！

インストール

VSCodeに以下の拡張機能をインストールします。

DevContainersはDockerコンテナ上での開発をサポートするツールです。
ローカル環境に固有の拡張機能やライブラリをインストールせずにVSCode上で開発・デバッグが可能となります。

作成サンプル

以下の構成でサンプルを作成します。
今回はDevContainersの使用が目的のため、app.pyに記載のエンドポイントにアクセスすると現在時刻を表示するだけの簡易なコードとなっています。

ディレクトリ構成

DevContainersSample/
├── .devcontainer/
│   └── devcontainer.json
├── .vscode/
│   └── launch.json
├── app.py
├── docker-compose.yml
├── Dockerfile
└── requirements.txt

devcontainer.json

開発コンテナの設定を保存するファイルです。
プロジェクトのルート配下に.devcontainer/devcontainer.jsonか、.devcontainer.jsonとして作成する必要があります。

devcontainer.json

{
    // プロジェクト名
    "name": "Flask Debug Sample",
    // docker-compose.ymlのパス
    "dockerComposeFile": "../docker-compose.yml",
    // コンテナに接続する時に開くフォルダ
    "workspaceFolder": "/app",
    // 接続するサービス名(docker-compose.ymlを使用する場合は必須)
    "service": "flask-debug-sample",
    // コンテナで使用する設定・インストールする拡張機能
    "customizations": {
        "vscode": {
            "extensions": [
                "ms-python.python" // Pythonの拡張機能をインストール
            ]
        }
    }
}

各設定値は下記を参照ください。

その他サンプルファイル

launch.json
app.pyの実行内容を設定ファイルです。
各設定の詳細は以下を参照ください。https://code.visualstudio.com/Docs/editor/debugging#_launchjson-attributes

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Python Debugger: Flask",
            "type": "debugpy",
            "request": "launch",
            "module": "flask",
            "env": {
                "FLASK_APP": "app.py",
                "FLASK_DEBUG": "1",
            },
            "args": [
                "run",
                "--host=0.0.0.0",
                "--port=8000"
            ],
            "jinja": true,
            "autoStartBrowser": false
        }
    ]
}

app.py
@app.route('/')にアクセスされると現在時刻を表示するだけの機能です。

app.py

from flask import Flask
from datetime import datetime

app = Flask(__name__)


@app.route('/')
def currenttime():
    currenttime = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
    return 'Current time is: ' + currenttime

docker-compose.yml

docker-compose.yml

version: "3"

services:
  flask-debug-sample:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: flask-debug-sample
    ports:
      - "8000:8000"
    volumes:
      - .:/app
    tty: true

Dockerfile

Dockerfile

FROM python:3

ENV TZ Asia/Tokyo

WORKDIR /app

COPY . /app
RUN pip install --upgrade pip
RUN pip install -r requirements.txt

requirement.txt

requirement.txt

flask

コンテナ起動〜デバッグ実行

VSCodeのコマンドパレットに>Dev Containers: Reopen in Containerを入力すると、コンテナがビルドされ、.devcontainer/devcontainer.jsonで設定していたサービスがVSCodeで起動します。

ビルド中

devcontainer.jsonで設定したサービスがVSCodeで開かれる
ブレイクポイントを設定してlaunch.jsonで設定した設定で起動すると...デバッグ実行できていることが確認できました！