编写前端开发环境的docker 镜像并发布及使用教程

Posted 2023-03-05

参考技术A 如果之前没有接触过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等，无需在主机中安装且这样统一了前端开发环境。

1、编写Dockerfile文件

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

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

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

上图，可以看到我们成功的将主机的当前目录及文件挂载绑定到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