部署.NET Blazor WebAssembly至Azure静态Web应用时API报404错误

问题 #

按照官方文档将.NET Blazor WebAssembly应用部署至Azure静态Web应用后，Web应用主页可正常访问，但所有API接口均返回404未找到错误。相关配置及代码如下：

GitLab CI配置文件 gitlab-ci.yaml #

stages:
  - deploy

variables:
  API_TOKEN: $AZURE_STATIC_WEB_APPS_API_TOKEN
  APP_PATH: '$CI_PROJECT_DIR/ExpenseTracker.Client'
  OUTPUT_PATH: 'wwwroot'
  API_PATH: '$CI_PROJECT_DIR/ExpenseTracker.Server'
  PUBLISH_DIR: '$CI_PROJECT_DIR/publish'

deploy:
  stage: deploy
  image: registry.gitlab.com/static-web-apps/azure-static-web-apps-deploy
  script:
    - echo "App deployed successfully."

staticwebapp.config.json 文件 #

{
    "routes": [
        {
            "route": "/api/*",
            "serve": "/api"
        }
    ],
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

ExpenseTracker.Server 的 program.cs #

using System.Text.Json.Serialization;
using DinkToPdf;
using DinkToPdf.Contracts;
using ExpenseTracker.Server.AppDbContext;
using ExpenseTracker.Server.Entities;
using ExpenseTracker.Server.Services;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSingleton(typeof(IConverter), new SynchronizedConverter(new PdfTools()));

builder.Services.AddControllers().AddJsonOptions(x =>
                x.JsonSerializerOptions.ReferenceHandler = ReferenceHandler.IgnoreCycles);

builder.Services.AddRazorPages();  // Combine razor pages and api

// For Entity Framework
builder.Services.AddDbContext<ExpenseTrackerDbContext>(options =>
{
    options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection"));
});

// For DI registration
builder.Services.AddTransient<IExpenseTrackerService, ExpenseTrackerService>();

builder.Services.AddEndpointsApiExplorer();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();
}

app.UseHttpsRedirection();

app.UseStaticFiles(); // to laod wasm static files

app.UseBlazorFrameworkFiles(); //  a special middleware component to serve the client 

app.UseAuthorization();

app.MapRazorPages(); // Combine razor pages and api

app.MapControllers();// handle /api

app.MapFallbackToFile("index.html");  // handle  everything else

app.Run();

ExpenseTracker.Client 的 program.cs #

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using ExpenseTracker.Client;
using MudBlazor.Services;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddMudServices();

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

原因及解决方案 #

1. GitLab CI脚本未执行实际部署操作 #

当前CI脚本仅输出提示语句，没有运行Azure静态Web应用的部署命令，导致API项目未被部署到Azure。

修改gitlab-ci.yaml的script部分，添加完整部署流程：

script:
  - dotnet publish $API_PATH -c Release -o $PUBLISH_DIR
  - /bin/bash -c "if [ -z \"$AZURE_STATIC_WEB_APPS_API_TOKEN\" ]; then echo \"AZURE_STATIC_WEB_APPS_API_TOKEN is not set\"; exit 1; fi"
  - swa deploy $APP_PATH --api-location $PUBLISH_DIR --output-location $OUTPUT_PATH --api-token $API_TOKEN

2. staticwebapp.config.json路由配置错误 #

现有路由规则会将所有/api/*请求强制指向/api根路径，导致具体API接口（如/api/expenses）无法被正确路由到后端控制器。

删除错误路由规则，Azure静态Web应用会自动将/api前缀请求转发到部署的API后端，修改后的配置：

{
    "navigationFallback": {
        "rewrite": "/index.html"
    }
}

3. 验证API控制器路由特性 #

确保ExpenseTracker.Server中的控制器添加了正确的路由特性，例如：

[ApiController]
[Route("api/[controller]")]
public class ExpensesController : ControllerBase
{
    // 控制器方法
}

该特性保证/api/expenses这类请求能正确映射到对应控制器方法。

内容的提问来源于stack exchange，提问作者hanushi-thana