关键不是把编辑、调试、热重载塞进容器，而是让 Docker 专注隔离依赖、复现部署行为、一键启停；本地用 macOS 原生工具开发，容器仅托管 Nginx 等运行时服务并通过 volume 实时同步代码。
在 macos 上配置 docker 容器运行时的开发环境，关键不是把编辑、调试、热重载塞进容器，而是让 docker 专注做三件事：隔离服务依赖、复现真实部署行为、一键启停验证。本地仍用 macos 原生工具写代码、跑 dev server、查 console，容器只托管 nginx、mock 服务、api 网关等运行时组件，并通过 volume 实时同步文件。
安装并验证 Docker Desktop
这是所有操作的基础，必须确保 CLI 与守护进程连通：
- 推荐用 Homebrew 安装：
brew install --cask --appdir=/Applications docker（自动处理权限和路径） - 或去 Docker 官网 下载对应芯片版本（Apple Silicon 选 arm64，Intel 选 amd64）
- 首次启动需授权“完全磁盘访问”和“辅助功能”，按提示输密码即可
- 终端执行：
docker --version→ 确认有输出；docker run hello-world→ 看到 Hello from Docker! 即成功
必调：镜像加速 + 资源 + 文件共享
国内用户跳过这步，拉镜像大概率卡死或失败：
-
镜像加速：鲸鱼图标 → Preferences → Docker Engine → 在 JSON 中加入：
{"registry-mirrors": ["https://hub-mirror.c.163.com", "https://docker.mirrors.ustc.edu.cn"]} - 资源分配：Preferences → Resources → 内存设为 ≥4 GB（建议 6 GB），CPU 给 4 核，Disk image size ≥64 GB
-
文件共享：Preferences → File Sharing → 添加常用目录（如
~/Projects），否则容器读不到你本地的代码
快速启动可调试的前端服务（无需 Dockerfile）
以 React/Vue/Vite 项目为例，不进容器编译，只用容器托管构建产物并支持刷新：
- 本地执行构建：
npm run build（Vite 默认输出dist/，CRA 是build/） - 一条命令启动 Nginx 容器并挂载产物：
docker run -d -p 8080:80 -v $(pwd)/dist:/usr/share/nginx/html --name fe-dev nginx:alpine - 浏览器打开 https://www.php.cn/link/cbb686245ece57c9827c4bc0d0654a8e，改源码 → 重新
npm run build→ 刷新页面即见效果 - 如用 history 模式路由，挂载自定义
nginx.conf，加一行：try_files $uri $uri/ /index.html;
用 docker-compose 管理多服务协作
避免手动启停多个容器，一个 YAML 统一编排前端 + Mock + 后端 API：
- 在项目根目录新建
docker-compose.yml - 示例含静态服务与 Mock 服务器（基于 json-server）：
services:<br> frontend:<br> image: nginx:alpine<br> ports: ["8080:80"]<br> volumes: ["./dist:/usr/share/nginx/html"]<br> mock:<br> image: kennethreitz/httpbin<br> ports: ["8000:80"]
- 终端执行：
docker-compose up -d，自动拉取、创建、启动全部服务
