Skip to main content

VS Code 容器开发简介

以下列出两个示例:

快速开始Node项目容器开发​

本示例方便快速进行node项目容器开发.

假如你的项目名称叫 my-vsc-container-app

项目根目录创建文件夹 .devcontainer, 文件夹下创建以下文件:

devcontainer.json​

.devcontainer/devcontainer.json
// https://code.visualstudio.com/docs/remote/devcontainerjson-reference
{
  "name": "Node.js Dev",
  "build": {
    "dockerfile": "dev.Dockerfile",
    "context": "."
  },
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
      }
    }
  },
  "forwardPorts": [
    3000
  ],
  "postCreateCommand": "npm install",
  "workspaceMount": "source=${localWorkspaceFolder}/,target=/workspace,type=bind,consistency=cached",
  "workspaceFolder": "/workspace",
  "mounts": [
    "source=my-vsc-container-app-node-modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
    // macOS/Linux 环境可以取消注释以下行, 即可自动将.ssh目录挂载到容器内
    // , "source=${localEnv:HOME}/.ssh,target=/home/node/.ssh,type=bind"
    // Windows 环境可以取消注释以下行, 即可自动将.ssh目录挂载到容器内
    //, "source=C:${localEnv:HOMEPATH}/.ssh,target=/home/node/.ssh,type=bind"
  ],
  "extensions": [
    "allanoricil.nuxt-vscode-extension",
    "eamodio.gitlens",
    "editorconfig.editorconfig",
    "esbenp.prettier-vscode",
    "octref.vetur"
  ]
}

dev.Dockerfile:​

该文件是 Remote - Contaienr 实际使用的镜像, 在这个文件里可以安装一些工具:

.devcontainer/dev.Dockerfile
FROM node:lts

# 根据需要是否在容器里安装其他工具
RUN apt install -y git

Node项目共享NPM依赖​

本示例会将项目的npm依赖做成镜像, 方便其他人使用项目开发.

假如你的项目名称叫 my-vsc-container-app

项目根目录创建文件夹 .devcontainer, 文件夹下创建以下文件:

devcontainer.json​

.devcontainer/devcontainer.json
// https://code.visualstudio.com/docs/remote/devcontainerjson-reference
{
  "name": "Node.js Dev",
  "build": {
    "dockerfile": "dev.Dockerfile",
    "context": "."
  },
  "customizations": {
    "vscode": {
      "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
      }
    }
  },
  "forwardPorts": [
    3000
  ],
  "postCreateCommand": "tar -xvf /data/dep.tar.gz --directory ./",
  "workspaceMount": "source=${localWorkspaceFolder}/,target=/workspace,type=bind,consistency=cached",
  "workspaceFolder": "/workspace",
  "mounts": [
    "source=my-vsc-container-app-node-modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
    // macOS/Linux 环境可以取消注释以下行, 即可自动将.ssh目录挂载到容器内
    // , "source=${localEnv:HOME}/.ssh,target=/home/node/.ssh,type=bind"
    // Windows 环境可以取消注释以下行, 即可自动将.ssh目录挂载到容器内
    //, "source=C:${localEnv:HOMEPATH}/.ssh,target=/home/node/.ssh,type=bind"
  ],
  "extensions": [
    "allanoricil.nuxt-vscode-extension",
    "eamodio.gitlens",
    "editorconfig.editorconfig",
    "esbenp.prettier-vscode",
    "octref.vetur"
  ]
}

dev.Dockerfile:​

该文件是 Remote - Contaienr 实际使用的镜像, 在这个文件里可以安装一些工具:

.devcontainer/dev.Dockerfile
FROM your-private-docker-hub-host/my-vsc-container-app-dep:latest

这里的 FROM 指令指定的镜像是下面 dev.Dockerfile

dev.Dockerfile.dockerignore​

该文件排除 node_modules 目录, 是 dev.Dockerfile 构建是排除的文件

node_modules

dep.Dockerfile​

dep.Dockerfile
FROM node:16

WORKDIR /data
COPY ./*.json ./
COPY ./.npmrc ./
# 这里安装依赖并
RUN npm ci && \
  tar -czf dep.tar.gz ./node_modules && \
  rm -rf ./node_modules

dep.Dockerfile.dockerignore​

该文件配置 dep.Dockerfile 使用, 用于构建镜像时忽略的文件:

*
!*.json
!.npmrc

build-dependency.sh​

该脚本用于构建镜像: my-vsc-container-app-dep

DOCKER_BUILDKIT=1 docker build --progress=plain -t my-vsc-container-app-dep:latest --file dep.Dockerfile ../ && \
docker tag my-vsc-container-app-dep:latest your-private-docker-hub-host/my-vsc-container-app-dep:latest && \
docker push your-private-docker-hub-host/my-vsc-container-app-dep:latest

使用​

创建以上文件后, 第一次需要在项目的 .devcontainer 文件夹内执行 build-dependency.sh 脚本创建依赖镜像并推送到私服(注意一定要使用终端进入到 .devcontainer目录后在执行该脚本, 因为该脚本里的 docker build 传入的目录是父级目录). 然后其他人获取完项目就可以直接使用容器开发了, 无需重复执行npm install安装依赖.