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

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

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

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

# DevContainerの設定
## Dev Containerのインストールと初期設定
VSCodeを起動して「Dev Container」をインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/c2df463d-6971-871e-ca39-de242b99bbd7.png)

### ※ポイント※WSLからの接続を有効化する
Dev Containersがインストールできたら、歯車　クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/79a858d9-1a04-6621-e636-6324b04a36b0.png)

Extension Settings クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/64c9a4ed-0ba7-9f6d-5315-9cf6894bc0b6.png)

Dev Containers Execute in WSL にチェックを入れる　←これにチェックを入れるとVSCodeからWSLのDockerへ接続できるようになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/2b95ae73-8fa1-6e05-436b-a86e71ded246.png)

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

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

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

VSCodeを起動して、フォルダを用意して、以下の構成でファイルを作ります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/5d6260cc-4007-441e-a7b8-cf72c5061bb3.png)

```yml: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
    # ...
```

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

```json:.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" 入力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/84667c48-12df-e39d-c2b4-ed60e21ea40f.png)

接続するコンテナを尋ねられるのでPython Container 選択　※実際はどちらでもいい
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/cc4a9ca6-d377-33c0-2326-8cae8fadec7a.png)

しばし待つとウィンドウが開きなおされ、コンテナへ接続できる
※コンテナが動いてなかったら、コンテナを立ち上げてから接続するようになる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ee1bee05-ac85-94b0-fa52-09cf4b8ef20e.png)

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

### 別のコンテナに移動する
python用コンテナに入れたので次はnode用コンテナへの接続に切り替える

python用コンテナに入っている状態でCtrl＋Pでパレット開いて
「Dev Containers: Switch Container」入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/c7b1025a-29de-1ccc-af95-a38fe9280531.png)

ここでもどっちのコンテナへ移動したいか選択できる
Node Container 選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/2c2614d3-8673-8b8c-26af-5e1494bda605.png)

成功したら、ウィンドウが開きなおされて、node用コンテナの画面に切り替わる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/f942d818-59e6-b150-34e8-71c925c316e1.png)

### コンテナから抜けて、前のフォルダに戻りたいとき
左下の「Dev Container: Node Container」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/77465e2f-bd26-d7b8-c9e0-0cb74cf35aad.png)

パレットが開くので、一番下までスクロールして。。。「Close Remote Connection」クリック

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/8bcb45a9-e953-d897-4faa-8684de28bb4c.png)

戻ってきました。でも、、フォルダがどこにも選択されてないので
Open Folderで前のフォルダを開きなおしました
でも、これで無事に帰ってこれたので成功でしょう…！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/80279e3e-c445-49df-a99b-b4f1ccd10560.png)

# 番外編：コンテナ接続してるときのコンテナの様子
コンテナの様子がみたいだけなら、WSLから見れる。

WSLを起動して以下実行

```
docker ps
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/416263/ec3d86fb-d620-218d-42fa-1adcb0d27065.png)

Dev Containerはコンテナ接続をVSCodeからお手軽に操作するための仕組みなので
単純にコンテナ立ち上げて～とかだけであれば別にWSLから操作してもOK