WebStorm不能仅靠“点一下Run”运行Docker化前端项目，必须手动配置端口映射（如80:80）、volume挂载（如./dist:/usr/share/nginx/html）及nginx.conf的root路径匹配，否则页面404、代码修改不生效、热更新失效。
WebStorm 能直接运行 Docker 化的前端项目，但“点一下 Run 就跑起来”只适用于最简场景；真实开发中，必须手动配置 volume 挂载、端口映射和 nginx 静态服务路径，否则改代码不生效、浏览器打不开、热更新失效——这些不是 Bug，是默认行为。
为什么点击 “Run Dockerfile” 后页面没反应？
根本原因：WebStorm 默认只执行 docker build + docker run，不会自动暴露端口、挂载源码或启动本地服务。前端容器（如 Nginx）若没把 80 映射到宿主机，或容器内 HTML 文件路径与 nginx.conf 的 root 不匹配，浏览器自然 404 或连接拒绝。
- 检查运行配置中的
Port mappings：必须添加80:80（或你实际用的端口，如7992:7992），且确保宿主机该端口未被占用 - 确认
nginx.conf里root指向的是容器内路径（如/usr/share/nginx/html），不是你本地的./dist - 如果用
docker-compose.yml，确保volumes正确挂载了构建产物（例如./dist:/usr/share/nginx/html:ro），:ro表示只读，更安全
如何让本地代码修改实时反映在容器里？
前端开发不等于“build 一次就完事”，你需要开发时的热反馈。WebStorm 不会自动监听文件变化并 rebuild，必须靠 volume 挂载 + 容器内服务支持。
- 对基于
nginx的静态服务：挂载./dist目录到容器内/usr/share/nginx/html，然后每次npm run build后刷新浏览器即可——但注意，Nginx 默认不自动 reload，需手动docker exec -it xxx nginx -s reload，或改用watchexec工具触发 - 对基于
webpack-dev-server或vite dev的容器：挂载整个./src和./public到容器内对应路径，并确保启动命令含--host 0.0.0.0 --port 3000；同时在 Port mappings 中加3000:3000 - macOS/Windows 用户务必检查 Docker Desktop 的
Resources → File Sharing白名单：你的项目路径必须在里面，否则挂载静默失败，ls /app里什么都没有
调试前端容器里的 JS 报错，为什么断点不生效？
WebStorm 无法直接调试 Nginx 容器里的静态 JS，但可以调试运行在 Node.js 环境中的前端服务（如 Vite、Next.js、Webpack Dev Server）。断点失效通常卡在三处：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
立即学习“前端免费学习笔记（深入）”；
- 远程解释器没配成 Docker 类型：Settings → Languages & Frameworks → JavaScript → Node.js → … → Type 选
Docker，Image name 填你实际用的镜像（如node:20-alpine），Node interpreter path 填/usr/bin/node（Alpine）或/usr/local/bin/node（Debian） - 容器没开调试端口：启动命令要带
--inspect=0.0.0.0:9229，且运行配置中 Port mappings 必须有9229:9229 - 源码映射路径错位：在 Node.js Remote Debug 配置里，“Remote root folder” 必须和 volume 挂载的目标路径一致（如
/app），而 “Local path” 是你项目根目录；大小写、斜杠方向（/vs\）差一点，断点就永远灰掉
docker-compose 启动多容器（如 nginx + api）时常见陷阱
WebStorm 的 Docker Compose 运行配置很轻量，但也因此容易忽略 compose 本身的约束逻辑。
- 服务依赖不等于自动启动：即使你在
backend里写了depends_on: [nginx]，WebStorm 也不会帮你先起 nginx 再起 backend——你得在运行配置的服务列表中**多选**两个服务，不能只选一个再指望它自动拉起依赖 - override 文件顺序错，配置就被覆盖：WebStorm 的 Compose 配置支持多个 yml 文件，但加载顺序就是填写顺序；
docker-compose.override.yml必须放在docker-compose.yml**之后**，否则自定义的ports或environment会被主文件重置 - 改了 yml 不重启 = 白改：WebStorm 不监听文件变更，每次修改后必须手动 Stop 当前容器，再 Run 配置；否则 Services 窗口里看到的还是旧容器，IP、端口、环境变量全都不对
真正麻烦的从来不是“怎么配”，而是“配完以为好了，其实只走通了第一步”。volume 路径大小写、Docker Desktop 白名单、compose 文件加载顺序、Nginx root 和实际挂载点是否一致——这些细节不报错，但会让整个流程卡在某个静默失败点上，反复折腾两小时才发现是斜杠方向写反了。
