背景

同事 A：我的电脑环境好脏。
同事 B：啥？
同事 A：开发环境安装了好多东西，例如我的电脑下载了 mysql,每次想删除要查半天资料才能删除
同事 B：那用 docker 运行容器放开发的环境就好了
同事 A：那怎么打代码？用 vim 打代码吗？
同事 B：vs code 支持连接到容器里面啊！！！
同事 A: 快教教我

为什么要使用 docker 搭建开发环境呢？上面是一个原因，还有如下原因：

docker 容器是支持环境隔离的；
使用 docker 搭建的开发环境还支持宿主机不同系统使用同一套环境。
还可以提交到 docker hub 随时上传下载开发环境

实现思路

使用 docker 基于 ubuntu:20.04 镜像运行一个容器
这是一个前端环境，所以我们还需要 git node 这两个开发工具
代码放到数据卷上，通过 git 管理，就算容器停止运行数据卷也不会消失
由于需要下载工具，是需要能跟宿主机一样访问网络

实现效果

使用 vscode 就能打开
读写文件的速度要和本机速度不能相差太多（可以快很多但不能慢太多）
宿主机能访问，支持热更新

实现过程

配置 DNS

如果不配置 DNS，容器就访问不到链接

在 Docker daemon 配置 dns 如下：

  "dns": [
    "114.114.114.114",
    "8.8.8.8",
    "8.8.4.4"
  ],

构建 docker 镜像

FROM ubuntu:20.04
RUN apt-get update \
    && apt-get install -y curl \
    && apt-get install -y git \
    && curl -o- https://xx.xxxx/nvm
    && nvm install 14.19.1
    && npm install -g @vue/cli

构建镜像

docker build -t workspace:v0.0.1 .

至于怎么发布到 docker hub 感兴趣的朋友可以看看 docker 发布镜像到 docker hub

创建数据卷

创建数据卷来存储代码

docker volume create code_space

Q1：为什么不放容器里面？

因为放容器里面有可能随容器关闭，你修改的代码由于没有提交 git 就没了，或者 commit 但是没 push

Q2: 为什么不用宿主机的目录绑定到容器里呢？这样就算忘了提交也不会丢失

因为我试过，读写速度慢，而且热更新还被影响了，修改代码没有执行热更新，要重新 run

运行开发环境镜像

docker run -it -d --name=vue_space -p 80:80 -v code_space:/root/code workspace:v0.0.1

-p 80：80 是为了全端口映射这样一个开发环境的容器就制作好了。

vs code 运行代码

首先要下载一个插件 Dev Containers

首先点击左下角，然后选择 attach to running container...
然后选择正在运行的容器
然后在控制台输入 npm run serve

【Docker】0 基础学习 docker - 搭建开发环境

背景