Demo - VS Code を使用したリモートコンテナーでの開発

構築できた環境を使って、既存のアプリプロジェクトを開発コンテナーで開き、実行とデバッグを行ってみましょう。

このステップでは、ステップ 4「Visual Studio Code のインストール」で設定した wslc を Dev Containers のドライバーとして使う構成で進めます。事前に、Dev Containers 拡張機能の更新と dev.containers.dockerPath = wslc の設定を済ませておいてください。

重要: wslc ドライバーを使う場合は、プロジェクトを Windows 側のフォルダーに置き、VS Code を Windows 側 (ローカル) で開きます。WSL 上のフォルダーを WSL のウィンドウで開いた状態では、wslc ドライバーで開発コンテナーを開けません。

ステップ 2「コンテナーランタイムの準備」の Docker Engine ルートを使う場合は、プロジェクトを WSL 上 (~/) に clone し、手順 2 (Django のバージョン固定) を行い、WSL ターミナルで code . を実行してから手順 4 以降を行ってください。Docker Engine ルートでも同じイメージ (bullseye) を使うため、手順 2 は必要です。

この例では、Microsoft が公開している VS Code の Django チュートリアル用サンプルを使用します。このサンプルには、Dev Container の構成 (.devcontainer/devcontainer.json) とデバッグ構成 (.vscode/launch.json) があらかじめ含まれています。独自のプロジェクトソースコードを使用する場合は、この手順を省略できます。

ここでは、WSL に導入した Git を使って Windows 側のフォルダー C:\handson に clone します。WSL ターミナルで次を入力します。
```
mkdir -p /mnt/c/handson
cd /mnt/c/handson
git clone https://github.com/microsoft/python-sample-vscode-django-tutorial.git
```
INFO: Windows に Git をインストールしている場合は、PowerShell から C:\handson に直接 clone しても構いません。
Django のバージョンを固定します。サンプルの requirements.txt は Django>=3.1.0 となっており、そのままでは最新の Django 6 系がインストールされます。サンプルのイメージ (bullseye) に含まれる SQLite は 3.34.1 で、Django 6.1 が必要とする SQLite 3.37 以降を満たさないため、デバッグ実行時に NotSupportedError: SQLite 3.37 or later is required (found 3.34.1). が発生します。

requirements.txt の Django の行を次のように変更してください。
```
Django>=4.2,<6
```
注意: この変更で Django 5.2 LTS がインストールされます (Django 5.2.17 で動作を確認しています)。この変更は、コンテナーを作成する前に行ってください。
PowerShell から、VS Code (ローカル) でプロジェクトフォルダーを開きます。
```
code C:\handson\python-sample-vscode-django-tutorial
```
初回は信頼確認画面が表示されますので、`はい、作成者を信頼します` ボタンをクリック

注意: 親フォルダーを既に信頼済みの場合、信頼確認画面は表示されません。
VS Code コマンドパレット (Ctrl + Shift + P) で「開発コンテナー: コンテナーで再度開く」を選択します。
このサンプルにはすでに .devcontainer/devcontainer.json があるため、コンテナー構成定義を選ぶ手順はありません。コマンドが表示されない場合は、Dev Containers 拡張機能がインストールされていることを確認してください。

VS Code Dev Containers コマンド

注意: 「開発コンテナーでは、Docker を実行する必要があります。WSL に Docker をインストールしますか?」と表示された場合は、dev.containers.dockerPath が wslc に設定されていないか、Dev Containers 拡張機能が古い可能性があります。ステップ 4「Visual Studio Code のインストール」の設定手順を確認してください。

VS Code の新しいインスタンスが開き、コンテナーの準備 (イメージの取得、コンテナーの起動、VS Code Server の接続、拡張機能の読み込み) が始まります。サンプルの devcontainer.json は次の内容になっています。

設定内容

image mcr.microsoft.com/devcontainers/python:1-3.12-bullseye

postCreateCommand pip3 install --user -r requirements.txt (コンテナー作成後に依存ライブラリーを自動インストール)

customizations.vscode.extensions Python / Pylance / Black / Ruff / debugpy の各拡張機能

設定	内容
`image`	`mcr.microsoft.com/devcontainers/python:1-3.12-bullseye`
`postCreateCommand`	`pip3 install --user -r requirements.txt` (コンテナー作成後に依存ライブラリーを自動インストール)
`customizations.vscode.extensions`	Python / Pylance / Black / Ruff / debugpy の各拡張機能

依存ライブラリーは postCreateCommand で自動的にインストールされます。コンテナー内では、プロジェクトは /workspaces/python-sample-vscode-django-tutorial に配置されます。

INFO: サンプルのイメージは Debian の旧リリース bullseye をベースにしており、手順 2 の SQLite の制約はこのためです。自分で新しく構成を作る場合は、より新しい bookworm ベースのイメージを選ぶことをお勧めします (本ハンズオンでは bookworm での動作は検証していません)。

プロジェクトがコンテナー内で動作していることを確認するには、VS Code 統合ターミナル (Ctrl + Shift + ~、日本語キーボードでは Ctrl + Shift + @) を開きます。「uname」と入力してオペレーティングシステムを確認し、「python3 --version」と入力して Python のバージョンを確認します。uname が “Linux” と返れば、Linux コンテナー内で動作しています。
データベースを初期化します。同じ統合ターミナルで次を実行してください。
```
python manage.py migrate
```
注意: この手順を行わないと、アプリのトップページ (/) が OperationalError: no such table: hello_logmessage (HTTP 500) になります。

操作画面イメージ
[実行とデバッグ] ビュー (Ctrl + Shift + D) を開きます。サンプルには .vscode/launch.json が含まれているため、デバッグ構成「Python: Django」がすでに選択できます。

VS Code の実行デバッグの構成
[実行] > [デバッグの開始] を選択します (または F5 キーを押します)。
ターミナルに Starting development server at http://127.0.0.1:8000/ と表示されます。Ctrl キーを押しながらアドレスを選択して、ブラウザーでアプリを開きます。ポートは自動で転送されるため、Windows のブラウザーから http://127.0.0.1:8000/ で表示できます。これで、コンテナー内で実行されているプロジェクトを確認できます。

コンテナーを実行している VS Code
接続を終了するには、VS Code の左下隅にあるリモートインジケーターをクリックして、[リモート接続を終了する] を選択します。これで、VS Code はローカル環境の作業インスタンスに戻ります。

リモート接続の終了

補足 — コマンドラインからコンテナーを確認する

Dev Container の動作中に、PowerShell から wslc でコンテナーの状態を確認できます。Dev Containers のコンテナー名は自動で付けられ (例: northern_scandinavian)、通常の一覧表示では途中で切れて表示されるため、--no-trunc を付けて確認します。

wslc container list --no-trunc

操作画面イメージ

コンテナーのログを確認する場合は、次のようにします (コンテナー名の代わりに ID も指定できます)。

wslc container logs <コンテナー名>

コンテナー内で OS を確認する例です。

wslc exec <コンテナー名> uname

これで、wslc をドライバーとしてリモート開発コンテナーが正常に構成されました。このコンテナーで、VS Code を使用してコードの作成、ビルド、実行、デバッグなどを行えます。

補足 — コマンド ラインからコンテナーを確認する

補足 — コマンドラインからコンテナーを確認する