一、前言

如果之前没有接触过docker，建议把 https://docs.docker.com/get-started/ 中的part1-part10看完并实现一遍再来看本篇文章。

二、目标

制作一个docker 镜像，其内置了Node v12.22、 npm源管理器nrm、单页面脚手架wlg-cli、多页面脚手架mp-cli-lc、browser-sync插件及curl、vim和git等，无需在主机中安装且这样统一了前端开发环境。

三、编写docker 镜像并发布

1、编写Dockerfile文件

FROM node:12.22-slim
RUN apt-get update && apt-get install -y curl && apt-get install -y vim && apt-get install -y git
#CMD curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
#CMD source ~/.bashrc
#RUN apt-get update && apt-get install -y vim  && apt-get install -y git
RUN npm install -g nrm
RUN npm install -g browser-sync
#RUN npm install -g gulp@3.9.1
RUN npm install -g mp-cli-lc
RUN npm install -g wlg-cli
#RUN npm install -g nodemon
ENV CHOKIDAR_USEPOLLING=true
#EXPOSE 3000 可以通过container link，被其他link的container访问到
COPY . ./customConfig
WORKDIR /customConfig
# CMD node index.js

2、构建镜像文件 docker image build -t front-end-env . （这里取镜像名称为front-end-env）
3、使用命令行登录docker docker login -u 你的docker用户名
4、打标签 docker tag front-end-env 你的docker用户名/front-end-env
5、 上传至仓库 docker push 你的docker用户名/front-end-env

四、使用已发布的docker 镜像

1、使用如下指令进入docker容器内部
docker container run -p 3000:3000 -it 你的用户名/front-end-env /bin/bash
（-p 3000:3000将容器内的3000端口暴露给主机3000端口,下图中我没有加这个）

image.png
可以看到，执行上述指令后，会进入了我们配置好的customConfig文件夹里了

2、验证docker容器内部的nrm是否安装成功

image.png
可以看到我们可以直接使用了nrm等工具了
3、docker容器内部启动一个前端页面服务，http://localhost:3000，在主机上如何访问呢？
其实，因为启动时带了-p 3000:3000
image.png
，因此通过访问主机的http://localhost:3000也就可以访问到docker镜像内部的http://localhost:3000前端页面了
4、如果想把主机的当前目录、文件等绑定挂载到docker容器内，以便在主机中使用docker容器内部的工具该怎么做呢？
如果在docker容器内，则使用exit退出docker容器，然后在PowerShell （windows操作系统）执行下面的指令：

 docker container run   -v "$(pwd):/fromHostDir" -p 3000:3000  -it front-end-env   /bin/bash

image.png

上图，可以看到我们成功的将主机的当前目录及文件挂载绑定到docker容器内了，进入到docker容器内后我们创建一个文件夹，在主机也会同步的创建了相同的文件夹，因为此时他们是同步的。ps:如果使用vscode，可以试试Remote-Containers 插件，可以更简单。（本人没有亲测过）

题外话：
1、借助虚拟机和Vagrant也可以实现类似统一环境功能。
2、使用Docker Compose可以简化上述操作

推荐资料：
1、https://wurang.net/webpack_hmr/
2、https://juejin.cn/post/6932808129189150734
3、https://www.cnblogs.com/pomelott/p/13325328.html
4、docker中的expose https://blog.csdn.net/weixin_43944305/article/details/103116557