Docker部署Nginx时无法加载CSS/JS静态文件的问题排查

1. 容器挂载参数覆盖了镜像内的构建文件 #

你执行的docker run命令里的-v /usr/share/nginx/html/是错误操作：

docker run -p 8080:80 -v /usr/share/nginx/html/ test_nine

这个参数会将宿主机的/usr/share/nginx/html目录（不存在则自动创建空目录）挂载到容器内同路径，直接覆盖了你通过COPY --from=builder复制到镜像里的React构建产物，导致容器内的静态资源目录为空，触发404错误。

解决方法：
删除多余的-v参数，正确的运行命令为：

docker run -p 8080:80 test_nine

2. React构建的资源路径配置错误 #

从错误日志可见，页面请求的资源路径是/web/static/css/...，但你将React构建后的build目录直接复制到了容器的/usr/share/nginx/html，实际静态资源路径应为/usr/share/nginx/html/static/...，两者路径不匹配。这说明React项目的资源根路径配置错误，导致构建后HTML里的资源引用多了一层/web前缀。

解决方法：

• 若使用Create React App创建项目：
  在package.json中添加或修改homepage字段：

  "homepage": ".",
  

  或者构建时指定环境变量：

  PUBLIC_URL=. yarn build
  

• 若使用自定义Webpack配置：
  修改output.publicPath为./或空字符串：

  module.exports = {
    output: {
      publicPath: './',
      // 其他配置项...
    }
  }
  

修改后重新构建镜像并运行容器即可。

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