当正面和背面位于同一 Web 应用程序 Azure 上时，前端不可用

Question

我有一个带有前端（Angular）和后端（.net 8）的项目。它们都通过 Azure DevOps 部署在 Azure 中 Web 应用程序的根目录上。服务器的内容看起来是正确的。从长远来看，我们将后端从.net框架迁移到.net 8。之前它可以工作，但现在似乎在服务器上无法正常工作，在本地它运行正常。 我尝试了这个：如何在同一个azure应用程序服务中部署角度应用程序和Web API？，但没有成功。 配置Web.config时出现问题。

如果我设置 web.config 仅访问 json 或字体文件，我可以访问此文件并看到 Web 应用程序出现错误，因为后端返回 404，因为我尚未在 web.config 上配置它：

<configuration>
  <location path="." inheritInChildApplications="false">
    <system.webServer>
        <staticContent>
          <mimeMap fileExtension=".json" mimeType="application/json" />
          <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
          <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
        </staticContent>
    </system.webServer>
  </location>
</configuration>

一旦我添加后端配置，服务器就会直接在控制台中返回 404 并显示以下消息：无法加载资源：服务器响应状态为 404 ()。就像前端不存在一样。

我为后端添加的配置是

<handlers>
          <add name="aspNetCore" path="*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
        </handlers>
        <aspNetCore processPath="dotnet" arguments=".\Epea.Api.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />

有了这个最低限度的内容，Swagger 可以访问，但不能访问前端。 我几乎尝试了所有方法，将带有规则的重写部分添加到重定向，但前端似乎无法访问，因为应用程序总是返回 404。

除了使用 app.UseStaticFiles(); 之外，program.cs 是正常的

我是否在此文件中遗漏了某些内容，或者它可能与 Web 应用程序配置有关？

Answer 1

修改

path="*"

部分中的

<handlers>

是区分API路由和前端文件的关键。

当您添加

<handlers>

和

<aspNetCore>

配置时，IIS 假定每个请求（包括 Angular 静态文件的请求）都应由后端应用程序处理，这会导致前端资源出现

404

。

配置Web.config：

<configuration>
  <system.webServer>
    <!-- ASP.NET Core handler for the backend -->
    <handlers>
      <add name="aspNetCore" path="api/*" verb="*" modules="AspNetCoreModuleV2" resourceType="Unspecified" />
    </handlers>

    <!-- ASP.NET Core settings -->
    <aspNetCore processPath="dotnet" arguments=".\Epea.Api.dll" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" hostingModel="inprocess" />

    <!-- Serve static files -->
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

    <!-- Rewrite rules for Angular frontend and backend API -->
    <rewrite>
      <rules>
        <!-- Serve Angular static files -->
        <rule name="Static Files" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" />
          </conditions>
          <action type="None" />
        </rule>

        <!-- Route API requests to the backend -->
        <rule name="Backend API" stopProcessing="true">
          <match url="^api/(.*)" />
          <action type="Rewrite" url="/{R:0}" />
        </rule>

        <!-- Fallback to Angular's index.html for frontend routes -->
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/index.html" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

• .NET 8 后端处理需要上述设置。所有与 API 路由匹配的请求（例如，

  /api/*

  ）都将由后端处理。

后端应设置为提供静态文件。

程序.cs：

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

// Serve static files for the Angular app
app.UseStaticFiles();

// Enable routing and map controllers
app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

app.Run();

网络应用程序配置：

/site/wwwroot/
  index.html
  main.js
  styles.css
  Epea.Api.dll

如果后端和 Angular 前端文件位于不同的目录中。部署合并到 Web 应用程序的根目录 (

/site/wwwroot

)。检查是否有任何冲突。