docker 搭建前端开发环境不彻底指南

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