利用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（甚至是有个浏览器）就能随时随地愉快的加班了。

最后

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

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