利用docker搭建前端开发环境

35,120

前言

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

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

怎么搭?

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

我们先来捋一捋,烧烤哥的业务涉及到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 gitnpm 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(甚至是有个浏览器)就能随时随地愉快的加班了。

最后

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

如果决定对您有帮助的话,麻烦点个赞吧~!