基于docker搭建前端环境

前言

    又是一年毕业季,见某大学生苦苦挣扎于搭建node环境而不能享受开发的乐趣,于心不忍.特作此文。
此前已有一文,用 Docker 快速配置前端开发环境
而不同之处,本文会以step by step的形式帮助装机工完成一次搭建,到处复制:)

** 本文旨在于为摆脱搭建开发环境的重复劳动,并保持开发的一致性,一些观点并非完全正确,所以本文并不适合学习docker.**

适用人群

  1. 公司内装机到吐的装机工,现在可以只用吐一次啦
  2. 厌烦了总是有小学妹环绕左右,现在可以在本机搭建完后丢过去,就可以叫他们滚啦

认识

bVNY0r.png

<br />

  1. 在DOCKER_ENV中搭建基础环境,并保存
  2. HOST持久化Items,并让DOCKER_ENV读取到Items.
  3. 打通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完成了,还需要做的是将这些操作写回命令就更方便了...

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 转载自 http://blog.opskumu.com/docker.html 一、Docker 简介 Docke...
    极客圈阅读 10,543评论 0 120
  • 一、Docker 简介 Docker 两个主要部件:Docker: 开源的容器虚拟化平台Docker Hub: 用...
    R_X阅读 4,409评论 0 27
  • 0. 前言 docker是什么?docker是用GO语言开发的应用容器引擎,基于容器化,沙箱机制的应用部署技术。可...
    sessionboy阅读 3,884评论 2 49
  • 一次开发过程中竟遇到用 MAX函数比较 0 和 -1 时返回的是较小的值 -1简直逆天了。 使用场景大概如下: 结...
    swift加oc阅读 2,075评论 0 1
  • 北漂的第一年,自己炖了花旗参乌鸡汤喝,喝着喝着想起了曾经关于花旗参炖乌鸡的遥想。读书时离家几百公里,工作时离家几千...
    初心尚存阅读 494评论 0 1