本文须要对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