利用Docker + VSCode搭建前端开发环境

Docker的介绍

Docker官网： Docker

Docker 是一个开源的应用容器引擎，可以让代码和运行环境绑定在一起，并且可以通过打包镜像来制作自己的代码运行环境。

为什么要使用Docker

1. 项目对于Node的版本依赖不同，导致老项目只能使用旧版本的Node，而新项目需要使用新版的Node，每次运行项目时需要切换Node版本。
2. 有些项目可能会出现端口冲突的问题

VSCode 如何连接容器

• 安装VSCode插件Remote - Containers

点击左下方按钮

选择Attach to Running Container去连接正在运行的容器，编辑容器内的代码

如何使用Docker搭建开发环境

1. 使用官方的自带的开发环境

此时可以看到有两种选择：

• 一种是根据git仓库地址来制作开发环境
• 另一种是直接选择本地文件目录制作开发环境； 尝试后两种方法的缺点
• git仓库方式会根据代码的文件类型来拉取基本的镜像，但对于vue文件后缀，无法判断出正确的文件后缀只能提供一个空的环境，没有预置Node
• 本地文件目录的方式，也舍去了环境判断，只提供一个基础的环境 总结：两种方法都比较复杂，需要自己重新去安装Node等依赖，目前也没有发现可以自定义镜像的地方。

2. 使用VSCode插件Remote - Containers提供创建容器的的功能

创建容器

注意：如果使用默认的 add development container configuration files时，有remoteUser配置时，需要去掉，否则可能无法使用root权限。

• 创建 .devcontainer 文件夹
• 创建 .devcontainer/devcontainer.json

{
	"name": "Node.js",
	"build": {
		"dockerfile": "Dockerfile",
	},
	"customizations": {
		"vscode": {
			
			"extensions": [
				"dbaeumer.vscode-eslint"
			]
		}
	},

	"features": {
		"git": "os-provided"
	}
}

• 创建 .devcontainer/Dockerfile 文件

FROM node:10.15.3

• 点击左下方remote-container，然后选择Open Folder in Container 综上你就可以在一个独立的Node环境下进行前端开发了

如果有设置私库地址、自动化安装包的需求，可以修改Dockerfile

FROM node:10.15.3
RUN npm config set registry xxx && npm install

端口转发

项目启动后，VSCode会提示你打开PORTS，在这里可以看到端口的映射关系，例如我这边的9001端口被转发到54807，可以解决有些项目因为端口冲突导致启动不了的情况。