在 macOS 上用 Docker 搭建前端测试流环境的核心是分离构建与运行阶段，使用多阶段 Dockerfile 构建生产产物并用 Nginx 托管，支持多版本并行、路由跳转、跨域代理及 mock 接入。
在 macos 上用 docker 搭建前端测试流环境，核心不是跑开发服务器，而是快速、可复现地验证构建产物在真实 nginx 环境下的行为——包括路由跳转、静态资源加载、跨域代理模拟、多版本并行测试等。关键在于分离构建与运行阶段，避免 node.js 运行时污染测试环境。
安装与基础验证（确保 Docker Desktop 正常工作）
从 Docker 官网下载 Apple Silicon 版（M1/M2/M3 芯片）或 Intel 版，拖入 Applications 后首次启动需授权“完全磁盘访问”和“辅助功能”。终端中运行：
-
docker --version → 确认输出类似
Docker version 24.0.7 -
docker run hello-world → 看到
Hello from Docker!即通过 -
docker info | grep "Architecture\|OS" → 检查是否为
linux/arm64或linux/amd64，避免镜像平台不匹配
编写面向测试的 Dockerfile（轻量、只含运行时）
不要用 node:xx 镜像直接 npm start——那只是本地开发镜像。测试流需要的是生产构建产物 + 纯静态服务。推荐多阶段构建：
# 构建阶段：仅用于生成 dist FROM node:20-alpine AS builder WORKDIR /app COPY package*.json ./ RUN npm ci --omit=dev COPY . . RUN npm run build # 输出 ./dist（Vite）或 ./build（CRA） <h1>运行阶段：极简 Nginx，无 Node、无构建工具</h1><p>FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80
注意：nginx.conf 必须含 try_files $uri $uri/ /index.html;，否则 React/Vue 的 history 路由刷新会 404。
一键启动多版本并行测试服务
不同分支、不同构建参数的前端产物，可同时运行在不同端口，互不干扰。写个简单脚本 test.sh：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
#!/bin/bash # 构建并启动 v1.2 分支测试环境 docker build -t fe-v12 . && \ docker rm -f fe-v12-test && \ docker run -d -p 8081:80 --name fe-v12-test fe-v12 <h1>构建并启动 v2.0-alpha 测试环境（假设 dist 在 ./dist-alpha）</h1><p>sed -i '' 's|/app/dist|/app/dist-alpha|' Dockerfile docker build -t fe-v20 . && \ docker rm -f fe-v20-test && \ docker run -d -p 8082:80 --name fe-v20-test fe-v20
执行后，http://localhost:8081 和 http://localhost:8082 就是两个隔离的测试入口，适合 QA 对比验收或 E2E 自动化接入。
对接本地后端或 mock 服务（解决跨域与代理问题）
测试环境常需连真实后端或 Mock Server。不建议改前端代码加代理，而应在 Nginx 层统一处理：
- 在
nginx.conf中添加location /api { proxy_pass http://host.docker.internal:3001; }（macOS 下host.docker.internal指向宿主机） - 若后端也在容器中（如用 docker-compose 启动），把前端容器和后端容器加入同一自定义网络，用服务名代替 IP
- 想临时启用 Mock，只需替换
proxy_pass到本地http://localhost:3002（Mock Server 运行在 Mac 上）
这样，所有环境差异都收口在配置文件里，无需改源码、不污染 package.json scripts。
