使用 vscode 搭建基于 Docker 容器的 Node.js 开发环境

使用 vscode 搭建基于 Docker 容器的 Node.js 开发环境

主机操作系统: MacOS

安装 vscode 和 Docker

根据官网手册安装即可.

安装 vscode 扩展

• Remote - Containers
• Docker

创建 Dockerfile 和 docker-compose.yml

• 创建目录 workspace/node

mkdir -p workspace/node

• 使用 vscode 的 docker 扩展程序创建 Dockerfile 和 docker-compose.yml

在 vscode 使用 File -> Open... 打开目录 workspace/node, 按下 F1 输入 docker add, 然后选择 Docker: Add Docker Files to Workspace, 接着选择 Node.js, 继续选择 Yes, 默认 3000.

• Dockerfile

FROM node:latest

WORKDIR /home/app
USER node

RUN yarn config set registry "https://registry.npm.taobao.org/"
RUN npm config set registry "https://registry.npm.taobao.org/"

ENV PORT 3000

EXPOSE 3000
EXPOSE 4000

• docker-compose.yml

# cSpell: disable
version: '3.4'

services:
  docker_node:
    image: docker-node
    build: .
    ports:
      - 3000:3000
      - 4000:4000
    volumes:
      - ./:/home/app
      - ~/.ssh/id_rsa:/home/node/.ssh/id_rsa:ro
      - ~/.ssh/known_hosts:/home/node/.ssh/known_hosts:ro
      - ~/.gitconfig:/home/node/.gitconfig:ro
    environment:
      TZ: Asia/Shanghai
    networks: 
      - mongodb_default

networks: 
  mongodb_default:
    external: true

上面最后三个 bind 卷标是便于容器内使用 ssh 协议进行 git 远程仓库 (比如: github/gitee)管理, 如果你更希望在主机进行 git 远程仓库管理科无需配置

• .devcontainer/devcontainer.json

// cSpell: disable
// For format details, see https://aka.ms/vscode-remote/devcontainer.json or this file's README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.117.1/containers/docker-existing-docker-compose
// If you want to run as a non-root user in the container, see .devcontainer/docker-compose.yml.
{
	"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",
		"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": "docker_node",

	// 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",

	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"terminal.integrated.shell.linux": null
	},

	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"esbenp.prettier-vscode",
		"visualstudioexptteam.vscodeintellicode",
		"piotrpalarz.vscode-gitignore-generator",
		"dbankier.vscode-quick-select",
		"roscop.activefileinstatusbar",
		"streetsidesoftware.code-spell-checker",
		"christian-kohler.path-intellisense",
		"donjayamanne.githistory",
		"dbaeumer.vscode-eslint",
		"yzhang.markdown-all-in-one",
		"davidanson.vscode-markdownlint",
		"ms-azuretools.vscode-docker"
	]

	// 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",

	// Uncomment the next line to run commands after the container is created - for example installing git.
	// "postCreateCommand": "apt-get update && apt-get install -y git",

	// Uncomment to connect as a non-root user. See https://aka.ms/vscode-remote/containers/non-root.
	// "remoteUser": "vscode"
}

vscode 连接容器

vscode 中按 F1, 输入 Remote-Containers: Open, 选择 Remote-Containers: Open Folder in Contaiers, 然后选择当前路径即可