React应用本地子URL正常但Azure部署异常，求排查配置问题

核心错误点分析 #

1. 静态资源路径与实际文件位置不匹配 #

你在index.html和React组件中把静态资源路径设为/web/favicon.ico、web/logo.jpg，但React打包后，public文件夹内的文件会直接输出到打包产物的根目录（例如/usr/share/nginx/html/），而非/web/子目录。这导致请求/web/favicon.ico时，Nginx会去不存在的/usr/share/nginx/html/web/favicon.ico路径查找文件，最终加载失败。

2. React组件中资源路径写法错误 #

组件内的src="web/logo.jpg"是相对路径，当路由切换到/web/xxx/yyy这类嵌套路径时，该相对路径会解析为/web/xxx/web/logo.jpg，完全偏离实际文件位置。

3. Nginx配置的路径映射逻辑缺陷 #

当前location /web/的try_files指令最后指向根目录/index.html，但未处理/web/前缀与实际文件路径的映射；同时缺少对/web/favicon.ico、/web/logo.jpg这类非静态文件夹资源的路由规则。

4. Azure Routes配置未区分静态资源与动态路由 #

现有routes.json仅将所有/web/*请求指向index.html，导致静态资源请求也返回HTML内容，而非实际文件。

修复方案 #

1. 修正静态资源路径写法 #

• index.html：使用%PUBLIC_URL%变量自动匹配homepage配置，避免硬编码路径：

  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  

• React组件：通过process.env.PUBLIC_URL获取正确的资源前缀：

  <Link to="/">
    <img
       src={`${process.env.PUBLIC_URL}/logo.jpg`}
       alt="Company Logo"
       className="logo"
    />
  </Link>
  

2. 调整Nginx配置 #

修改路由规则，确保/web/前缀的请求能正确映射到根目录文件：

server {
    listen       80;
    server_name localhost;

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

    # 处理所有/web/开头的请求，自动剥离前缀匹配根目录文件
    location /web/ {
        rewrite ^/web/(.*)$ /$1 break;
        try_files $uri $uri/ /index.html;
    }

    # 根路径重定向到/web/入口
    location = / {
        return 302 /web/;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

3. 更新Azure Routes配置 #

区分静态资源与动态路由，优先返回实际文件：

{
  "routes": [
    {
      "route": "/web/static/*",
      "serve": "/static/{*}",
      "statusCode": 200
    },
    {
      "route": "/web/favicon.ico",
      "serve": "/favicon.ico",
      "statusCode": 200
    },
    {
      "route": "/web/logo.jpg",
      "serve": "/logo.jpg",
      "statusCode": 200
    },
    {
      "route": "/web/*",
      "serve": "/index.html",
      "statusCode": 200
    }
  ]
}

4. 验证打包结果 #

执行npm run build后，检查build文件夹内的index.html，确认所有资源路径均为/web/xxx格式，且实际文件存放在build根目录。

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