能否将Angular应用部署到Azure上已有的WebAPI应用中？

完全可以将Angular前端和现有WebAPI后端部署在同一个Azure App Service实例上，无需额外创建新的Azure应用资源。

• 首先本地编译Angular应用，Angular 12以下版本执行ng build --prod，Angular 12及以上版本执行ng build --configuration production，编译完成后会生成dist目录，目录内就是所有可直接部署的前端静态资源。
• 给WebAPI项目添加静态文件服务支持，同时配置回退路由避免刷新前端路由时出现404：

以ASP.NET Core WebAPI为例，只需在Program.cs文件中按顺序添加配置：先启用app.UseStaticFiles()以支持加载静态资源，在所有API路由注册完成的末尾，添加回退规则，将所有未匹配到API路由的请求统一返回Angular的index.html文件即可。

• 将Angular编译生成的dist目录下的所有文件，全部放到WebAPI项目的wwwroot目录下，没有该目录直接手动新建即可。
• 按照你之前发布WebAPI的常规流程，把包含wwwroot目录的整个WebAPI项目发布到原有的Azure App Service实例即可完成部署。

• 建议给所有WebAPI接口统一添加/api前缀，避免API路由和Angular前端路由出现冲突。
• 同实例部署后前后端属于同源，之前额外加的跨域配置可以直接移除，不会再触发跨域限制。

如果你不想调整现有WebAPI的代码配置，可以通过Azure App Service的虚拟应用功能实现同实例部署：

1. 进入Azure Portal对应App Service的配置页，找到路径映射模块
2. 新增虚拟应用：虚拟路径填/，物理路径填site/wwwroot/angular，勾选「目录为应用」
3. 保留原有WebAPI的虚拟路径配置为/api，对应物理路径site/wwwroot/api
4. 分别将编译好的Angular静态资源上传到site/wwwroot/angular目录，WebAPI发布到site/wwwroot/api目录即可。

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