本文需要对docker 和现代前端开发模式有一定了解, docker入门可以参考
docker入门教程

不同系统请自行安装docker环境

初始化项目

目前网上找到的docker 搭建前端开发环境的资料都比较老了, 所以有了此篇文章

docker --version
Docker version 17.09.1-ce, build 19e2cf6

创建项目:

create-react-app my-project-react

安装依赖的过程可以直接ctrl-c停止, 因为我们可以在docker环境中安装依赖

在docker 中安装依赖

拉取docker image, 直接采用node镜像

docker pull node:8.11.4-stretch

下载完成后docker image ls可以查看已经在本地image:

cd my-project-react
docker run  -v `pwd`:/workspace -w /workspace --privileged=true node:8.11.4-stretch yarn

命令具体下文解释
install速度慢的, 可以添加.npmrc 和 .yarnrc文件

registry "https://registry.npm.taobao.org"
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
phantomjs_cdnurl "http://cnpmjs.org/downloads"
electron_mirror "https://npm.taobao.org/mirrors/electron/"
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"

在docker中运行

cd my-project-react

docker run -it -v `pwd`:/workspace -w /workspace -p 8000:8000 --privileged=true node:8.11.4-stretch yarn start

命令比较长, 逐段解释
docker run -it node:8.11.4-stretch
以node:8.11.4-stretch这个image 运行 docker container, -it 表示进入交互式终端;

-v `pwd`:/workspace
稍微熟悉shell脚本的就知道, pwd代表当前目录,pwd反引号代表执行pwd命令, 并输出, 作用就是将当期项目目录挂载到docker 容器中的 /workspace 目录;

-w /workspace --privileged=true
-w 指定工作目录为 /workspace(容器中), –privileged=true, 以防万一, 获取容器的root权限;

-p 8000:8000
将运行中容器的8000端口(项目运行端口)映射到主机的8000端口, 注意, 这两个端口必须一致, 否则热更新有问题.本地localhost:8000无法打开网页, 请先吧webpack-dev-server中host配置改为0.0.0, 再查看本机8000端口占用情况;

yarn start
以开发模式运行项目, 命令根据自己项目实际情况而定.

当然运行run命令也可以不加上 -it 参数, 直接运行, 这样的缺点是无法直接ctrl-c停止运行, 停止container 需要使用 docker container stop containerId命令

在docker中build

以上步骤都ok, build 过程就很简单了, 只需要把 yarn start 命令改成yarn build 即可, 也不需要端口.

docker run -v `pwd`:/workspace -w /workspace  --privileged=true node:8.11.4-stretch yarn build