使用路径配置Azure Front Door多后端及解决404问题

一、Azure Front Door 路由规则配置 #

针对frontend1的路由设置 #

• 新建匹配模式为/frontend1/*的路由规则
• 进入路由配置的路径重写模块，设置源模式为/frontend1/*，目标模式为/abc/{R:1}。这样访问xyz.azurefd.net/frontend1/xxx时，会自动转发到后端frontend1的/abc/xxx路径
• 确认后端池关联的是frontend1对应的Azure Web App

针对frontend2的路由设置 #

• 新建匹配模式为/frontend2/*的路由规则
• 路径重写设置源模式为/frontend2/*，目标模式为/{R:1}（不需要追加固定路径，直接转发原路径即可）
• 后端池关联frontend2对应的Azure Web App

二、React应用适配基础路径 #

1. 构建时指定基础路径 #

如果是Create React App项目：

• 在package.json里添加一行"homepage": "/frontend1"
• 执行npm run build，生成的静态资源会自动带上/frontend1前缀，避免资源加载404

2. 路由组件适配 #

使用React Router的话，给BrowserRouter添加basename属性：

import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter basename="/frontend1">
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

这样React Router会把/frontend1当成根路径，处理后续的/PATH/PATH1/PATH2这类路由，不会把/frontend1识别成业务路由导致404

3. 修复Azure Web App刷新404问题 #

React是单页应用，刷新非根路径会触发Web App的404，得添加重写规则：

• Windows环境Web App：在wwwroot目录新建web.config，内容如下：

<?xml version="1.0" encoding="UTF-8"?>
<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="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/frontend1/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• Linux环境Web App：如果用Apache就配置.htaccess，用Nginx就修改站点配置，把所有非文件/目录的请求重写到index.html

三、验证配置 #

1. 把修改后的React应用重新部署到Azure Web App
2. 测试访问https://xyz.azurefd.net/frontend1/PATH/PATH1/PATH2，应该能正常加载对应路由，且后端接收到的路径是/abc/PATH/PATH1/PATH2
3. 测试https://xyz.azurefd.net/frontend2/xxx，确认能直接转发到frontend2的对应路径

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