Azure App Service并行运行两个前端应用配置求助：路径映射失效

我来帮你搞定这个问题——之前我也碰到过路径映射没生效的情况，大多是配置细节没踩对，咱们一步步来排查解决：

1. 检查路径映射的基础配置 #

首先进入你的App Service后台，打开「配置」>「路径映射」，确认你给App2添加的虚拟应用配置是正确的：

• 虚拟路径：比如你要通过/app2访问App2，这里就填/app2
• 物理路径：重点注意，Windows环境下要填site\wwwroot\app2，Linux环境下填/home/site/wwwroot/app2（必须是相对于wwwroot的子目录，不能写错）
• 确保「应用程序」选项是勾选状态（前端应用一般选虚拟程序而非虚拟目录）

2. 配置前端应用的基础路径 #

这是最容易忽略的关键步骤！几乎所有前端框架（React、Vue、Angular）都需要配置基础路径，否则路由和静态资源会找不到：

• React：在package.json里添加"homepage": "/app2"，重新构建后再部署
• Vue：在vue.config.js里设置publicPath: '/app2/'
• Angular：在angular.json的architect.build.options里添加"baseHref": "/app2/"

如果没做这个配置，访问/app2时会加载根应用的资源，或者直接出现404错误。

3. 配置静态文件路由规则 #

根据你的App Service操作系统，需要配置对应的路由规则，确保请求能正确分发到两个应用：

Windows环境（web.config） #

• 根目录的web.config要排除/app2路径，让它走虚拟应用：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <!-- 根应用路由规则 -->
        <rule name="Root App Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <!-- 排除/app2路径，交给虚拟应用处理 -->
            <add input="{REQUEST_URI}" pattern="^/app2/" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• App2目录下也要放一个web.config，处理自己的前端路由：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="App2 Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/app2/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Linux环境（Nginx配置） #

如果是Linux的App Service，你需要修改Nginx的配置文件：

1. 通过Kudu控制台（https://<你的应用名>.scm.azurewebsites.net/DebugConsole）进入/etc/nginx/sites-available
2. 编辑default文件，添加/app2的路由规则，指向对应的目录：

location /app2 {
    alias /home/site/wwwroot/app2;
    try_files $uri $uri/ /app2/index.html;
}

# 根应用的路由规则
location / {
    root /home/site/wwwroot;
    try_files $uri $uri/ /index.html;
}

修改后重启Nginx生效：sudo service nginx restart

4. 确认部署目录正确 #

一定要保证两个应用部署到了对应的位置：

• 根应用部署到site\wwwroot（Windows）或/home/site/wwwroot（Linux）
• App2部署到site\wwwroot\app2（Windows）或/home/site/wwwroot/app2（Linux）
  可以通过Kudu控制台查看文件结构，确认App2的文件都在对应的子目录里，没有被根应用覆盖。

5. 测试与排查 #

完成上述配置后，访问https://<你的应用名>.azurewebsites.net/app2：

• 打开浏览器开发者工具，查看网络请求，如果有静态资源404，说明基础路径没配置对
• 查看App Service的「日志流」，看有没有路径映射相关的错误提示

按照这些步骤检查下来，应该就能解决路径映射不生效的问题了。如果碰到特定的错误信息，随时贴出来我再帮你分析。

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