如何用docker打造前端开发环境

作者&投稿:茶琛 (若有异议请与网页底部的电邮联系)
~

显示上述信息即成功!

配置开发环境

假设有一个项目,它必须要运行在8.14.0版本的node中,我们先去Dockerhub中将这个版本的node镜像拉取下来:

dockerpullnode:8.14.0

拉取完成后,列出镜像列表:

dockerimages

有了镜像后,就可以使用镜像启动一个容器:

dockerrun-it--namemy_container3b7ecd51/bin/bash

上面的命令表示以命令行交互的模式启动一个容器,并将容器的名称指定为my_container。

此时已经新建并进入到容器,容器就是一个linux系统,可以使用linux命令,我们尝试输入一些命令:

可以看到这个node镜像除了预装了node8.14.0,还预装了git2.11.0。

镜像和容器的的关系:镜像只预装了最基本的环境,比如上面的node:8.14.0镜像可以看成是预装了node8.14.0的linux系统,而容器是基于镜像克隆出来的另一个linux系统,可以在这个系统中安装其它环境比如java、python等,一个镜像可以建立多个容器,每个容器环境都是相互隔离的,互不影响(比如在容器A中安装了java,容器B是没有的)。

使用命令行操作项目并不方便,所以我们先退出命令行模式,使用exit退出:

借助IDE可以更方便的玩docker,这里我们选择vscode,打开vscode,安装Remote-Containers扩展,这个扩展可以让我们更方便的管理容器:

安装成功后,左下角会多了一个图标,点击:

在展开菜单中选择“AttachtoRunningContainer”:

此时会报一个错“Therearenorunningcontainerstoattachto.”,因为我们刚刚退出了命令行交互模式,所以现在容器是处理停止状态的,我们可以使用以下命令来查看正在运行的容器:

dockerps#或者dockercontainerls

发现列表中并没有正在运行的容器,我们需要找到刚刚创建的容器并将其运行起来,先显示所有容器列表:

#-a可以显示所有容器,包括未运行的dockerps-a#或者dockercontainerls-a

运行指定容器:

#使用容器名称dockerstartmy_container#或者使用容器id,id只需输入前几位,docker会自动识别dockerstart8ceb4

再次运行dockerps命令后,就可以看到已运行的容器了。然后回到vscode,再次选择"AttachtoRunningContainer",就会出现正在运行的容器列表:

选择容器进入,添加一个bash终端,就可以进入我们刚刚的命令行模式:

我们安装vue-cli,并在/home目录下创建一个项目:

#安装vue-clinpminstall-g@vue/cli#进入到home目录cd/home#创建vue项目vuecreatedemo

在vscode中打开目录,发现打开的不再是本机的目录,而是容器中的目录,找到我们刚刚创建的/home/demo打开:

输入npmrunserve,就可以愉快的进行开发啦:

上面我们以node8.14.0镜像为例创建了一个开发环境,如果想使用新版的node也是一样的,只需要将指定版本的node镜像pull下来,然后使用这个镜像创建一个容器,并在容器中创建项目或者从git仓库中拉取项目进行开发,这样就有了两个不同版本的node开发环境,并且可以同时进行开发。

使用ubuntu配置开发环境

上面这种方式使用起来其实并不方便,因为node镜像只安装了node和git,有时我们希望镜像可以内置更多功能(比如预装nrm、vue-cli等npm全局包,或者预装好vscode的扩展等),这样用镜像新建的容器也包含这些功能,不需要每个容器都要安装一次。

我们可以使用ubuntu作为基础自由配置开发环境,首先获取ubuntu镜像:

#不输入版本号,默认获取latest即最新版dockerpullubuntu

新建一个容器:

dockerrun-itd--namefed597ce/bin/bash

这里的-itd其实是-i-t-d的合写,-d是在后台中运行容器,相当于新建时一并启动容器,这样就不用使用dockerstart命令了。后面我们直接用vscode操作容器,所以也不需要使用命令行模式了。

我们将容器命名为fed(表示frontenddevelopment),建议容器的名称简短一些,方便输入。

ubuntu镜像非常纯净(只有72m),只具备最基本的能力,为了后续方便使用,我们需要更新一下系统,更新前为了速度快一点,先换到阿里的源,用vscode打开fed容器,然后打开/etc/apt/sources.list文件,将内容改为:

debhttp://mirrors.aliyun.com/ubuntu/focalmainrestricteduniversemultiversedebhttp://mirrors.aliyun.com/ubuntu/focal-securitymainrestricteduniversemultiversedebhttp://mirrors.aliyun.com/ubuntu/focal-updatesmainrestricteduniversemultiversedebhttp://mirrors.aliyun.com/ubuntu/focal-proposedmainrestricteduniversemultiversedebhttp://mirrors.aliyun.com/ubuntu/focal-backportsmainrestricteduniversemultiversedeb-srchttp://mirrors.aliyun.com/ubuntu/focalmainrestricteduniversemultiversedeb-srchttp://mirrors.aliyun.com/ubuntu/focal-securitymainrestricteduniversemultiversedeb-srchttp://mirrors.aliyun.com/ubuntu/focal-updatesmainrestricteduniversemultiversedeb-srchttp://mirrors.aliyun.com/ubuntu/focal-proposedmainrestricteduniversemultiversedeb-srchttp://mirrors.aliyun.com/ubuntu/focal-backportsmainrestricteduniversemultiverse

在下面的终端中依次输入以下命令更新系统:

dockerimages0

安装sudo:

dockerimages1

安装git:

dockerimages2

安装wget(wget是一个下载工具,我们需要用它来下载软件包,当然也可以选择axel,看个人喜好):

dockerimages3

为了方便管理项目与软件包,我们在/home目录中创建两个文件夹(projects与packages),projects用于存放项目,packages用于存放软件包:

dockerimages4

由于ubuntu源中的node版本比较旧,所以从官网中下载最新版,使用wget下载node软件包:

dockerimages5

解压文件:

dockerimages6

配置node环境变量:

dockerimages7

安装nrm,并切换到taobao源:

dockerimages8

安装一些vscode扩展,比如eslint、vetur等,扩展是安装在容器中的,在容器中会保留一份配置文件,到时打包镜像会一并打包进去。当我们关闭容器后再打开vscode,可以发现本机的vscode中并没有安装这些扩展。

至此一个简单的前端开发环境已经配置完毕,可以根据自己的喜好自行添加一些包,比如yarn、nginx、vim等。

打包镜像

上面我们通过ubuntu配置了一个简单的开发环境,为了复用这个环境,我们需要将其打包成镜像并推送到dockerhub中。

第一步:先到docker中注册账号。

第二步:打开shell,登录docker。

第三步:将容器打包成镜像。

dockerimages9

第四步:为镜像打tag,因为镜像推送到dockerhub中,要用tag来区分版本,这里我们先设置为latest。tag名称加上了用户名做命名空间,防止与dockerhub上的镜像冲突。

dockerrun-it--namemy_container3b7ecd51/bin/bash0

第五步:将tag推送至dockerhub。

dockerrun-it--namemy_container3b7ecd51/bin/bash1

第六步:将本地所有关于fed的镜像和容器删除,然后从dockerhub中拉取刚刚推送的镜像:

dockerrun-it--namemy_container3b7ecd51/bin/bash2

用vscode打开容器,打开命令行,输入:

dockerrun-it--namemy_container3b7ecd51/bin/bash3

然后再看看vscode扩展,可以发现扩展都已经安装好了。

如果要切换node版本,只需要下载指定版本的node,解压替换掉/home/packages/node即可。

至此一个docker开发环境的镜像就配置完毕,可以在不同电脑,不同系统中共享这个镜像,以达到快速配置开发环境的目的。

注意事项

如果要将镜像推送到dockerhub,不要将重要的信息保存到镜像中,因为镜像是共享的,避免重要信息泄露。

千万不要在容器中存任何重要的文件或信息,因为容器一旦误删这些文件也就没了。

如果在容器中开发项目,记得每天提交代码到远程仓库,避免容器误删后代码丢失。




如何利用 Docker 环境加速 Android 应用的构建
Docker核底层技术LXC(Linux Container)Docker其面加薄薄层添加许用功能 篇stackoverflow问题答案诠释DockerLXC区别能够让更解Docker 简单翻译几点:Docker提供种移植配置标准化机制允许致性同机器运行同Container;LXC本身能同机器同配置便移植运行;DockerApp应用部署做优化LXC帮助脚本主要聚焦于何机器启更快耗更少...

使用VSCode实现远程服务器下的Docker 开发
使得在远程服务器上进行开发如同在本地一样流畅。安装并配置好插件后,只需在VSCode中创建或打开一个dev container的工作区,它会自动构建和管理所需的Docker环境,让你无需离开IDE就能享受到Docker容器带来的隔离和便捷。这样,无论开发环境在何处,你都能享受到高效、一致的开发体验。

Docker容器是什么?它比虚拟机强在何处?
Docker容器是一个开源的应用容器引擎,可以让开发者用统一的形式打包其自身的应用,然后包装到一个可以移植的容器中,随后发布到任何可以安装Docker引擎的服务器上(比如主流的Linux机器或者是Windows机器),当然也可以实现虚拟化。Docker容器几乎没有性能开销,可以很容易的在机器和数据中心运行,其最大的特色...

Docker容器间网络互联原理,讲不明白算我输
3、把交换机和机房中的机器的ip在同一个网段,类比成docker0、和你启动的docker容器的ip也同属于172网段。 类比成这样: 我们刚才做类比理解docker0的时候说:把机房里的电脑都连接在交换机上,类比成docker 容器作为一台设备都连接着宿主机上的docker0。那具体的实现落地实现用的是啥技术呢? 答案是:veth pair veth...

Vagrant与Docker有何区别?哪个更适合你的项目?
Docker通过镜像提供了一致的软件打包与执行环境,支持大规模与高效资源利用,并与PaaS和FaaS平台良好兼容。虚拟机提供了来自不同云与内部虚拟机供应商的安全与隔离执行环境,Vagrant提供了一致的CLI与配置语法,简化了跨供应商虚拟机实例化。Vagrant与Docker并非相互排斥,团队可以结合使用,例如利用Docker开发与...

微服务架构实践 - 你只懂docker与spring boot就够了吗?
docker已经家喻户晓了,这是继虚拟机以后,又一重大变革,将所有的单个微服务都放在docker中,这样你何时何地想部署,直接丢过去就OK了,快到爆。用几句简单的命令就搞定了负载均衡,而且还可以平滑升级,版本升级的时候,大家就不用告诉客户:系统通知,某日某晚00:00-08:00我行处于系统升级维护中,...

怎么用通俗易懂的话来解释Docker(容器)技术
官网的介绍是这样的:Docker is an open platform for developers and sysadmins to build, ship, and run distributed applications...其实看完这句话还是不明白究竟是啥的,下面就慢慢解释。不过长话短说的话,把他想象成一个用了一种新颖方式实现的超轻量虚拟机,在大概效果上也是正确的。当然在实...

什么是host container
从Linux内核的角度分析容器的诞生,精简的流程即如以上4步,而这4个步骤也恰好巧妙的阐述了namespace和cgroup这两种技术和进程的关系,以及进程与容器的关系。进程与容器的关系,自然是:容器不能脱离进程而存在,先有进程,后有容器。然而,大家往往会说到“使用Docker创建Docker Container(容器),然后在...

Docker和云计算的关系是什么?
Docker使用Google公司推出的Go语言进行开发实现,基于Linux内核的cgroup,namespace,以及AUFS类的UnionFS等技术,对进程进行封装隔离,属于操作系统层面的虚拟化技术。Docker能够自动执行重复性任务,例如搭建和配置开发环境,从而解放了开发人员以便他们专注在真正重要的事情上:构建杰出的软件。时速云是一家全栈...

Docker 容器的日志的
(Docker容器本身倾向于无状态,但应用的日志则不然,频繁的迁移可能对日志管理造成困扰)如果你的容器如同一个漂泊不定的行者,从北京的一夜狂欢到上海的清醒,再到杭州的工作日程,即使容器本身可能忘记这些细节,但你的日志足迹却可能被追踪。如果你的容器应用需要与云端共享这些经历,比如使用肾机(指高...

连南瑶族自治县15318396733: 如何在docker前端开发环境 -
资之泰乐: Python 2.7 中没有提供这种自动缓存.我们需要显式地转换代码,才能避免这种情况下的重复计算.def fib_seq(n):if n 请注意,此代码使用了 Python 同时分配两个局部变量的能力.

连南瑶族自治县15318396733: 如何用docker 搭建eclipse+java开发环境 -
资之泰乐: 下载完成后,使用如下脚本启动#!/bin/bash xhost +local:eclipse docker run -ti --rm --name eclipse -v ~/workspace:/home/eclipse/workspace:rw \-v /tmp/.x11-unix:/tmp/.x11-unix -e display=unix$display\ iwakoshi/eclipse --device /dev/snd

连南瑶族自治县15318396733: 怎么使用Docker搭建PHP开发环境 -
资之泰乐: 最方便的方式是下载一个php集成开发环境.然后安装即可.比如常用的php集成环境:xampp,phpstudy,wampserver等等.

连南瑶族自治县15318396733: 如何利用Docker构建开发环境,yunmar很想知道 -
资之泰乐: Docker的英文本意是码头工人,也就是搬运工,这种搬运工搬运的是集装箱(Container),集装箱里面装的可不是商品货物,而是任意类型的App,Docker把App(叫Payload)装在Container内,通过Linux Container技术的包装将App变成一种...

连南瑶族自治县15318396733: docker在web开发中得使用流程是怎样的 -
资之泰乐: 设想一个如下场景:我们需要一个webapp,其功能是用户注册并将注册信息插入到数据库,环境为Ubuntu+Tomcat+Mysql,怎么做?不使用Docker的话,我们通常会这样做,以Ubuntu为操作系统,然后安装Tomcat和MySQL,最后把app部署上...

连南瑶族自治县15318396733: 如何在docker里部署nodejs -
资之泰乐: 下载镜像,安装环境 我们先执行如下命令,启动虚拟机: $ boot2docker start 2014/08/18 21:22:41 Waiting for VM to be started... ........... 2014/08/18 21:23:21 Started. 2014/08/18 21:23:21 Docker client does not run on Windows for now. Please ...

连南瑶族自治县15318396733: 怎么利用docker搭建一个预发布环境 -
资之泰乐: 1、首先你要确定使用什么基础镜像:因为你的项目是JAVA项目,在网页链接hub仓库寻找自己需要的基础镜像,推荐使用JAVA 8基础镜像2、搞定服务运行的相关文件,将服务需要运行的文件整理并写入dockerfile3、编写dockerfile文件,选择基础镜像和挂载服务运行文件,运行方式等4、运行dockerfile打包的镜像容器就可以了

连南瑶族自治县15318396733: docker中,jdk用镜像 怎么配置环境变量 -
资之泰乐: docker中,jdk用镜像配置环境变量的方法如下:一、安装 JDK1、首先,解压 JDK 程序包:tar -zxf /mnt/software/jdk-7u67-linux-x64.tar.gz -C .2、重命名 JDK 目录:mv jdk1.7.0_67/ jdk/ 二、设置环境变量 首先,编辑.bashrc文件 vi ~/.bashrc 然后,在该文件末尾添加如下配置:export JAVA_HOME=/opt/jdk export PATH=$PATH:$JAVA_HOME 最后,需要使用source命令,让环境变量生效:source ~/.bashrc

连南瑶族自治县15318396733: 如何利用docker快速构建MySQL主从复制环境
资之泰乐: Docker容器虚拟化的好处 Docker项目的发起人和Docker Inc.的CTO Solomon Hykes认为,Docker在正确的地点、正确的时间顺应了正确的趋势—即高效地构建应用.现在开发者需要能方便地创建运行在云平台上的应用,也就是说应用必须能够...

连南瑶族自治县15318396733: docker 怎么安装jdk和tomcat -
资之泰乐: 利用Dockerfile构建一个简单的java应用镜像,依赖环境比较简单,JDK,定制化的Tomcat(名为star-appserver) 1、环境准备 ubuntu:14.04 docker : 1.4 jdk:jdk-8u31-linux-x64.gz tomcat : 7.0(star-appserver) 在/usr/local下创建目录:sms.

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网