devcontainerの利用サンプル

devcontainer

devcontainer公式ページ
https://code.visualstudio.com/docs/devcontainers/containers

サンプルの構成

Next.js、Mongo DB、Azuriteをcomposeで環境作成
init.shで.envを作成して、Dockerfileで読み込みdocker-composeに渡すイメージ

root/
  ┣ .devcontainer
  ┃   ┣ devcontainer.json
  ┃   ┣ docker-compose.yml
  ┃   ┣ Dockerfile
  ┃   ┗ init.sh
  ┃
  ┣ src (Next.js)

.devcontainer/Dockerfile

FROM node:18-slim

ARG USERNAME=$USERNAME
ARG UID=$UID
ARG GID=$GID

USER $USERNAME

.devcontainer/docker-compose.yml

version: '3.2'

services:
  next:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
      args:
        UID: $UID
        GID: $GID
        USERNAME: $USERNAME
    depends_on:
      - mongo
      - azure-storage
    user: $UID:$GID
    tty: true
    command: sleep infinity
    volumes:
      - ../:/workspaces:cached
    environment:
      MONGO_URI: mongodb://root:example@mongo:27017/
    deploy:
      resources:
        limits:
          memory: 4GB
  mongo:
    image: mongo
    volumes:
      - mongo-data:/data/db
    environment:
      MONGO_INITDB_ROOT_USERNAME: root
      MONGO_INITDB_ROOT_PASSWORD: example
  mongo-express:
    image: mongo-express
    ports:
      - 8081:8081
    depends_on:
      - mongo
    environment:
      ME_CONFIG_MONGODB_ADMINUSERNAME: root
      ME_CONFIG_MONGODB_ADMINPASSWORD: example
      ME_CONFIG_MONGODB_URL: mongodb://root:example@mongo:27017/
  azure-storage:
    image: mcr.microsoft.com/azure-storage/azurite
    ports:
      - 10000:10000
      - 10001:10001
      - 10002:10002
    environment:
      AZURITE_ACCOUNTS: "devstoreaccount1;UseDevelopmentStorage=true"
    volumes:
      - azure-storage-data:/data
volumes:
  mongo-data:
  node_modules_volume:
  azure-storage-data:

featuresでzshとgitを設定

vscodeのフォーマット設定をromeで行う

.devcontainer/devcontainer.json

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-docker-compose
{
  "name": "Existing Docker Compose (Extend)",

  // Update the 'dockerComposeFile' list if you have more compose files or use different names.
  // The .devcontainer/docker-compose.yml file contains any overrides you need/want to make.
  "dockerComposeFile": "docker-compose.yml",

  // The 'service' property is the name of the service for the container that VS Code should
  // use. Update this value and .devcontainer/docker-compose.yml to the real service name.
  "service": "next",

  // The optional 'workspaceFolder' property is the path VS Code should open by default when
  // connected. This is typically a file mount in .devcontainer/docker-compose.yml
  // "workspaceFolder": "/workspace",
  "workspaceFolder": "/workspaces/",

  // Features to add to the dev container. More info: https://containers.dev/features.
  "features": {
    "ghcr.io/devcontainers-contrib/features/zsh-plugins:0": {},
    "ghcr.io/devcontainers/features/git:1": {}
  },

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [],

  // Uncomment the next line if you want start specific services in your Docker Compose config.
  // "runServices": [],

  // Uncomment the next line if you want to keep your containers running after VS Code shuts down.
  // "shutdownAction": "none",

  "initializeCommand": "${localWorkspaceFolder}/.devcontainer/init.sh",

  // Configure tool-specific properties.
  "customizations": {
    "vscode": {
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "rome.rome",
        "[typescript]": {
          "editor.formatOnSave": true
        },
        "[typescriptreact]": {
          "editor.formatOnSave": true,
          "editor.defaultFormatter": "rome.rome"
        },
        "editor.codeActionsOnSave": {
          "source.fixAll.eslint": true,
          "source.fixAll": true,
          "source.organizeImports": true,
          "quickFix.rome": true
        },
      },
      "extensions": [
        "rome.rome",
        "dsznajder.es7-react-js-snippets",
        "mongodb.mongodb-vscode"
      ]
    }
  },

  // Uncomment to connect as an existing user other than the container default. More info: https://aka.ms/dev-containers-non-root.
  "remoteUser": "${localEnv:USERNAME}"
}

.devcontainer/init.sh

# create .env file
echo "UID=$(id -u $USER)" > .devcontainer/.env
echo "GID=$(id -g $USER)" >> .devcontainer/.env
echo "USERNAME=$USER" >> .devcontainer/.env

exit 0