[docker] 多容器项目

相当于把之前学的一些东西全都整合一下，做一个小型的项目：

这里的数据库、前端、后端可以为任何框架，并不指定为特定框架

project structure

省略掉了一些实现，大概结构如下：

❯ tree
.
├── backend
│   ├── Dockerfile
│   ├── app.js
│   ├── logs
│   │   └── access.log
│   ├── models
│   │   └── goal.js
│   ├── node_modules
│   ├── package-lock.json
│   └── package.json
└── frontend
    ├── Dockerfile
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
    └── src
        ├── App.js
        ├── components
        ├── index.css
        └── index.js

11 directories, 31 files

这里主要讲的是 Docker，所以代码部分不会涉及

创建网络

为 [docker] 网络连接 的内容

❯ docker network create goals-net
e57f83cac82e93cdcbab09f515bb037c1990cafeaf77a3622a48059aace1d744

mongodb 容器化及持久化

为 [docker] 网络连接，[docker] 数据的持久化 - Volume & bind mounts 和 [docker] volume 补充 & 环境变量 & 参数 的内容

仅容器化

❯ docker run -d --name mongodb --rm --network goals-net mongo
fc6ac2296a12b31a68b96fe7beb4f5a34a22c13c9f925b5242d8ab477f877920
❯ docker ps
CONTAINER ID   IMAGE        COMMAND                  CREATED          STATUS          PORTS                    NAMES
fc6ac2296a12   mongo        "docker-entrypoint.s…"   12 seconds ago   Up 11 seconds   27017/tcp                mongodb

这一部分的实现是起一个 mongodb 的容器，不存在任何的持久化和安全的实现

也就是说：

• 任何人都可以访问当前 mongodb 实例
• 一旦容器被删除，新的 mongodb 容器生成，那么数据就会消失

持久化数据

这里会使用 volume 去对数据进行一个持久化，这样新起来一个 mongodb 依旧会使用 volume 的数据

❯ docker run -d --name mongodb --rm --network goals-net -v data:/data/db mongo
a376dd9549cc5cb1a45d74abcd8ae50fd838d8b730f6f278eecf9287fbc6da3c
❯ docker ps
CONTAINER ID   IMAGE        COMMAND                  CREATED         STATUS         PORTS                    NAMES
a376dd9549cc   mongo        "docker-entrypoint.s…"   3 seconds ago   Up 2 seconds   27017/tcp                mongodb
4ac01a93d3d3   goal-react   "docker-entrypoint.s…"   2 hours ago     Up 2 hours     0.0.0.0:3000->3000/tcp   goals-frontend
d4e6b80883e5   goal-node    "docker-entrypoint.s…"   2 hours ago     Up 2 hours     0.0.0.0:80->80/tcp       goals-backend

这里实现的功能室：

• 数据不与 mongodb 容器的生命周期进行绑定

  只要容器使用 data 这个 volume，即可持久化数据

添加安全

这里的实现是根据 docerhub official mongo image 下的 security 部分添加：

❯ docker run -d --name mongodb --rm --network goals-net -v data:/data/db -e MONGO_INITDB_ROOT_USERNAME=root -e MONGO_INITDB_ROOT_PASSWORD=root mongo
6a3addfd1f2a0b8be89565eecc2e26a97c6e0a3917040505a4b64e10b7dfe325

⚠️：如果之前已经绑定过 named volume，那么需要重新删除该 volume，否则用户名密码可能无法重写 volume 中已经存在的默认数据

dockerize 后端

Dockerfile 如下：

FROM node

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 80

ENV MONGODB_USERNAME=root
ENV MONGODB_PASSWORD=root

CMD [ "npm", "start" ]

这里实现的就是比较基础的功能，就是 cv package.json，跑 npm install，cv 剩下的文件，暴露 80 端口，以及运行 npm start。这里之所以运行 npm start 而不是 node app.js 的原因是因为配置了 nodemon，这样可以让本机修改代码的时候，不用重新 rebuild/run docker 容器

这里来会 build 来回切换需要注意的一点就是，一定要确保自己在对应的目录下。打包后端就要在 backend 目录下，打包前端则要在 frontend 目录下

运行大致如下：

# make sure you are in backend project
❯ docker build -t goal-node .
# ignore building process
❯ docker run --name goals-backend --rm -p 80:80 --network goals-net -d -v logs:/app/logs -v "$(pwd):/app" -v /app/node_modules goal-node
73662e085fc8cefd9e0a9b7c6d06d418559764b8419784809542fa4a4373282a
❯ docker ps
CONTAINER ID   IMAGE        COMMAND                  CREATED          STATUS         PORTS                    NAMES
73662e085fc8   goal-node    "docker-entrypoint.s…"   10 seconds ago   Up 8 seconds   0.0.0.0:80->80/tcp   goals-backend
fc6ac2296a12   mongo        "docker-entrypoint.s…"   2 minutes ago    Up 2 minutes   27017/tcp                mongodb

⚠️：这里暴露了 80 端口，因为前端项目最终还是通过浏览器实现，所以 docker 没有办法正确监听和 map 容器，因此最终前端还是需要通过浏览器访问 localhost

nodemon 是否成功运行可以通过修改一下代码，然后查看一下 log：

❯ docker logs goals-backend

> backend@1.0.0 start
> nodemon app.js

[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
CONNECTED TO MONGODB
❯ docker logs goals-backend

> backend@1.0.0 start
> nodemon app.js

[nodemon] 3.1.0
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,cjs,json
[nodemon] starting `node app.js`
CONNECTED TO MONGODB
[nodemon] restarting due to changes...
[nodemon] starting `node app.js`
CONNECTED TO MONGODB!

修改代码肯定导致 log 变长，那就说明 nodemon 配置好了，同时也说明 bind mounts 成功了

env 使用补充

ENV 是可以在代码里被检测到的，所以这里也可以使用 process.env 去获取用户名和密码

mongoose.connect(
  `mongodb://${process.env.MONGODB_USERNAME}:${process.env.MONGODB_PASSWORD}@mongodb:27017/course-goals?authSource=admin`,
  {
    useNewUrlParser: true,
    useUnifiedTopology: true,
  },
  (err) => {
    if (err) {
      console.error("FAILED TO CONNECT TO MONGODB");
      console.error(err);
    } else {
      console.log("CONNECTED TO MONGODB!");
      app.listen(80);
    }
  }
);

同样，也可以使用参数去重写环境变量，如在运行 docker run 时添加 -e MONGODB_USERNAME=root

dockerize 前端

Dockerfile 基本一致，除了不需要访问 mongodb，所以没有设置 ENV，以及暴露的端口不一样：

FROM node

WORKDIR /app

COPY package.json .

RUN npm install

COPY . .

EXPOSE 3000

CMD [ "npm", "start" ]

关于前端的 HMR……这个基本取决于用什么脚手架和什么框架，如果是通过脚手架构建的项目，基本都是自带 HMR，不需要自行配置。同样，需要注意终端运行的地址，是前端所在的文件夹

# make sure you are in frontend project
❯ docker build -t goal-react .
# ignore the building process
❯ docker run --name goals-frontend --rm -d -p 3000:3000 -it -v "$(pwd)/src:/app/src" goal-react
2e6f1d536066c45cf3b05cb456948c01009a23ddafdeb521cd8e4bcced2bb8a2
❯ docker ps
CONTAINER ID   IMAGE        COMMAND                  CREATED          STATUS          PORTS                    NAMES
4ac01a93d3d3   goal-react   "docker-entrypoint.s…"   2 seconds ago    Up 2 seconds    0.0.0.0:3000->3000/tcp   goals-frontend
d4e6b80883e5   goal-node    "docker-entrypoint.s…"   45 seconds ago   Up 45 seconds   0.0.0.0:80->80/tcp       goals-backend
fc6ac2296a12   mongo        "docker-entrypoint.s…"   16 minutes ago   Up 16 minutes   27017/tcp                mongodb

补充

补充一点说明信息

端口使用

如果查看一下端口，结果大概是这样的：

❯ lsof -i :80

COMMAND    PID  USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Google    2410  user   37u  IPv6 0x51114bdb801afbef      0t0  TCP localhost:53403->localhost:http (CLOSE_WAIT)
com.docke 8888  user  277u  IPv6 0x51114bdb7e8fc3ef      0t0  TCP *:http (LISTEN)
❯ lsof -i :3000

COMMAND    PID  USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
Google    2410  user   33u  IPv6 0x51114bdb7e9033ef      0t0  TCP localhost:53404->localhost:hbci (ESTABLISHED)
Google    2410  user   35u  IPv6 0x51114bdb7e9043ef      0t0  TCP localhost:53401->localhost:hbci (CLOSE_WAIT)
Google    2410  user   38u  IPv6 0x51114bdb7e18fbef      0t0  TCP localhost:53405->localhost:hbci (CLOSE_WAIT)
com.docke 8888  user  260u  IPv6 0x51114bdb7e195bef      0t0  TCP *:hbci (LISTEN)
com.docke 8888  user  287u  IPv6 0x51114bdb7e1903ef      0t0  TCP localhost:hbci->localhost:53404 (ESTABLISHED)
❯ lsof -i :27017

端口暴露

这里涉及到 docker 是怎么管理网络的，以上面的端口为例，可以看到 27017 是没有被暴露的，这个原因也很简单，容器虽然暴露了 27017，但是这只会被 docker 在对应的 network 进行管理，host machine 上自然没有办法检测到暴露的端口

也正是因为 docker 内部会对 network 进行管理，所以在后端项目可以直接使用容器名称去访问 mongodb，即这一段代码：

mongoose.connect(
  `mongodb://${process.env.MONGODB_USERNAME}:${process.env.MONGODB_PASSWORD}@mongodb:27017/course-goals?authSource=admin`
);

但是前端的代码是通过浏览器进行访问的，而浏览器所在的位置是 host machine，就像 host machine 不在 docker 管理的 network 上，无法访问到端口为 27017 的 mongodb 一样，浏览器也无法访问到在同一个 network 上的后端

假设如果现在这是一个微前端项目，每个前端模块都通过 docker 容器管理，那么模块与模块之间的引用——在不涉及到浏览器访问的情况下——是可以直接使用容器名称进行访问的