Nginx子目录部署React应用：静态资源加载异常问题求助

我帮你梳理下这个问题的核心原因和解决方案——你推测的路径问题完全正确，再结合Nginx的路由逻辑冲突，就导致了现在“顾此失彼”的情况。

问题根源拆解 #

1. React资源路径问题：React默认打包后，资源引用是绝对路径（比如/static/css/main.d5dd0bd5.css），浏览器会直接向mydomain.com/static/css/...发起请求，而不是你期望的mydomain.com/memorygame/static/css/...，这就导致Nginx找不到对应的CSS文件。
2. Nginx路由逻辑冲突：你当前的try_files配置里，/index.html的优先级会让静态资源请求被错误重定向到根目录的index.html，而移除它后，单页应用的路由又无法正常 fallback 到子路径的index.html。

解决方案：两步搞定 #

第一步：修正React打包的资源路径

让React打包时自动给资源加上子路径前缀：

• 如果是Create React App创建的项目，直接在项目根目录的package.json中添加一行：

  "homepage": "/memorygame"
  

  然后重新执行npm run build，打包后的资源引用会自动变成/memorygame/static/css/main.d5dd0bd5.css，浏览器就能正确请求子路径下的资源了。
• 如果是自定义Webpack配置的项目，找到Webpack配置文件的output节点，设置publicPath：

  output: {
    // 其他配置...
    publicPath: '/memorygame/'
  }
  

  同样重新打包即可。

第二步：优化Nginx路由配置

调整配置逻辑，让静态资源和页面路由互不干扰：

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /var/www/mydomain.com;
    index index.html;
    server_name mydomain.com www.mydomain.com;

    location /memorygame {
        # 优先匹配请求对应的文件，找不到则 fallback 到子路径的index.html（适配React单页路由）
        try_files $uri $uri/ /memorygame/index.html;

        # 单独处理静态资源，确保直接返回文件，不会被重定向到index.html
        location ~* \.(css|js|png|jpg|svg|ico)$ {
            try_files $uri =404;
        }
    }
}

这个配置的逻辑：

• 当请求/memorygame下的内容时，先尝试找对应文件（比如CSS、JS），找不到就返回子路径的index.html，满足单页应用的路由需求。
• 静态资源的子location块会优先匹配，确保CSS/JS等文件直接被返回，不会触发页面重定向。

调整后重启Nginx，就能同时正常加载页面和静态资源了。

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