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"
],
"extensions": [
"allanoricil.nuxt-vscode-extension",
"eamodio.gitlens",
"editorconfig.editorconfig",
"esbenp.prettier-vscode",
"octref.vetur"
]
// "remoteUser": "node"
}

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"
],
"extensions": [
"allanoricil.nuxt-vscode-extension",
"eamodio.gitlens",
"editorconfig.editorconfig",
"esbenp.prettier-vscode",
"octref.vetur"
]
// "remoteUser": "node"
}

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 传入的目录是父级目录). 然后其他人获取完项目就可以直接使用容器开发了.