时间戳

首页 > 解决方案 > 如何在同一个 Azure 应用服务中部署 Angular 应用和 Web API？

angular - 如何在同一个 Azure 应用服务中部署 Angular 应用和 Web API？

问题描述

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

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

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

我尝试更改应用服务中的默认文档并将其设置为，index.html但没有奏效。

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

标签： angularazureasp.net-web-api

解决方案

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

解决方案包含

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

ii)sampleApp.UI( Angular 应用程序)

为两个应用程序设置 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
        }

推荐阅读