React项目Dev Server正常，Nginx(Docker)部署后UI异常求助

1. 先确认Docker部署的文件是否正确 #

你当前Dockerfile复制的是public/目录，但React生产环境需要的是构建后的产物（默认执行npm run build后生成的build/目录），而非原始的public文件夹。开发服务器会动态处理public内的内容，但Nginx只能直接提供静态构建文件：

• 本地先执行npm run build（或yarn build）生成生产环境构建包
• 修改Dockerfile的复制命令：

COPY build/ /usr/share/nginx/html/

2. 修复Nginx的路由与静态资源配置 #

当前Nginx的location = /仅精确匹配根路径，导致其他路由（React单页路由）或静态资源（CSS/JS）请求返回404，这是UI异常的常见原因。替换为以下配置：

server {
  listen    80 default_server;
  listen    [::]:80 default_server;

  root /usr/share/nginx/html;
  index index.html;

  # 缓存静态资源，提升加载速度
  location ~* \.(js|css|png|jpg|svg|ico)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
  }

  # 处理单页应用路由，所有非静态资源请求都返回index.html
  location / {
    try_files $uri $uri/ /index.html;
  }
}

3. 排查Webpack生产环境配置 #

如果上述操作后仍有问题，检查Webpack的publicPath设置：

• 确保生产环境的publicPath为/（应用部署在域名根路径时），避免资源引用路径错误
• 打开构建后的build/index.html，确认CSS、JS等资源的引用路径是绝对路径（如/static/css/main.xxx.css），而非相对路径

4. 通过浏览器开发者工具定位具体错误 #

打开浏览器F12开发者工具：

• 查看Console标签：是否有JS执行报错、CSS解析错误
• 查看Network标签：是否有404状态的资源请求，确认请求路径是否与Nginx的资源路径匹配

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