Docker + Next.js + Remote-Containers

.devcontainer/devcontainer.json

{
  "name": "myapp-frontend",
  "dockerComposeFile": [
    "../docker-compose.yml",
    "./docker-compose.extend.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"
      ]
    }
  }
}

.devcontainer/Dockerfile

FROM node:16.15.0

ENV TZ=Asia/Tokyo
ARG USERNAME=node

RUN corepack enable npm
RUN SNIPPET="export PROMPT_COMMAND='history -a' && export HISTFILE=/commandhistory/.bash_history" \
  && mkdir /commandhistory \
  && touch /commandhistory/.bash_history \
  && chown -R ${USERNAME} /commandhistory \
  && echo ${SNIPPET} >> "/home/${USERNAME}/.bashrc"

USER ${USERNAME}
RUN mkdir -p /home/${USERNAME}/.vscode-server/extensions
WORKDIR /myapp-frontend

EXPOSE 3000

.devcontainer/docker-compose.extend.yml

version: '3.9'
services:
  frontend:
    build:
      context: .
      dockerfile: ./.devcontainer/Dockerfile
    volumes:
      - sources:/myapp-frontend
      - bashlog:/bashlog
      - vscode-extensions:/home/node/.vscode-server/extensions
    command: /bin/sh -c "while sleep 1000; do :; done"
volumes:
  sources:
  bashlog:
  vscode-extensions:

/Dockerfile

FROM node:16.15.0

ENV TZ=Asia/Tokyo

WORKDIR /myapp-frontend
RUN corepack enable npm
USER node

EXPOSE 3000
CMD ["yarn", "dev"]

/docker-compose.yml

version: '3.9'
services:
  frontend:
    build: .
    volumes:
      - .:/myapp-frontend
    environment:
      NODE_ENV: development
    ports:
      - 3000:3000
      - 9229:9229