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

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

WSL で Docker を使用してアプリの開発を開始するには、WSL、Dev Containers、Docker 拡張機能と共に VS Code を使用することをお勧めします。

この例では、Django 用の Hello World チュートリアルのソースコードを使用します。独自のプロジェクトソースコードを使用する場合は、この手順を省略できます。GitHub から HelloWorld-Django Web アプリをダウンロードするには、WSL ターミナルで次を入力します。
```
git clone https://github.com/dev-lab-io/helloworld-django.git
```
重要: コードは、ツールを使用しているのと同じファイルシステムに格納します。これにより、ファイルアクセスのパフォーマンスが向上します。この例では、Linux ディストリビューション (Ubuntu) を使用して、WSL ファイルシステム \\wsl\ にプロジェクトファイルを格納します。Windows ファイルシステムにプロジェクトファイルを格納すると、WSL の Linux ツールを使用してこれらのファイルにアクセスするときに、処理が大幅に遅くなります。
WSL ターミナルから、このプロジェクトのソースコードフォルダーにディレクトリを変更します。
```
cd helloworld-django
```
次のように入力して、ローカル WSL 拡張機能サーバーで実行されている VS Code でプロジェクトを開きます。
```
code .
```
初回は、信頼確認画面が表示されますので、`はい、作成者を信頼します` ボタンをクリック

VS Code インスタンスの左下隅にある緑色のリモートインジケーターを確認して、WSL Linux ディストリビューションに接続していることを確認します。

VS Code の WSL リモートインジケーター
VS Code コマンドパレット (Ctrl + Shift + P) で「開発コンテナー: コンテナーで再度開く」または「開発コンテナー: コンテナーでフォルダーを開く…」を選択します。
詳細はクイックスタート: コンテナー内の既存のフォルダーを開くを参照してください。コマンドが表示されない場合は、Dev Containers 拡張機能がインストールされていることを確認してください。

VS Code Dev Containers コマンド
コンテナー化するプロジェクトフォルダーを選択します。
ここでは、次のようになります。/home/appuser/helloworld-django/

VS Code Dev Containers フォルダーパス
プロジェクトフォルダー (リポジトリ) に Dev Containers 構成がまだないため、コンテナー定義の一覧が表示されます。表示されるコンテナー構成定義の一覧は、プロジェクトの種類に基づいてフィルター処理されます。
この例の Django プロジェクトの場合は、Python 3 を選択し、バージョンは 3.12-bullseye を選択します。他のオプションは選択不要です。

VS Code Dev Containersの構成定義
VS Code の新しいインスタンスが開き、新しいイメージの構築が開始されます。ビルドが完了すると、コンテナーが開始されます。新しい .devcontainer フォルダーが、devcontainer.json ファイル内の構成情報と共に表示されます。プロジェクトの関連ライブラリーを Dev Container 起動時にインストールするために、postCreateCommand: pip3 install -r requirements.txt の行をコメント解除します。変更内容を適用するには、VS Code で [開発コンテナー:キャッシュなしのコンテナーのリビルド] を選択します。これにより、Dev Container が再ビルドされ、起動時に必要なライブラリーが自動的にインストールされます。

VS Code の .devcontainer フォルダー
プロジェクトが WSL とコンテナー内の両方に接続されていることを確認するには、VS Code 統合ターミナル (Ctrl + Shift + ~) を開きます。「uname」と入力してオペレーティングシステムを確認し、「python3 --version」と入力して Python のバージョンを確認します。uname が “Linux” として返された場合、WSL 2 エンジンに接続しています。Python のバージョン番号は、WSL にインストールされている Python のバージョンとは異なる可能性のあるコンテナーの構成に基づきます。
VS Code を使用してコンテナー内でアプリを実行およびデバッグするには、[実行] メニューを開きます (Ctrl + Shift + D)。次に、[実行とデバッグ] を選択し、プロジェクトに最適なデバッグ構成 (この例では “Django”) を選択します。これにより、プロジェクトの .vscode フォルダーに launch.json ファイルが作成され、アプリを実行する手順が表示されます。

VS Code の実行デバッグの構成 (手動設定)

VS Code の実行デバッグの構成 (自動設定)
VS Code 内から、[実行] > [デバッグの開始] を選択します (または F5 キーを押します)。
これによりターミナルが開き、”http://127.0.0.1:8000/ で開発サーバーを起動しています。サーバーを終了するには、Ctrl + C を押します” と表示されます。Ctrl キーを押しながらアドレスを選択して、ブラウザーでアプリを開きます。これで、コンテナー内で実行されているプロジェクトを確認できます。

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

Docker コンテナーを実行している VS Code