一个实验搞懂 Docker 和 K8s 怎么配合

🗂️ 我的项目目录（12 个关键文件）

text

/root/message-board/ │ ├── backend/ ← 【Docker 相关】打包后端用的 │ ├── Dockerfile ← 告诉 Docker 怎么打包后端 │ ├── package.json ← 后端依赖列表（供 Docker 构建时用） │ └── server.js ← 后端代码（被 Docker 打包进镜像） │ ├── frontend/ ← 【Docker 相关】打包前端用的 │ ├── Dockerfile ← 告诉 Docker 怎么打包前端 │ ├── index.html ← 前端页面（被 Docker 打包进镜像） │ ├── app.js ← 前端逻辑（被 Docker 打包进镜像） │ └── config.js ← 前端配置（被 Docker 打包进镜像，但 K8s 会覆盖它） │ └── k8s/ ← 【K8s 相关】告诉 K8s 怎么部署 ├── namespace.yaml ← 告诉 K8s：创建一个叫 message-board 的文件夹 ├── api-deployment.yaml ← 告诉 K8s：后端容器怎么跑 ├── api-service.yaml ← 告诉 K8s：后端端口怎么对外暴露 ├── frontend-configmap.yaml ← 告诉 K8s：前端配置内容是什么 ├── frontend-deployment.yaml ← 告诉 K8s：前端容器怎么跑 └── frontend-service.yaml ← 告诉 K8s：前端端口怎么对外暴露

一、Docker 环节：哪些文件参与了？怎么参与的？

你执行的命令

bash

docker build -t message-api:v1 ./backend docker build -t message-frontend:v1 ./frontend

第一个命令：docker build -t message-api:v1 ./backend

Dockerfile 怎么说的：

dockerfile

FROM node:20-alpine # 基础环境：装好 Node.js 的 Linux COPY package.json ./ # 把依赖列表复制进去 RUN npm install # 在镜像里安装依赖 COPY server.js ./ # 把代码复制进去 CMD ["npm", "start"] # 容器启动时执行 node server.js

最终产出：message-api:v1镜像。这个镜像 = Node.js 环境 + 你的代码 + 依赖。

第二个命令：docker build -t message-frontend:v1 ./frontend

Dockerfile 怎么说的：

dockerfile

FROM nginx:1.25-alpine # 基础环境：装好 Nginx 的 Linux COPY index.html /usr/share/nginx/html/ # 复制页面 COPY app.js /usr/share/nginx/html/ # 复制 JS COPY config.js /usr/share/nginx/html/ # 复制配置

最终产出：message-frontend:v1镜像。这个镜像 = Nginx + 你的前端文件。

Docker 环节总结

二、K8s 环节：哪些文件参与了？怎么参与的？

你执行的命令

bash

kubectl apply -f k8s/namespace.yaml kubectl apply -f k8s/api-deployment.yaml kubectl apply -f k8s/api-service.yaml kubectl apply -f k8s/frontend-configmap.yaml kubectl apply -f k8s/frontend-deployment.yaml kubectl apply -f k8s/frontend-service.yaml

逐一拆解每个 YAML 文件的作用

①k8s/namespace.yaml

yaml

apiVersion: v1 kind: Namespace metadata: name: message-board

作用：告诉 K8s 创建一个叫message-board的“文件夹”，后面所有资源都放里面。

和 Docker/K8s 的关系：纯 K8s 概念。Docker 不参与。

②k8s/api-deployment.yaml

yaml

apiVersion: apps/v1 kind: Deployment metadata: name: message-api namespace: message-board spec: replicas: 1 template: spec: containers: - name: message-api image: message-api:v1 # ← 关键！用的就是 Docker 构建的镜像 imagePullPolicy: IfNotPresent ports: - containerPort: 3000

作用：告诉 K8s——“我要运行 1 个容器，用message-api:v1这个镜像（Docker 刚打好的），它监听 3000 端口”。

和 Docker 的关系：image: message-api:v1直接引用 Docker 构建的镜像。

③k8s/api-service.yaml

yaml

apiVersion: v1 kind: Service metadata: name: message-api namespace: message-board spec: type: NodePort selector: app: message-api ports: - port: 3000 targetPort: 3000 nodePort: 30787

作用：告诉 K8s——“把后端 Pod 的 3000 端口映射到集群的 30787 端口，让外部能访问”。

和 Docker 的关系：引用的是 Pod（容器），通过selector: app: message-api找到 Deployment 创建的容器。

④k8s/frontend-configmap.yaml

yaml

apiVersion: v1 kind: ConfigMap metadata: name: frontend-config namespace: message-board data: config.js: | window.APP_CONFIG = { APP_TITLE: "K8s班级留言板", API_BASE_URL: "http://192.168.116.168:30787" };

作用：告诉 K8s——“这里有一份前端配置文件，内容如上”。

和 Docker 的关系：这个文件的内容会覆盖Docker 构建时打包进去的config.js。这就是“配置与镜像分离”。

⑤k8s/frontend-deployment.yaml

yaml

apiVersion: apps/v1 kind: Deployment metadata: name: message-frontend namespace: message-board spec: replicas: 1 template: spec: containers: - name: message-frontend image: message-frontend:v1 # ← 关键！用的就是 Docker 构建的镜像 ports: - containerPort: 80 volumeMounts: - name: frontend-config mountPath: /usr/share/nginx/html/config.js subPath: config.js # ← 用 ConfigMap 覆盖镜像里的 config.js volumes: - name: frontend-config configMap: name: frontend-config

作用：

1. 告诉 K8s——“运行 1 个前端容器，用message-frontend:v1镜像”

2. 同时告诉 K8s——“把 ConfigMap 里的配置挂进去，覆盖镜像里原来的 config.js”

和 Docker 的关系：

• image: message-frontend:v1引用 Docker 构建的镜像

• volumeMounts用 ConfigMap 覆盖镜像里的文件

⑥k8s/frontend-service.yaml

yaml

apiVersion: v1 kind: Service metadata: name: message-frontend namespace: message-board spec: type: NodePort selector: app: message-frontend ports: - port: 80 targetPort: 80 nodePort: 30082

作用：告诉 K8s——“把前端 Pod 的 80 端口映射到集群的 30082 端口，让用户浏览器能访问页面”。

和 Docker 的关系：引用的是 Pod（容器），通过selector: app: message-frontend找到 Deployment 创建的容器。

三、一张图：每个文件对应到 Docker/K8s 的哪个环节

text

┌─────────────────────────────────────────────────────────────────────┐ │ 【Docker 环节】 │ ├─────────────────────────────────────────────────────────────────────┤ │ 输入文件 → 输出 │ │ ├── backend/Dockerfile → │ │ ├── backend/package.json → message-api:v1 镜像 │ │ └── backend/server.js → │ │ │ │ ├── frontend/Dockerfile → │ │ ├── frontend/index.html → message-frontend:v1 镜像 │ │ ├── frontend/app.js → │ │ └── frontend/config.js → （默认配置，会被覆盖） │ └─────────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────┐ │ 【K8s 环节】 │ ├─────────────────────────────────────────────────────────────────────┤ │ 输入文件 → 作用 │ │ ├── namespace.yaml → 创建“message-board”文件夹 │ │ ├── api-deployment.yaml → 用 message-api:v1 启动后端容器│ │ ├── api-service.yaml → 后端暴露 30787 端口 │ │ ├── frontend-configmap.yaml → 创建前端配置（API 地址） │ │ ├── frontend-deployment.yaml → 用 message-frontend:v1 + │ │ │ ConfigMap 覆盖 config.js │ │ └── frontend-service.yaml → 前端暴露 30082 端口 │ └─────────────────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────────────────┐ │ 【最终运行】 │ ├─────────────────────────────────────────────────────────────────────┤ │ 浏览器访问 http://192.168.116.168:30082 → 看到留言板页面 ✅ │ └─────────────────────────────────────────────────────────────────────┘

四、我之前疑惑的几个点，现在用文件回答

五、一句话总结

Docker读了backend/Dockerfile和frontend/Dockerfile，生成了 2 个镜像（message-api:v1、message-frontend:v1）。
K8s读了k8s/目录下的 6 个 YAML 文件，拿着这 2 个镜像在集群里启动容器、暴露端口、注入配置，最终让用户通过http://192.168.116.168:30082访问到留言板。