全ファイルをボリュームで管理する

Docker

/Dockerfile

FROM node:16.15.0

ENV TZ=Asia/Tokyo
ARG USERNAME=node

WORKDIR /myapp-frontend
COPY /package*.json /myapp-frontend
RUN npm ci
USER ${USERNAME}

EXPOSE 3000

/docker-compose.yml

version: '3.9'
services:
  frontend:
    build: .
    volumes:
      - .:/myapp-frontend
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
      - 9229:9229
    volumes:
      - .:/workspace:cached
      - node-node_modules:/myapp-frontend/node_modules
    command: /bin/sh -c "while sleep 1000; do :; done"
volumes:
  node-node_modules:

Remote-Containers

.devcontainer/devcontainer.json

{
  "name": "myapp-frontend",
  "dockerComposeFile": ["../docker-compose.yml"],
  "service": "frontend",
  "workspaceFolder": "/myapp-frontend",
  "customizations": {
    "vscode": {
      "extensions": [
        "EditorConfig.EditorConfig",
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "VisualStudioExptTeam.vscodeintellicode",
        "arcanis.vscode-zipfs",
        "bradlc.vscode-tailwindcss"
      ]
    }
  }
}