未加星标

使用Docker构建统一的前端开发环境虚拟化

字体大小 | |
[大数据技术 所属分类 大数据技术 | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

使用Docker构建统一的前端开发环境虚拟化
工具
使用Docker构建统一的前端开发环境虚拟化
基础
使用Docker构建统一的前端开发环境虚拟化
Hadoop
使用Docker构建统一的前端开发环境虚拟化
服务器
使用Docker构建统一的前端开发环境虚拟化
Docker
使用Docker构建统一的前端开发环境虚拟化
镜像

往事

15年刚来运满满,那个时候的前端团队还只有2个人,还没有用到打包的相关工具,我们重构了前端的开发流程,引入了Vue做基础开发框架,使用了FIS3做项目打包,由于项目快速迭代,公共库的增加,我们引入了Webpack,配合npm进行基础库的拆分,方便维护和管理。同时也带来了一个新的问题,那就是前端开发环境越来越复杂。


记得以前一个前端开发,那时候号称一个记事本就能写HTML。现在随着项目复杂度提高,你需要安装VS Code、Node、Webpack等等为了开发、打包等一系列工具。一般新来的员工我们就会按照如下4步骤安装相关环境。感受下:


1:下载Node安装

// 基础库

npm install yarn -g

yarn global add nrm

nrm use taobao

yarn global add cooking-cli@1.5.3

yarn global add rmdir

yarn global add cross-env

yarn global add rimraf

cooking import autoprefixer

cooking import less

cooking import lint

cooking import vue

cooking import vue2

//内部打包上传发布工具

nrm add _131 http://xxx.xxx.xxx.xxx:4873

nrm use _131

yarn global add ymm_build

// 老的fis3项目依赖包

yarn global add fis3@3.4.25

yarn global add fis3-hook-module@1.2.2

yarn global add fis3-hook-relative@1.0.7

yarn global add fis3-parser-less-2.x@0.1.4

yarn global add fis3-postpackager-loader@1.3.19

2:clone项目代码

3:yarn install 安装项目依赖

4:npm run dev运行开发项目


刚开始团队规模小。新入成员速度也不快。帮助新员工进来安装下环境还能促进沟通,一切感觉都是挺好的。就这样过了一年多。


随着人越来越多,团队成长速度越来越快,每位新进入的同学都要这样让老司机带着撸一次,原来快乐的事次数多了也就麻木了,要命的还有进来的人安装环境的时间不一样。导致有些全局的工具包是有小版本差异的。这在新进入的员工有时候碰到的一些莫名其妙的问题,最后查下来好多都是环境不统一导致的。这才开始慢慢重视起来。以前npm是没有锁版本机制的。特别是一些全局的工具库,每个人都有自己的一套,线上环境的打包机器上也有一套。不少时候开发是好的,线上打包发布的时候会出现和预期不一样的情况。痛的次数多了。


思考如何能够统一前端团队的开发环境。下面上干货。


使用

Docker介绍

百度百科上的介绍:

Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 linux机器上,也可以实现虚拟化。容器是完全使用沙箱机制,相互之间不会有任何接口。




使用Docker构建统一的前端开发环境虚拟化

DockerClient客户端

Docker Daemon守护进程

Docker Image镜像

DockerContainer容器


一个命令就用到了上面4个部分,这个命令也是后面我们最常用的。


docker run -v "$(PWD)":/data -p 8000:8000 harbor.ymmoa.com/h5/ymmbaseup npm run dev


通过DockerClient发送run指令到Docker Daemon,Docker Daemon通过harbor.ymmoa.com/h5/ymmbaseup镜像创建了一个容器去运行npm run dev的命令。容器暴露了8000端口,并关联了$(PWD)(本地目录)到容器里面的/data 目录。


这次Docker你可以简单理解为它可以把Linux+Node+npm装的依赖包打包成一个镜像,然后其他电脑安装Docker后,可以快速下载这个镜像到电脑中进行使用,如何使用我们后面说。再简单点,你就把你个Docker打包好的镜像当做一个应用程序,每个电脑都可以下载下来然后运行它。 先这么理解吧,如果觉得我说的不够清楚的可以找度娘。


Docker安装

推荐使用阿里云做加速https://dev.aliyun.com/search.html。



使用Docker构建统一的前端开发环境虚拟化


使用Docker构建统一的前端开发环境虚拟化

按照上面的方法安装好就行,加速配置好,不然下载镜像非常慢。安装细节就自行百度了。


Docker制作镜像


创建一个Dockerfile文件

新建一个目录,并在里面创建Dockerfile文件。内容如下:


## 指定这个镜像的基础是什么,我们选择了node: 8.9.3这个版本作为基础镜像

FROM node:8.9.3

MAINTAINER stoneship stoneship <258137678@qq.com>

##安装node相关依赖

RUN \

npm install yarn -g \

yarn global add nrm && \

nrm use taobao &&\

yarn global add vue-cli &&\

yarn global add cross-env

## 安装nginx

## 安装数据库...

## 创建一个目录

RUN mkdir /data

## 指定命令运行的目录

WORKDIR /data


特别说明的是,每条run指令在当前基础镜像执行,并且提交新镜像。当命令比较长时,可以使用“/”换行。这里这个demo里面我们就打包了些Node依赖的工具,你可以自己添加自己的run命令达到你环境需要依赖。


build镜像

在Dockerfile目录运行下面的build命令, -t参数指定了创建好的镜像的名称:


docker build -t dockerdemo .


build成功后可以通过下面命令查询你的镜像列表:


docker images



使用Docker构建统一的前端开发环境虚拟化

上传到服务器


这个时候打包好的镜像只是在你的电脑上。如果需要别人也能用到这个镜像最方便的是上传你的镜像到服务器。通过下面命令进行上传:


docker push dockerdemo:latest


使用以及打包好的镜像

我们在dockerdemo镜像里面打包了vue-cli ,下面我们尝试通过deckerdemo镜像里面的vue-cli来创建一个项目,注意有些网络慢的。通过vue init webpack-simple my-project下载模板项目可能会失败。这个只做演示说明如何使用docker去运行相关命令。你可以尝试运行其他命令。


docker run -v "$(PWD)":/data dockerdemo vue init webpack-simple my-project


简单解释下:上面命令表示Docker通过dockerdemo镜像创建了一个容器,把当前目录关联到了容器的/data目录,并在目录中运行 vue init webpack-simple my-project 命令,同样你可以运行其他命令。


改造已有项目进行适配

有了自己项目统一的环境镜像后,也知道如何用Docker来运行命令后,原来的项目开发打包通过npm run的。现在可用通过Docker来运行。命令入下:


docker run -v "$(PWD)":/data dockerdemo npm run dev

docker run -v "$(PWD)":/data dockerdemo npm run dist

....


对这些命令可以结合makefile或者.bat文件进行整合。现在运满满前端项目对makefile进行了调整。如下可以进行参考:


使用Docker构建统一的前端开发环境虚拟化


使用Docker构建统一的前端开发环境虚拟化

现在我们的项目打包的命令由原来的npm run build_dist变成了make build_dist(win上是Makefile.bat build_dist),简单的改变却是换了另外的Docker容器进行打包,环境统一了。通过Docker的环境结构如下图。可以感受下。



使用Docker构建统一的前端开发环境虚拟化

总结

经过使用Docker构建统一的前端开发环境后,新来的人安装环境的步骤就变成如下3步,并且不会出现开发环境版本不同的问题,感受下。


安装Docker

clone代码,安装项目依赖

然后直接通过Docker容器运行项目或者打包项目


原文链接:https://juejin.im/post/5b127087e51d450686184183


欢迎加入本站公开兴趣群

软件开发技术群

兴趣范围包括:Java,C/C++,pythonphp,Ruby,shell等各种语言开发经验交流,各种框架使用,外包项目机会,学习、培训、跳槽等交流

QQ群:204132433


Hadoop源代码研究群

兴趣范围包括:Hadoop源代码解读,改进,优化,分布式系统场景定制,与Hadoop有关的各种开源项目,总之就是玩转Hadoop

QQ群:204050420

tags: Docker,镜像,add,global,run,npm,打包,#160,yarn,build,命令,安装,dockerdemo,data,docker
分页:12
转载请注明
本文标题:使用Docker构建统一的前端开发环境虚拟化
本站链接:https://www.codesec.net/view/577316.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 大数据技术 | 评论(0) | 阅读(154)