WSL+Docker+VSCode+DockerComposeで複数コンテナ接続

Posted at 2024-08-17

はじめに

結論、公式サイトを見たらわかりやすかったのだけれども
いくつかハマったポイントがあるので記憶に残す

手順

大まかな手順はこちら
参考にしたサイトだけ残しておきます

WSLインストール
　　参考：https://qiita.com/matarillo/items/61a9ead4bfe2868a0b86
VSCodeインストール
参考：https://www602.math.ryukoku.ac.jp/Prog1/vscode-win.html
WSLへDockerインストール
WSLを起動して以下のサイトを参考にインストール
参考：https://zenn.dev/thyt_lab/articles/fee07c278fcaa8
DevContainerの設定
ここから詳細な話題に入ります

DevContainerの設定

Dev Containerのインストールと初期設定

VSCodeを起動して「Dev Container」をインストール

※ポイント※WSLからの接続を有効化する

Dev Containersがインストールできたら、歯車　クリック

Extension Settings クリック

Dev Containers Execute in WSL にチェックを入れる　←これにチェックを入れるとVSCodeからWSLのDockerへ接続できるようになる

devcontainer+Docker-Composeを使って複数コンテナを作成する

参考：https://code.visualstudio.com/remote/advancedcontainers/connect-multiple-containers

公式を参考に、python用コンテナとnode用コンテナを１つずつ作ります。
※特にサービスが動いているわけでもなく、単に２つのコンテナがあるだけのシンプルなやつ

VSCodeを起動して、フォルダを用意して、以下の構成でファイルを作ります。

docker-compose.yml

version: '3'
services:
  python-api:
    image: mcr.microsoft.com/devcontainers/python:1-3.12-bookworm
    volumes:
      # Mount the root folder that contains .git
      - .:/workspace:cached
    command: sleep infinity
    links:
      - node-app
    # ...

  node-app:
    image: mcr.microsoft.com/devcontainers/typescript-node:1-20-bookworm
    volumes:
      # Mount the root folder that contains .git
      - .:/workspace:cached
    command: sleep infinity
    # ...

.devcontainer/python-container/devcontainer.json

{
  "name": "Python Container",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "python-api",
  "shutdownAction": "none",
  "workspaceFolder": "/workspace/python-src"
}

.devcontainer/node-container/devcontainer.json

{
  "name": "Node Container",
  "dockerComposeFile": ["../../docker-compose.yml"],
  "service": "node-app",
  "shutdownAction": "none",
  "workspaceFolder": "/workspace/node-src"
}

※hello.pyとhello.jsは割愛

コンテナへの接続方法

Ctrl+Pでパレット起動して、"Dev Containers: Reopen in Container" 入力

接続するコンテナを尋ねられるのでPython Container 選択　※実際はどちらでもいい

しばし待つとウィンドウが開きなおされ、コンテナへ接続できる
※コンテナが動いてなかったら、コンテナを立ち上げてから接続するようになる

ポイントは、左下に「Dev Containers: Python Container」と表示してること
左上はPYTHON SRC[DEV CONTAINER PYTHON CONTAINER]を表示して、
ソースコードはpyrhon-srcの中身しか表示されていないこと
右下のターミナルは、コンテナの中のディレクトになってます。