教程：如何修改 Docker 容器 bisheng-frontend 中的静态文件

教程将分为以下几个部分：

教程目标：明确说明本教程将教会你什么。
前提条件：列出执行本教程所需的环境和工具。
操作步骤 ：
- 步骤一：进入容器并定位文件
- 步骤二：将容器内文件复制到本地
- 步骤三：在本地修改文件
- 步骤四：重新创建容器并挂载修改后的文件
总结：简要回顾整个流程。

教程：如何修改 Docker 容器 `bisheng-frontend` 中的静态文件

一、教程目标

本教程将指导你如何安全地修改运行中的 bisheng-frontend Docker 容器内的静态文件（如图片、SVG 等）。我们将采用"复制文件 -> 本地修改 -> 挂载重启"的最佳实践，以避免直接在容器内修改带来的风险。

二、前提条件

已安装 Docker 并能正常运行。
已安装 docker-compose (如果你的服务是通过 docker-compose 启动的)。
具有宿主机的命令行访问权限，并拥有 sudo 权限（用于创建目录和修改权限）。
确认 bisheng-frontend 容器正在运行：
bash 复制代码
```
docker ps | grep bisheng-frontend
```

三、操作步骤

步骤一：进入容器并定位目标文件

首先，我们需要进入容器内部，找到需要修改的文件的具体路径。

进入 bisheng-frontend 容器的交互式终端：
bash 复制代码
```
docker exec -it bisheng-frontend /bin/bash
```
- -it: 创建一个交互式的 TTY 终端。
- bisheng-frontend: 容器名称。
- /bin/bash: 要执行的命令。
在容器内搜索需要修改的文件 ：例如，我们要搜索所有图片文件（.png, .jpg, .svg）：
bash 复制代码
```
find / -name "*.png" -o -name "*.jpg" -o -name "*.svg" 2>/dev/null
```
- 2>/dev/null: 将无关的权限错误信息丢弃，使输出更干净。
记录文件路径：从搜索结果中，找到你需要修改的文件，并记下它的完整路径。例如：
- /usr/share/nginx/html/platform/assets/male-technologist-CcgkZdXy.png
- /usr/share/nginx/html/platform/assets/analysis.svg
退出容器：完成文件定位后，退出容器终端。
bash 复制代码
```
exit
```

步骤二：将容器内的文件复制到本地宿主机

为了安全地修改，我们将容器内的整个静态文件目录复制到本地。

在宿主机上创建一个本地目录，用于存放从容器中复制出来的文件：
bash 复制代码
```
mkdir -p /opt/bisheng-main/local-frontend
```
- -p: 确保父目录存在，如果不存在则一并创建。

（可选）修改本地目录权限：为了确保你当前的用户有权限读写该目录，可以修改其权限。

bash 复制代码

# 将目录所有者改为当前用户（推荐）
sudo chown -R $USER:$USER /opt/bisheng-main/local-frontend

# 或者，给予更宽松的权限（不推荐，但简单）
# sudo chmod -R 775 /opt/bisheng-main/local-frontend

将容器内的文件目录复制到本地 ：根据步骤一找到的路径，我们复制其上级目录（例如 /usr/share/nginx/html）到本地。
bash 复制代码
```
docker cp bisheng-frontend:/usr/share/nginx/html /opt/bisheng-main/local-frontend
```
- 这条命令会将容器内的 /usr/share/nginx/html 目录及其所有内容，复制到本地的 /opt/bisheng-main/local-frontend/ 目录下。复制完成后，本地路径会是 /opt/bisheng-main/local-frontend/html/...。
验证文件是否复制成功：
bash 复制代码
```
ls -l /opt/bisheng-main/local-frontend/html/platform/assets/
```
你应该能看到你之前在容器内找到的那些文件。

步骤三：在本地修改文件

现在，你可以在本地对文件进行任意修改。

使用你喜欢的编辑器或工具 ，找到本地对应的文件并进行修改或替换。
- 本地文件路径示例：/opt/bisheng-main/local-frontend/html/platform/assets/male-technologist-CcgkZdXy.png
- 重要：修改后的文件请务必保持与原文件相同的文件名。

步骤四：重新创建容器并挂载修改后的文件

这是最关键的一步。我们将停止并删除旧容器，然后创建一个新容器，并使用 Docker 的卷挂载功能，将我们修改好的本地目录挂载到容器内，从而覆盖原有的文件。

停止并删除正在运行的 bisheng-frontend 容器：
bash 复制代码
```
docker stop bisheng-frontend
docker rm bisheng-frontend
```
- 注意：这会短暂中断你的 bisheng-frontend 服务。
（重要）确认容器的网络 ：为了确保新容器能和其他服务（如 bisheng-backend）通信，需要使用正确的网络。
- 如果你使用 docker-compose ：通常不需要手动指定网络，docker-compose 会自动管理。
- 如果你手动运行容器：
- a. 列出所有网络： bash docker network ls
  
  b. 找到 bisheng-frontend 之前连接的网络（通常是 bisheng_default 或 docker_default）。你可以通过检查哪个网络包含 bisheng-backend 来确认： bash docker network inspect docker_default | grep "bisheng-backend"
  
  c. 记下正确的网络名称，例如 bisheng_default。
重新启动容器，并挂载本地修改后的目录 ：使用 docker run 命令创建一个新容器。关键在于 -v (volume) 参数。
bash 复制代码
```
docker run -d \
  --name bisheng-frontend \
  --network bisheng_default \  # 替换为你在上一步确认的网络名称
  -p 3001:3001 \
  -v /opt/bisheng-main/local-frontend/html/platform/assets:/usr/share/nginx/html/platform/assets \
  cr.dataelem.com/dataelement/bisheng-frontend:latest
```
- -v /local/path:/container/path: 这是卷挂载命令。它将本地的 /opt/bisheng-main/local-frontend/html/platform/assets 目录，挂载到容器内的 /usr/share/nginx/html/platform/assets 目录。容器运行时，会优先读取挂载目录中的文件，从而实现了文件替换。
- 路径映射技巧：尽量让本地挂载的目录结构与容器内的目录结构保持一致，这样不易出错。
检查容器是否成功启动：
bash 复制代码
```
docker ps | grep bisheng-frontend
```
如果能看到 bisheng-frontend 并且状态为 Up，则表示启动成功。
验证修改 ：打开浏览器或使用 curl 访问你的应用，查看相应的图片或静态资源是否已经更新为你修改后的版本。

四、总结

通过以上步骤，你已经成功地修改了 bisheng-frontend 容器中的静态文件。这种"复制-修改-挂载"的方法是 Docker 环境下更新容器内容的标准操作流程，它安全、可靠且易于管理。

如果你未来还需要修改其他文件，只需重复步骤三 和步骤四即可，无需再重新复制整个目录（除非容器内的原始文件又发生了变化）。