Remote - Containers 를 사용한 Visual Studio Code 원격 개발 feat.Dockerfile

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node/.devcontainer/base.Dockerfile

# [Choice] Node.js version (use -bullseye variants on local arm64/Apple Silicon): 16, 14, 12, 16-bullseye, 14-bullseye, 12-bullseye, 16-buster, 14-buster, 12-buster
ARG VARIANT="16-bullseye"
FROM mcr.microsoft.com/vscode/devcontainers/javascript-node:0-${VARIANT}

# 시간 및 날짜 설정
ENV TZ Asia/Seoul

RUN apt-get update && apt-get install -y locales
# 한국어 설정   
RUN locale-gen ko_KR.UTF-8
RUN export LC_ALL=ko_KR.UTF-8

# 테마 적용
RUN sed -i 's/codespaces/agnoster/' /home/node/.zshrc
RUN sed -i'' -r -e "/prompt_hg/a\  prompt_newline" /home/node/.oh-my-zsh/themes/agnoster.zsh-theme

# [Optional] Uncomment if you want to install an additional version of node using nvm
ARG EXTRA_NODE_VERSION=16.14.0
RUN su node -c "source /usr/local/share/nvm/nvm.sh && nvm install ${EXTRA_NODE_VERSION}"

# [Optional] Uncomment if you want to install more global node modules
RUN su node -c "npm install -g yarn @vue/cli parcel-bundler"

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node
{
  "name": "DataUs Frontend",
  "build": {
    "dockerfile": "Dockerfile",
    // Update 'VARIANT' to pick a Node version: 16, 14, 12.
    // Append -bullseye or -buster to pin to an OS version.
    // Use -bullseye variants on local arm64/Apple Silicon.
    "args": { "VARIANT": "16-bullseye" }
  },

  // Set *default* container specific settings.json values on container create.
  "settings": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "eslint.validate": ["javascript", "typescript"]
  },

  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens-insiders",
    "octref.vetur",
    "Orta.vscode-jest",
    "MS-CEINTL.vscode-language-pack-ko",
    "ritwickdey.LiveServer",
    "csstools.postcss",
    "ms-python.python",
    "bradlc.vscode-tailwindcss",
    "mechatroner.rainbow-csv"
  ],

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

  // Use 'postCreateCommand' to run commands after the container is created.
  // "postCreateCommand": "yarn install",

  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
  "remoteUser": "node",
  "features": {
    "git": "latest",
    "sshd": "latest",
    "homebrew": "latest",
    "python": "latest",
    "java": "lts"
  }
}

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.217.4/containers/javascript-node
{
  "name": "DataUs Frontend",
  "build": {
    "dockerfile": "Dockerfile",
    "args": { "VARIANT": "16-bullseye" }
  },

  "settings": {
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "eslint.alwaysShowStatus": true,
    "eslint.workingDirectories": [{ "mode": "auto" }],
    "eslint.validate": ["javascript", "typescript"],
    "terminal.integrated.defaultProfile.linux": "/bin/zsh"
  },

  "extensions": [
    "dbaeumer.vscode-eslint",
    "eamodio.gitlens-insiders",
    "octref.vetur",
    "Orta.vscode-jest",
    "MS-CEINTL.vscode-language-pack-ko",
    "ritwickdey.LiveServer",
    "csstools.postcss",
    "ms-python.python",
    "bradlc.vscode-tailwindcss",
    "mechatroner.rainbow-csv"
  ],

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

  // Use 'postCreateCommand' to run commands after the container is created.
  "postCreateCommand": "yarn install",   ### yarn install 

  // Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
  "remoteUser": "root",     ### 사용자를 node -> root  
  "features": {
    "git": "latest",
    "sshd": "latest",
    "homebrew": "latest",
    "python": "latest",
    "java": "lts"
  }
}