DevContainer

VS Code で、プロジェクトのディレクトリを WSL で開いて作業する。本番環境の nginx とか PHP のバージョンと合わせるため DevContainer を使うけど、作成するファイル等について。

./.devcontainer
├── Dockerfile
├── compose.yaml
└── devcontainer.json

こんな構成。

.devcontainer/devcontainer.json は以下のような感じ。
name は projectName というかディレクトリ名というか（だいたいディレクトリ名はプロジェクト名になっていると思う）。docker compose を使うので dockerComposeFile を指定しておく。service は dockerComposeFile 内のどの service に接続するかの指定。postCreateCommand で Python の venv を設定している。

{
  "name": "<<<projectName>>>",
  "dockerComposeFile": "compose.yaml",
  "service": "devcontainer",
  "workspaceFolder": "/workspaces/<<<projectName>>>",
  "postCreateCommand": "python3 -m venv .venv && . .venv/bin/activate && python -m pip install --upgrade pip",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance",
        "charliermarsh.ruff"
      ],
      "settings": {
        "python.defaultInterpreterPath": "${workspaceFolder}/.venv/bin/python",
        "files.insertFinalNewline": true
      }
    }
  }
}

.devcontainer/compose.yaml は以下のような感じ。
まだ開発用のコンテナ以外は入っていない状態。イメージは Dockerfile でビルドして sleep infinity で常駐させている。/workspaces/jmaxml-collector にホスト側のプロジェクトディレクトリをバインドマウントして working_dir に指定しておく。タイムゾーンは Asia/Tokyo にしておく。

services:
  devcontainer:
    build:
      context: .
      dockerfile: Dockerfile
    command: sleep infinity
    volumes:
      - ..:/workspaces/jmaxml-collector:cached
    environment:
      TZ: Asia/Tokyo
    working_dir: /workspaces/jmaxml-collector
    init: true
    tty: true
    stdin_open: true

.devcontainer/Dockerfile は以下のような感じ。
Ubuntu 22.04 がベースで、タイムゾーンを設定しておく。Python の他に curl, git, jq, less, vim, tree を入れておく。

FROM ubuntu:22.04

ENV DEBIAN_FRONTEND=noninteractive
ENV TZ=Asia/Tokyo

RUN apt-get update \
    && apt-get install -y --no-install-recommends \
        ca-certificates \
        curl \
        git \
        jq \
        less \
        vim \
        tree \
        tzdata \
        python3 \
        python3-venv \
        python3-pip \
        mysql-client \
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*

VS Code で Connect to WSL を実行。上記のディレクトリを開いて、Reopen in Container で使える。

コメント