如何用 docker 打造前端开发环境

用 docker 做开发环境的好处

保持本机清爽

做开发的都知道，电脑一买回来就要安装各种各样的环境，比如前端开发需要安装 node、yarn、git 等，为了使用某些工具或者包，可能还需要安装 python 或者 java 等（比如 jenkins 就依赖了 java），久而久之，本机环境会非常乱，对于一些强迫证患者或者有软件洁癖的人来说多少有点不爽。

使用 docker 后，开发环境都配置在容器中，开发时只需要打开 docker，开发完后关闭 docker，本机不用再安装乱七八糟的环境，非常清爽。

隔离环境

不知道大家在开发时有没有遇到这种情况：公司某些项目需要在较新的 node 版本上运行（比如 vite，需要在 node12 或以上），某些老的项目需要在较老的 node 版本上运行，切换起来比较麻烦，虽然可以用 nvm 来解决，但使用 docker 可以更方便的解决此问题。

快速配置环境

买了新电脑，或者重装了系统，又或者换了新的工作环境，第一件事就是配置开发环境。下载 node、git，然后安装一些 npm 的全局包，然后下载 vscode，配置 vscode，下载插件等等……

使用 docker 后，只需从 docker hub 中拉取事先打包好的开发环境镜像，就可以愉快的进行开发了。

安装 docker

到 docker 官网（http://www.docker.com）下载 docker desktop 并安装，此步比较简单，省略。

安装完成，打开 docker，待其完全启动后，打开 shell 输入：

docker images

显示上述信息即成功！

配置开发环境

假设有一个项目，它必须要运行在 8.14.0 版本的 node 中，我们先去 docker hub 中将这个版本的 node 镜像拉取下来：

docker pull node:8.14.0

拉取完成后，列出镜像列表：

docker images

有了镜像后，就可以使用镜像启动一个容器：

docker run -it --name my_container 3b7ecd51 /bin/bash

上面的命令表示以命令行交互的模式启动一个容器，并将容器的名称指定为 my_container。

此时已经新建并进入到容器，容器就是一个 linux 系统，可以使用 linux 命令，我们尝试输入一些命令：

可以看到这个 node 镜像除了预装了 node 8.14.0，还预装了 git 2.11.0。

镜像和容器的的关系：镜像只预装了最基本的环境，比如上面的 node:8.14.0 镜像可以看成是预装了 node 8.14.0 的 linux 系统，而容器是基于镜像克隆出来的另一个 linux 系统，可以在这个系统中安装其它环境比如 java、python 等，一个镜像可以建立多个容器，每个容器环境都是相互隔离的，互不影响（比如在容器 A 中安装了 java，容器 B 是没有的）。

使用命令行操作项目并不方便，所以我们先退出命令行模式，使用 exit 退出：

借助 IDE 可以更方便的玩 docker，这里我们选择 vscode，打开 vscode，安装 Remote - Containers 扩展，这个扩展可以让我们更方便的管理容器：

安装成功后，左下角会多了一个图标，点击：

在展开菜单中选择“Attach to Running Container”：

此时会报一个错“There are no running containers to attach to.”，因为我们刚刚退出了命令行交互模式，所以现在容器是处理停止状态的，我们可以使用以下命令来查看正在运行的容器：

docker ps


# 或者

docker container ls

发现列表中并没有正在运行的容器，我们需要找到刚刚创建的容器并将其运行起来，先显示所有容器列表：

# -a 可以显示所有容器，包括未运行的

docker ps -a


# 或者

docker container ls -a

运行指定容器：

# 使用容器名称

docker start my_container


# 或者使用容器 id，id 只需输入前几位，docker 会自动识别

docker start 8ceb4

再次运行 docker ps 命令后，就可以看到已运行的容器了。然后回到 vscode，再次选择"Attach to Running Container"，就会出现正在运行的容器列表：

选择容器进入，添加一个 bash 终端，就可以进入我们刚刚的命令行模式：

我们安装 vue-cli，并在 /home 目录下创建一个项目：

# 安装 vue-cli

npm install -g @vue/cli


# 进入到 home 目录

cd /home


# 创建 vue 项目

vue create demo

在 vscode 中打开目录，发现打开的不再是本机的目录，而是容器中的目录，找到我们刚刚创建的 /home/demo 打开：

输入 npm run serve，就可以愉快的进行开发啦：

上面我们以 node 8.14.0 镜像为例创建了一个开发环境，如果想使用新版的 node 也是一样的，只需要将指定版本的 node 镜像 pull 下来，然后使用这个镜像创建一个容器，并在容器中创建项目或者从 git 仓库中拉取项目进行开发，这样就有了两个不同版本的 node 开发环境，并且可以同时进行开发。

使用 ubuntu 配置开发环境

上面这种方式使用起来其实并不方便，因为 node 镜像只安装了 node 和 git，有时我们希望镜像可以内置更多功能（比如预装 nrm、vue-cli 等 npm 全局包，或者预装好 vscode 的扩展等），这样用镜像新建的容器也包含这些功能，不需要每个容器都要安装一次。

我们可以使用 ubuntu 作为基础自由配置开发环境，首先获取 ubuntu 镜像：

# 不输入版本号，默认获取 latest 即最新版

docker pull ubuntu

新建一个容器：

docker run -itd --name fed 597ce /bin/bash

这里的 -itd 其实是 -i -t -d 的合写，-d 是在后台中运行容器，相当于新建时一并启动容器，这样就不用使用 docker start 命令了。后面我们直接用 vscode 操作容器，所以也不需要使用命令行模式了。

我们将容器命名为 fed（表示 front end development），建议容器的名称简短一些，方便输入。

ubuntu 镜像非常纯净（只有 72m），只具备最基本的能力，为了后续方便使用，我们需要更新一下系统，更新前为了速度快一点，先换到阿里的源，用 vscode 打开 fed 容器，然后打开 /etc/apt/sources.list 文件，将内容改为：

deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse

deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse

deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse

deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse

deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse

deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse

deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse

deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse

deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse

deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse

在下面的终端中依次输入以下命令更新系统：

apt-get update

apt-get upgrade

安装 sudo：

apt-get install sudo

安装 git：

apt-get install git

安装 wget（wget 是一个下载工具，我们需要用它来下载软件包，当然也可以选择 axel，看个人喜好）：

apt-get install wget

为了方便管理项目与软件包，我们在 /home 目录中创建两个文件夹（projects 与 packages），projects 用于存放项目，packages 用于存放软件包：

cd /home

mkdir projects

mkdir packages

由于 ubuntu 源中的 node 版本比较旧，所以从官网中下载最新版，使用 wget 下载 node 软件包：

# 将 node 放到 /home/packages 中

cd /home/packages


# 需要下载其它版本修改版本号即可

wget https://nodejs.org/dist/v14.18.0/node-v14.18.0-linux-x64.tar

解压文件：

tar -xvf node-v14.18.0-linux-x64.tar


# 删除安装包

rm node-v14.18.0-linux-x64.tar


# 改个名字，方便以后切换 node 版本

mv node-v14.18.0-linux-x64 node

配置 node 环境变量：

# 修改 profile 文件

echo "export PATH=/home/packages/node/bin:$PATH" >> /etc/profile


# 编译 profile 文件，使其生效

source /etc/profile


# 修改 ~.bashrc，系统启动时编译 profile

echo "source /etc/profile" >> ~/.bashrc


# 之后就可以使用 node 和 npm 命令了

node -v

npm -v

安装 nrm，并切换到 taobao 源：

npm install nrm -g

nrm use taobao

安装一些 vscode 扩展，比如 eslint、vetur 等，扩展是安装在容器中的，在容器中会保留一份配置文件，到时打包镜像会一并打包进去。当我们关闭容器后再打开 vscode，可以发现本机的 vscode 中并没有安装这些扩展。

至此一个简单的前端开发环境已经配置完毕，可以根据自己的喜好自行添加一些包，比如 yarn、nginx、vim 等。

打包镜像

上面我们通过 ubuntu 配置了一个简单的开发环境，为了复用这个环境，我们需要将其打包成镜像并推送到 docker hub 中。

第一步：先到 docker 中注册账号。

第二步：打开 shell，登录 docker。

第三步：将容器打包成镜像。

# commit [容器名称] [镜像名称]

docker container commit fed fed

第四步：为镜像打 tag，因为镜像推送到 docker hub 中，要用 tag 来区分版本，这里我们先设置为 latest。tag 名称加上了用户名做命名空间，防止与 docker hub 上的镜像冲突。

docker tag fed huangzhaoping/fed:latest

第五步：将 tag 推送至 docker hub。

docker push huangzhaoping/fed:latest

第六步：将本地所有关于 fed 的镜像和容器删除，然后从 docker hub 中拉取刚刚推送的镜像：

# 拉取

docker pull huangzhaoping/fed


# 创建容器

docker run -itd --name fed huangzhaoping/fed /bin/bash

用 vscode 打开容器，打开命令行，输入：

node -v

npm -v

nrm -V

git --version

然后再看看 vscode 扩展，可以发现扩展都已经安装好了。

如果要切换 node 版本，只需要下载指定版本的 node，解压替换掉 /home/packages/node 即可。

至此一个 docker 开发环境的镜像就配置完毕，可以在不同电脑，不同系统中共享这个镜像，以达到快速配置开发环境的目的。

注意事项

• 
  
• 如果要将镜像推送到 docker hub，不要将重要的信息保存到镜像中，因为镜像是共享的，避免重要信息泄露。
  
• 千万不要在容器中存任何重要的文件或信息，因为容器一旦误删这些文件也就没了。
  
• 如果在容器中开发项目，记得每天提交代码到远程仓库，避免容器误删后代码丢失。