由于去年的烧烤摊营收达预期，烧烤哥给自己买了台新电脑。但新电脑上啥都没有，导致晚上收摊后回去无法加班，很是苦恼。

为了不影响烧烤摊今年的业绩，烧烤哥还是在自己的游戏本（玩游戏的本子）上搭起了一个前端开发环境。

怎么搭？

面临的一个问题就是，该 怎么搭这个环境？

我们先来捋一捋，烧烤哥的业务涉及到 web开发、taro小程序。所以只要电脑上有 node、git，然后再利用npm去安装一些全局库（如 typescript、taro-cli等）不就可以了嘛？

确实如此，但烧烤哥不是一个容易满足的人，不然也不会去搞烧烤了。

在烧烤哥的认知范围内，有如下方式可以搭建一个开发环境。

直接安装不考虑，属于烧烤哥能力圈的舒适区（ 能力圈可以分为舒适区、拉伸区和困难区，处在拉伸区时个人成长最快），做了等于浪费时间。虚拟机呢估计每次启动环境得先花个半小时（夸张修辞手法）也不考虑。而使用 docker呢，正好处于烧烤哥的拉伸区，非常值得尝试。

初探docker

本来开发，只要能speak javascript就ok了，现在还要能speak docker。

docker的一些概念

docker是什么就不多说了，先来了解下本文会涉及到的 一些概念。

• image：镜像，是一个只读模版，用来创建容器。
• container: 容器，是一个可运行的镜像实例。
• Dockerfile: 镜像构建的模版，描述镜像构建的步骤。

所以它们之间的关系是， 通过Dockerfile构建出镜像，然后通过镜像来创建容器，程序就跑在容器中。并且一个镜像可以随意创建N个容器，各个容器间相互隔离。

写一个hello world

来做个demo，写一个hello world的node程序，然后在容器里面跑该程序。

照葫芦画瓢， 编写代码文件index.js -> 编写Dockerfile -> image -> container.

编写代码文件

创建一个docker-test目录，在里面新建一个index.js，键入以下指令

console.log('hello world');复制代码

编写Dockerfile

继续在里面新建一个Dockerfile文件（不需要后缀），键入以下指令

FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
CMD node index.js复制代码

简单解释一下这几个指令。

FROM node:15.10.0-slim 就是说我们的镜像会继承 node:15.10.0-slim 这个镜像，这个镜像在哪里找呢？没错，你可能也猜到了，在Docker交流网站 Docker Hub中。

COPY . ./demo 是把当前目录拷贝到镜像的/demo目录下，当然你也可以使用.dockerignore来排除你不需要打包的文件。

WORKDIR /demo 类似于 cd /demo。

CMD node index.js 容器启动后执行 node index.js命令。

构建镜像

在bash中运行 docker image build -t demo .

构建好之后，运行 docker image ls就可以查看到demo镜像了。

运行容器

运行 docker container run demo，不出意外你会在hello world打印出来。

docker说到这里就差不多了，下面我们来看看如何搭建开发环境。

搭建开发环境

我们的开发环境需要全局安装有 node、git、typescript、taro-cli。

先让项目跑起来

我们先让项目在本地跑起来，假设机器上已经有了一个项目，该项目是用create-react-app创建的项目。

整体步骤跟上面的demo是一致的，只是把 index.js替换成了 项目文件，还有一个区别是由于是开发运行（不是构建项目后运行），所以我们需要安装package.json中的依赖。

其实整体区别只在Dockerfile，下面来看看Dockerfile。

FROM node:15.10.0-slim
COPY . ./demo
WORKDIR /demo
RUN npm install
CMD npm run start复制代码

构建iamge： docker image build -t react-demo .。

运行容器： docker container run -p 3000:3000 react-demo。

这里运行容器时需要指定 -p参数将容器的3000端口映射到本机的3000端口。

此时，react项目就跑起来了。

存在问题

可以看到，按开发的模式来说，这样是存在问题的。比如：

• 将代码打包进镜像中，每次修改代码都必须要 重新构建镜像
• 打包出来的镜像指包含node环境， 缺少开发时需要的依赖

我们希望的是， 通过容器来提供开发时需要的依赖，然后通过vscode修改的代码实时跑在容器中。