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