如何在同一个 azure 应用程序服务中部署 angular 应用程序和 Web API？

Question

我有两个独立的项目，ASP.net Web API和Angular 8.
我能够在同一个App Service.

所以假设 url 是：http://someurl.azurewebsites.net：

• API 通过http://someurl.azurewebsites.net/api访问
• angular 应用程序通过http://someurl.azurewebsites.net/index.html访问。

但是当我访问该链接时，它会打开默认的 ASP.Net 主页。将 /index.html 添加到链接后，它会打开网站，但是如果我刷新页面，它会将我带回 ASP.Net 主页

我尝试更改应用服务中的默认文档并将其设置为，index.html但这不起作用。

我希望 angular 应用程序成为应用程序服务的默认页面。

Answer 1

基本上这需要执行以下步骤才能使其工作。

解决方案包含

i) sampleApp.API(.Net Core Web API)

ii)sampleApp.UI(Angular App)

为两个应用程序设置 Azure 门户

1) 在 azure 门户中转到您的 Web 应用程序 -> 设置 -> 配置

2）选择路径映射并在此处为子站点创建新的映射条目。添加此条目时不要选择目录复选框以将其保留为虚拟应用程序类型。单击保存

 **Virtual Path:** /{folderName}            **physicalPath:**  /site/wwwroot/{folderName}       

3) 现在转到 VS2017 右键单击​​您的 API 项目并单击发布

4）在发布设置窗口中将路径设为

site name : existing + "/{folderName} "
DestinationUrl : existing + "/{folderName} "

5) 现在 ng-build --prod 您的 angular 应用程序并部署 dist/clientApp 文件夹并使用根路径发布。

所以现在两者都应该像

角度应用 https://{AzureAppName}.azurewebsites.net

Web API https://{AzureAppName}.azurewebsites.net/{folderName}/api/{controllerName}/{action}

如果用户在访问 api 项目时仍然面临“无法从 web.config 读取配置数据”的问题

为此，在您的 API 项目中转到startup.cs并将配置函数更改为具有以下代码行

app.Map('/{folderName}', app1 => Configure1(app1, loggerFactory);

并在名为 configure1 的配置函数的空白副本中创建并如上所述重新部署您的 API 项目。

public void Configure1(IApplicationBuilder app, ILoggerFactory loggerFactory)
        {
            //keep it blank
        }