如何将单解决方案中的Angular与.NET 6 API部署至单个Azure Web App

1. 让Angular构建产物输出到API项目的静态目录 #

• 打开Angular项目的angular.json，找到build配置里的outputPath，把路径改成API项目的wwwroot文件夹，示例：

  "outputPath": "../MyDotNetApi/wwwroot"
  

  替换MyDotNetApi为你的API项目名称。
• 为了避免手动构建Angular，给API项目加预构建事件：右键API项目→属性→生成事件→预生成事件命令行，输入：

  cd "$(SolutionDir)MyAngularApp"
  npm install
  npm run build -- --prod
  

  替换MyAngularApp为你的Angular项目名称，这样发布API时会自动构建Angular并把产物放到wwwroot。

2. 配置.NET API托管静态文件与路由 fallback #

• 在API项目的Program.cs中，添加静态文件中间件和路由 fallback，确保代码顺序正确：

  var builder = WebApplication.CreateBuilder(args);
  
  // 注册你的API服务（比如Controllers、Swagger等）
  builder.Services.AddControllers();
  
  var app = builder.Build();
  
  // 先启用默认文件（自动加载index.html）
  app.UseDefaultFiles();
  // 启用静态文件服务，托管wwwroot里的Angular文件
  app.UseStaticFiles();
  
  // 其他中间件（比如CORS、Swagger UI）按需添加
  app.UseRouting();
  
  // 映射API控制器路由
  app.MapControllers();
  
  // 关键：所有非API的请求都 fallback到Angular的index.html，保证Angular路由正常工作
  app.MapFallbackToFile("index.html");
  
  app.Run();
  

3. 发布到Azure Web App #

• 在Visual Studio里右键API项目，选择「发布」。
• 选择「Azure」→「Azure App Service（Windows）」，跟着向导选择已有的Web App或者创建新的。
• 发布设置里确认目标框架是.NET 6，发布模式选Release，然后点击「发布」即可。

注意事项 #

• 现在API和Angular同域部署，调用API直接用相对路径（比如/api/Products）就行，不需要配置CORS。
• 本地调试时，启动API项目就能直接访问Angular应用，因为wwwroot里的静态文件已经被托管。
• 部署后如果静态文件打不开，去Azure Portal检查Web App的「配置」→「常规设置」，确认.NET版本设为.NET 6。

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