【VSCode】DevContainersで環境構築する際の構成要素まとめ

初めに

毎回必要な構成要素を忘れてしまうので備忘録的にメモです。

以下が必須です。
Dockerのインストール 4.12.0~推奨(あまり古いとReopen in Containerこけます。公式読んでないので間違ってるかも)
VSCodeのインストール
VSCodeの拡張機能 Dev Containers
https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

ディレクトリ構成

parent/
      ├ docker/ (コンテナ)
      │       ├ infra/(コンテナ)
      │       │    ├ mysqlとか/
      │       │    │          └ Dockerfileとか
      │       |    └ phpとか/
      │       |             └ Dockerfileとか
      │ 　 　 ├ .devcontainer/
      │       |              ├ devcontainer.json
      │       |              └ docker-compose.yml
      │　  　 └　.env
      │
      └ source/
              ├ .vscode/
              |        ├ launch.json
              |        └ settings.json
              └ src/ (実際に動かすもの。)

各ファイルの役割

devcontainer.json

Reopen in containerで接続するコンテナと拡張機能などが指定できる。
記入例

{
    "name": "VSCodeの上に表示される名前。好きなもので。",
    "dockerComposeFile": "docker-compose.yml",
    "service": "コンテナ名",
    "workspaceFolder": "コンテナのマウントしているディレクトリを記述する。",
    # ../sample:/dataeだったら"/data"と記述する。
    "customizations": {
        "vscode": {
            "extensions": [
              拡張機能ID
            ]
        }
    }
}

docker-compose.yml

コンテナの構成を指定する。
記入例(php用のコンテナ例)

version: "3.9"
services:
  app:
    build: ./infra/php/
    ports:
      - 5173:5173
    volumes:
      - ../../sample:/data 
      - #1階層上の別ディレクトリを参照してマウントしている。が.devcontainerディレクトリ目線なので二個上参照しているような書き方になる。
      - ./infra/php/php.ini:/etc/php/php.ini
      - node-modules:/data/node_modules
      - ../log:/var/log
    working_dir: /data
    tty: true

launch.json

デバッガやchromeなど起動したいものを記述する。
記入例

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080/phpinfo.php",
            "webRoot": "${workspaceFolder}"
        },
    ]
}

settings.json

VSCodeの設定を統一できる。
記入例

  "[scss]": {
    "editor.wordSeparators": "`~!#%^&*()=+[{]}\\|;:'\",.<>/?"
  },