Docker-搭建前端开发环境

会编程的厨子_
108 阅读2分钟

前言

实际工作中经常需要再WEB,小程序等不同项目不同环境来回切换,还会由于本地环境不一样导致各种问题,因此尝试使用Docker来搭建一个统一的开发环境.

正文

image-20230207220914798

一.Docker简介

1.1 介绍:

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

1.2 基本概念

  • image：镜像，是一个只读模版，用来创建容器。

  • container: 容器，是一个可运行的镜像实例。

  • Dockerfile: 镜像构建的模版，描述镜像构建的步骤

    image-20230207221208298

简单说就是，镜像像是一个包含了OS文件系统和应用的对象，类似虚拟机的模板（比如Window10镜像）。如果你是一个开发 者，可以把镜像看成面向对象编程中的只读类(read-only Class)。容器和镜像几乎一模一样，唯一的区别是镜像是只读的，而容器上面有一个可读写层。所以容器=镜像+读写层。其过程为通过Dockerfile构建出镜像，然后通过镜像来创建容器，程序就跑在容器中。并且一个镜像可以随意创建N个容器，各个容器间相互隔离。

1.3 安装Docker

直接去Docker（docker.com）官网进行下载。

安装成功后如图:

image-20230207221654463

二. 搭建开发环境

2.1 拉取Ubuntu镜像

  • 从DockerHub(hub.docker.com/)获取ubuntu镜像

    命令行中输入 docker pull ubuntu ,成功后可在列表中显示

    image-20230208160008558

  • 初始化ubuntu环境,设置换源,添加基本工具,依次输入以下命令:

    sed -i 's/archive.ubuntu.com/mirrors.ustc.edu.cn/g' /etc/apt/sources.list

apt-get update

apt-get install vim bash-completion

    这样Ubuntu就基本上可以用了.

2.2 安装前端开发工具

运行镜像后会自动创建一个容器:

image-20230208163329233

如图,打开容器交互:

image-20230208163226256

  • 先安装 npm cnpm node

    apt-get install npm

// 安装cnpm, 从淘宝镜像下载资源会快许多
npm install -g cnpm --registry=https://registry.npm.taobao.org

// 安装Node版本管理工具 n
apt-get install curl
cnpm install -g n

// 使用n安装node
n stable

  • 按需求安装Vue ,TypeScript, Gulp等工具

ok,到这前端的基本环境就搭好了,接下来进行账号控制,镜像制作......

改天更.....

avatar
文章
阅读
粉丝