⑴ 编写前端开发环境的docker 镜像并发布及使用教程
如果之前没有接触过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