生产构建时Webpack无法找到public文件夹问题排查

核心原因分析 #

• Webpack未复制public目录静态资源：本地开发时React Dev Server会自动托管public目录，但生产构建阶段，当前Webpack配置没有将public下的文件同步到build目录，导致simulation/index.html未被打包，部署后Nginx无法找到该文件。
• Nginx资源路径映射错误：即使文件已存在，若Nginx的root或location配置未正确指向build目录，也会触发404错误。

解决方案 #

方案1：配置Webpack同步public目录资源 #

使用copy-webpack-plugin将public下的静态资源复制到build目录：

1. 安装依赖：

npm install copy-webpack-plugin --save-dev

2. 修改Webpack配置，在plugins数组中添加复制规则：

const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');

// ... 其他原有配置

plugins: options.plugins.concat([
  // ... 已有的plugin（如EnvironmentPlugin）
  new CopyWebpackPlugin({
    patterns: [
      { 
        from: path.resolve(process.cwd(), 'public'), 
        to: path.resolve(process.cwd(), 'build') 
      }
    ]
  })
]),

构建后，public目录下的所有文件（包括simulation文件夹）会被同步到build目录，部署后Nginx可正常访问该HTML文件。

方案2：修正Nginx配置 #

确保Nginx正确指向build目录并配置静态资源路由：

server {
  listen 80;
  server_name 你的域名或IP;

  root /服务器上build文件夹的绝对路径;
  index index.html;

  # 处理simulation路径下的静态文件
  location /simulation/ {
    try_files $uri $uri/ =404;
  }

  # 处理React SPA路由的 fallback
  location / {
    try_files $uri $uri/ /index.html;
  }
}

配置完成后重启Nginx：

sudo nginx -s reload

验证步骤 #

1. 执行构建命令后，检查build目录下是否存在simulation/index.html，确认文件已被复制。
2. 直接访问http://你的服务器地址/simulation/index.html，若能正常打开则说明文件存在且Nginx配置正确。

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