WSL2上のDockerをVSCodeからアクセスする

## はじめに
前回の記事では、WSLで動作させたDockerでCakePHPのインストールまで行いました。

https://qiita.com/yoyoyo4/items/8a778eb7e352965ec77b

今回は、DockerとVS Codeの連携設定を行います。

## 環境
- Windows 10 Home 22H2
- WSL2 Ubuntu 22.04.2 LTS
- Visual Studio Code 1.77.3
## Remote Developmentをインストール
Remote Developmentは、VS Codeを実行しているローカルPCから、リモート環境のファイル編集やターミナル操作が行えるVS Codeの拡張機能です。
![Remote Development](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/ec71b942-fd45-4d8c-4cb1-0d35fd16fbbd.png)
Remote - SSH、Remote - Containers、Remote - WSLの3つの機能が含まれます。

## WSLからVS Codeを起動
次に、`docker-compose.yml`を設置した~/cakephpで`code`コマンドを実行し、WSLからVS Codeを起動します。
```bash:~/cakephp
yoyoyo@wsl:~/cakephp$ code .
```
起動したVS Codeの左下に「WSL:Ubuntu-22.04」と表示されていれば接続成功です。
`code`コマンドを実行したディレクトリのファイルがExplorerタブに表示されています。
![Visual Studio Code](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/58bb4f3e-f597-3053-36ce-914d0b5b0def.png)

## VS CodeからDockerにアクセス
VS Code左下の「WSL:Ubuntu-22.04」をクリックし、「Reopen in Container」を選択。
![Reopen in Container](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/61215a14-df02-e0be-7f57-2d529e7ea33f.png)
「From 'docker-compose.yml'」を選択。
![From 'docker-compose.yml'](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/83d6f72f-7862-adbe-2ac6-a23b9a08dbfa.png)
「web」コンテナを選択。
![web](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/3e80104a-b2ea-9839-5eee-c656391490bb.png)
「/var/www/html」を開く。
![/var/www/html](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/973c0349-80ef-617d-1e43-d0e7feab4e03.png)
Dockerコンテナに接続することができました！
![html](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/68e8ffe6-2040-eb0c-2bb8-8b26c73d5065.png)
## Dev Containerについて
VS CodeからWSLのDockerに接続すると、`.devcontainer`というフォルダが作成されます。
このフォルダは、VS CodeのDev Containerによって管理されているフォルダです。
```bash:~/cakephp
yoyoyo@wsl:~/cakephp$ ls -la
total 28
drwxr-xr-x  5 yoyoyo yoyoyo 4096 May  1 17:17 .
drwxr-x---  7 yoyoyo yoyoyo 4096 May  1 16:21 ..
drwxr-xr-x  2 yoyoyo yoyoyo 4096 May  1 17:17 .devcontainer
-rw-r--r--  1 yoyoyo yoyoyo   80 May  1 14:02 .env
drwxr-xr-x  4 yoyoyo yoyoyo 4096 May  1 13:18 docker
-rw-r--r--  1 yoyoyo yoyoyo  563 May  1 12:49 docker-compose.yml
drwxr-xr-x 14 root   root   4096 May  1 14:41 html
```
Dev Containerとは、VS CodeからDockerコンテナを開発環境として使用するための拡張機能です。
![Architecture Dev Containers](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/e479562c-ed1f-b0f2-b61a-451b9bc8cc34.png)
[Developing inside a Container using Visual Studio Code Remote Development](https://code.visualstudio.com/docs/devcontainers/containers) より引用

`.devcontainer`には`devcontainer.json`と`docker-compose.yml`が含まれており、`devcontainer.json`にDockerコンテナの設定が記載されています。
```bash:.devcontainer
yoyoyo@wsl:~/cakephp$ ls .devcontainer/
devcontainer.json  docker-compose.yml
```
先ほど指定した`docker-compose.yml`とwebコンテナの設定はここにあります。
```
{
        "name": "Existing Docker Compose (Extend)",
        "dockerComposeFile": [
                "../docker-compose.yml",
                "docker-compose.yml"
        ],
        "service": "web",
        "workspaceFolder": "/workspaces/${localWorkspaceFolderBasename}"
}
```
いったん`.devcontainer`が作成されると、次回以降は設定ファイルから同じコンテナを開くことができるようになります。
![h.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3348786/7605df68-653b-cdac-bf77-e8293193f73f.png)
## おわりに
いままでVS Codeは単なるエディタとしか使っていなかったのですが、ローカルPCのWindowsのみで開発環境のインフラ構築、SSH接続、ファイルの編集まで完結できるのはとても便利ですね。
実環境にサーバーを建て、ミドルウェアをインストールし、TeraTermでファイルをやり取り…というこれまでの作業を考えると、こんなに簡単でいいの？とびっくりしてしまいます。