基于docker搭建前端环境

jay_tian 发布于2019-08-21 15:49 / 3255人阅读

摘要：前言又是一年毕业季见某大学生苦苦挣扎于搭建环境而不能享受开发的乐趣于心不忍特作此文。

前言

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

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

适用人群

公司内装机到吐的装机工,现在可以只用吐一次啦

厌烦了总是有小学妹环绕左右,现在可以在本机搭建完后丢过去,就可以叫他们滚啦

认识

在DOCKER_ENV中搭建基础环境,并保存

HOST持久化Items,并让DOCKER_ENV读取到Items.

打通DOCKER_ENV与HOST的网络连接

准备

systemWin10或者Mac
dcokerDocker CE
terminal任意
gui-toolKitematic

Win10以下不推荐,VirtualBox会卡!
DockerCE下载地址: https://www.docker.com/commun...
Kitematic下载地址: https://github.com/docker/kit...

1.搭建基础环境DOCKER_ENV

安装前DockerCE,如果是Win的同学记得先开启Hyper-V,需要他支持.
安装完去设置下换个源,这提供一个 http://af9c260a.m.daocloud.io

拉一个系统镜像,无脑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

可以开始撸环境啦,用到什么,一路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:dockerm-node.tar //保存全部信息

到这一步环境搭建已经算完了,可以双击打开这个文件确认是否能打开.

save可以保存元信息,文件会稍微大一点,要是觉得过大,可以自行tar.bz2压缩,我这压缩后就90MB

2.Items

由于项目文件原来存在于HOST中某个文件夹,要将他mount到第一步搭建的执行环境中.

注:如果这一步报错提示没有shared,那就进docker的setting打开就好啦.

docker import D:dockerm-node.tar m-node //从文件载入镜像
docker run -it --name m-node -v /data m-node /bin/bash //镜像起容器,并挂载data

上面未指定挂载目标,所以这里需要指定下,我使用了GUI,嗯,还是选着爽

最后得到的m-node就可以进行一些操作了,比如我这可以进到/data/执行npm install | npm run dev

在这里m-items的镜像其实可以通过commit得到,不过为了避免过多的概念,不多做解释.

3.网络连接

因为环境实质上处于上一步m-node 中,所以需要让HOST能访问到其中,还是用GUI工具点点鼠标就完事拉.

嗯,到这总算真正结束了.尝试打开Dreamweaver改改文件,再访问一下localhost,484很棒~

还是有个小坑,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完成了,还需要做的是将这些操作写回命令就更方便了...

GPU云服务器云服务器 docker环境搭建 docker搭建开发环境 docker搭建java环境 docker搭建php环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88263.html

基于docker搭建前端环境

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

Cristalven 2019-06-28 15:47 评论0 收藏0
PHP开发环境03 - 使用KFKDock搭建PHP项目环境

摘要：基于快速搭建服务根据自定义配置文件快速搭建环境。目录此项目能做什么地址视频教程包含软件项目目录结构快速运行运行服务运行项目运行前端服务此项目能做什么搭建开发生产环境。搭建开发生产环境。基于Docker快速搭建Web服务根据自定义配置文件快速搭建Web环境。目录此项目能做什么 GItHub地址、视频教程包含软件项目目录结构快速运行KFKDock 运行PHP服务运行L...

Zhuxy 2019-06-28 16:14 评论0 收藏0
PHP开发环境03 - 使用KFKDock搭建PHP项目环境

摘要：基于快速搭建服务根据自定义配置文件快速搭建环境。目录此项目能做什么地址视频教程包含软件项目目录结构快速运行运行服务运行项目运行前端服务此项目能做什么搭建开发生产环境。搭建开发生产环境。基于Docker快速搭建Web服务根据自定义配置文件快速搭建Web环境。目录此项目能做什么 GItHub地址、视频教程包含软件项目目录结构快速运行KFKDock 运行PHP服务运行L...

yagami 2019-06-28 18:17 评论0 收藏0