Docker多阶段构建COPY指令不生效：Angular应用变更未同步

核心问题定位 #

你访问的端口错误：docker-compose.yml中，frontend服务映射的是8080端口（配置ports: - "8080:80"），而你访问的http://localhost:3000是api服务的端口，自然看不到前端应用的变更。

解决方案 #

• 直接访问前端服务的正确端口：打开http://localhost:8080查看Angular应用的最新变更
• 若希望通过3000端口访问前端：可以调整frontend服务的端口映射为ports: - "3000:80"（需确保api服务停止或修改其端口，避免冲突），或者在api服务中配置反向代理指向frontend服务

额外验证步骤 #

• 确认Docker构建产物是否正确：执行以下命令进入frontend容器，检查Nginx目录下的文件是否为最新版本

  docker exec -it <你的frontend容器ID或名称> cat /usr/share/nginx/html/index.html
  

• 验证Docker构建过程：可以在Dockerfile的Stage1末尾添加日志命令，确认构建产物路径正确

  # Stage1末尾添加
  RUN ls -la /studio-frontend/dist/studio-frontend/browser
  

内容的提问来源于stack exchange，提问作者Ian Tunbridge