前言
又是一年毕业季,见某大学生苦苦挣扎于搭建node环境而不能享受开发的乐趣,于心不忍.特作此文。
此前已有一文,用 Docker 快速配置前端开发环境
而不同之处,本文会以step by step的形式帮助装机工完成一次搭建,到处复制:)
** 本文旨在于为摆脱搭建开发环境的重复劳动,并保持开发的一致性,一些观点并非完全正确,所以本文并不适合学习docker.**
适用人群
- 公司内装机到吐的装机工,现在可以只用吐一次啦
- 厌烦了总是有小学妹环绕左右,现在可以在本机搭建完后丢过去,就可以叫他们滚啦
认识
bVNY0r.png
<br />
- 在DOCKER_ENV中搭建基础环境,并保存
- HOST持久化Items,并让DOCKER_ENV读取到Items.
- 打通DOCKER_ENV与HOST的网络连接
准备
system : Win10或者Mac
dcoker : Docker CE
terminal : 任意
gui-tool : Kitematic
Win10以下不推荐,VirtualBox会卡!
DockerCE下载地址: https://www.docker.com/community-edition#/download
Kitematic下载地址: https://github.com/docker/kitematic/releases
1.搭建基础环境DOCKER_ENV
安装前DockerCE,如果是Win的同学记得先开启Hyper-V,需要他支持.
安装完去设置下换个源,这提供一个 http://af9c260a.m.daocloud.io
QQ图片20170521093509.png
拉一个系统镜像,无脑centos.
docker pull daocloud.io/centos:7 //下载centos7
确认镜像是否存在
docker images
然后就可以打命令把镜像载入跑起来了,尽量不要用gui工具,会有些奇奇怪怪的BUG.
比如这一步他有个验证不识别三方镜像导致载入失败
docker run -i -t --name m-centos daocloud.io/centos:7 /bin/bash //起centos
这时可以打开Kitematic感受一下刚刚起的一个container
QQ图片20170521100325.png
可以开始撸环境啦,用到什么,一路yum install就好了.
我这需要node,npm,来一发
curl -sL https://rpm.nodesource.com/setup_7.x | bash -
yum install -y nodejs
好了后就可以把你的改动保存一下到镜像了,其中7ca87为你的容器ID,可以直接在GUI工具查看.
docker save m-node -o D:\docker\m-node.tar //保存全部信息
到这一步环境搭建已经算完了,可以双击打开这个文件确认是否能打开.
save可以保存元信息,文件会稍微大一点,要是觉得过大,可以自行tar.bz2压缩,我这压缩后就90MB
2.Items
由于项目文件原来存在于HOST中某个文件夹,要将他mount到第一步搭建的执行环境中.
注:如果这一步报错提示没有shared,那就进docker的setting打开就好啦.
docker import D:\docker\m-node.tar m-node //从文件载入镜像
docker run -it --name m-node -v /data m-node /bin/bash //镜像起容器,并挂载data
上面未指定挂载目标,所以这里需要指定下,我使用了GUI,嗯,还是选着爽
QQ截图20170521115057.png
最后得到的m-node就可以进行一些操作了,比如我这可以进到/data/执行npm install | npm run dev
在这里m-items的镜像其实可以通过commit得到,不过为了避免过多的概念,不多做解释.
3.网络连接
因为环境实质上处于上一步m-node 中,所以需要让HOST能访问到其中,还是用GUI工具点点鼠标就完事拉.
嗯,到这总算真正结束了.尝试打开Dreamweaver改改文件,再访问一下localhost,484很棒~
QQ图片20170521112405.png
还是有个小坑,webpack-dev-middlewave会检测不到文件变化,暂时就poll了一下解决先
使用
因为第一步中中已经环境搭完了,所以将镜像文件download后,你的小伙伴执行第二步和第三步操作就能用了哦
另外为了便利,可以自己尝试将常用的命令写成脚本,像我这只要npm run comd就能开始搬砖了呢
"comd":"docker exec -it m-combination /bin/bash -c \"cd /data && npm run dev\""
总结
正如官网所说,保持团队内开发环境一致也是很有必要的,不然有的你痛苦的...
如果像java,php想要这么玩,也是大同小异.按着套路来就好了哦.嗯,好像还有个捣奈特...
为了省事很多操作用GUI完成了,还需要做的是将这些操作写回命令就更方便了...
网友评论