利用docker搭建前端开发环境

前言

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

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

怎么搭？

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

我们先来捋一捋，烧烤哥的业务涉及到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修改的代码实时跑在容器中。

解决

构建自己开发镜像

要让我们的镜像提供开发时需要的依赖，其实就是让我们的镜像包含node(typescript、taro-cli)、git就行了。

其实我们之前的node镜像node:15.10.0-slim启动后的容器，可以看成一个只带有node环境虚拟化的linux虚拟系统，我们可以进入到容器里面去看看，运行docker container run -it node:15.10.0-slim /bin/bash就可以进入到容器的bash中。

所以只需要依赖现有的node镜像，并在构建我们的镜像时安装需要的程序即可。来看看Dockerfile。

FROM node:15.10.0-slim
RUN apt-get update && apt-get install -y git
RUN npm install -g typescript @tarojs/cli

这次我们没有把代码打包到镜像中了，而是执行了apt-get upgrade && apt-get install git 和 npm install -g typescript @taro-cli两个命令。

构建镜像：docker image build -t frontend-dev .。

运行容器: docker container run -it frontend-dev /bin/bash。

进入到容器，就可以看到我们安装的程序了。

此时，我们的镜像就已经具备开发时需要的环境了。

挂载点

docker提供了挂载点，可以让容器访问我们本机的文件系统。

只需要在我们的项目中启动容器时指定-v 参数就行，即docker container run -v "${pwd}:/demo" -it frontend-dev /bin/bash。

你会发现我们的frontend-dev镜像启动的容器中多了/demo目录，而且进去里面可以看到就是我们的项目。

然后在/demo目录中执行项目启动命令npm run start，我们的项目就运行起来了。

这时你就可以使用vscode修改我们的项目代码了，所有的修改都会跟/demo目录同步。

此时，我们的镜像就只做环境依赖作用了，我们也可以愉快的加班了。

不过大家肯定会说，这种方式好是好，但是也太麻烦了吧。

利用vscode

Remote-Containers

其实我们上面做的，vscode有对应的插件已经帮我们完成了。

怎么用？

用三张图告诉你怎么用。

只要你机器装了docker，按上面三步走下来，你的代码就在容器中了。

大家肯定又要说了，烧烤哥你怎么不早说啊？

因为烧烤哥想说，其实上面说的都不重要。对！你没听错，是都不重要。

一个想法

其实烧烤哥这篇文章想说的，是有一个想法。

Remote-SSH

我们先再来看一个东西，一个vscode的插件。

看名字就能知道这个插件是干啥的，它能让我们利用vscode通过ssh登录到一个远程机器上，登录上去之后看到的目录就是远程目录了，并且对文件的修改，都是实实在在的修改远程机器上的文件。

这也就意味着我们可以通过vscode从本地直接编辑远程服务器的文件。

想法

结合上述说的，烧烤哥有个想法，就是：

利用linux系统的多用户多任务特点，和docker快速搭建、迁移环境的能力，团队在一个远程机器上进行业务开发。

这样做的优点是：

1. 方便复制环境：有新人来时，只需要在远程机器上为ta开一个账户，然后把镜像(或Dockerfile)给ta，一个新的个人开发环境就搭建好了。
2. 方便统一环境：团队中大家可以使用同一个image，有需要时，可以统一对环境依赖进行更换或升级。
3. 方便随时随地加班：在远程开发的话，对本地终端基本就没有什么限制了。本地装个vscode（甚至是有个浏览器）就能随时随地愉快的加班了。

最后

想说的都放在文章里了，烧烤哥也该去加班了。

如果决定对您有帮助的话，麻烦点个赞吧～！