Azure子URL部署React应用：JS及静态文件报502错误

问题描述 #

我在Azure上采用微服务架构，每个容器为Quarkus应用，当前搭配一个React前端。现有路由配置将子URL指向承载React的Azure Pod，示例路由：https://homepage/dev/frontend/api/v1/web -> React容器。

部署后出现以下错误：

• main.aa438d03.js:1 加载资源失败：服务器返回502状态
• /favicon.ico:1 加载资源失败：服务器返回502状态

注：项目中没有favicon.ico文件，不清楚为何会被请求。

开发者工具中Application标签无内容预览，访问资源文件时被重定向至homepage/static/js/main.aa438d03.js，但预期路径应为homepage/dev/frontend/api/v1/web/static/js/main.aa438d03.js。

已尝试的操作：

1. 在package.json中设置"homepage": "/dev/frontend/api/v1/web/"，未解决问题
2. 确认静态资源（JS、CSS）已在build文件夹中正确生成

我的问题：

1. 如何正确配置React以适配/dev/frontend/api/v1/web这类子URL路径？
2. 为何项目中无favicon.ico，React仍尝试加载它？
3. 在Azure上是否需要特定配置以从正确路径提供React静态文件？

解决方案 #

1. 正确配置React适配子URL路径 #

除了在package.json中设置homepage，还需要完成以下配置：

• 检查public/index.html资源引用：所有静态资源必须使用%PUBLIC_URL%前缀，这个变量会自动替换为你设置的homepage路径，确保打包时生成正确的资源路径：

  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
  <script src="%PUBLIC_URL%/static/js/main.js"></script>
  

• React Router路由适配（若使用）：在BrowserRouter中添加basename属性，匹配子URL路径：

  <BrowserRouter basename="/dev/frontend/api/v1/web">
    {/* 路由内容 */}
  </BrowserRouter>
  

• 验证build产物：执行npm run build后，查看build/asset-manifest.json，确认所有资源路径均以/dev/frontend/api/v1/web/开头，确保打包路径正确。

2. 无favicon.ico但仍被请求的原因 #

这是浏览器的默认行为，与React无关：所有浏览器都会自动向当前域名的根路径请求favicon.ico，用于显示标签页图标，不管页面中有没有显式定义该资源。

解决方法：

• 在public/index.html中添加显式的favicon引用（可使用透明图标或自定义图标）：

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

• 或在服务器/容器配置中拦截/favicon.ico请求，返回204状态码（无内容），避免502错误。

3. Azure上的静态资源服务配置 #

需要确保Azure的路由与容器配置正确传递路径，具体操作如下：

• 路由规则配置：在Azure Ingress或负载均衡器中，将/dev/frontend/api/v1/web/*的请求转发到React容器的根路径（/*），保证子路径完整传递给容器内的服务。
• 容器内服务配置（以nginx为例）：修改nginx.conf，配置子路径与build文件夹的映射，同时处理单页应用的路由重定向：

  server {
    listen 8080;
    root /usr/share/nginx/html;
    index index.html index.htm;
  
    location /dev/frontend/api/v1/web/ {
      alias /usr/share/nginx/html/;
      try_files $uri $uri/ /dev/frontend/api/v1/web/index.html;
    }
  }
  

• Azure App Service配置（若使用App Service而非容器）：在项目根目录添加web.config文件，配置URL重写规则：

  <configuration>
    <system.webServer>
      <rewrite>
        <rules>
          <rule name="React Routes" stopProcessing="true">
            <match url=".*" />
            <conditions logicalGrouping="MatchAll">
              <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
              <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              <add input="{REQUEST_URI}" pattern="^/dev/frontend/api/v1/web/" negate="false" />
            </conditions>
            <action type="Rewrite" url="/dev/frontend/api/v1/web/index.html" />
          </rule>
        </rules>
      </rewrite>
    </system.webServer>
  </configuration>
  

  该配置会处理单页应用的路由跳转，并确保静态资源从正确路径加载。

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