【问题标题】:How to deploy angular app and web API in same azure app service?如何在同一个 Azure 应用服务中部署 Angular 应用和 Web API?
【发布时间】:2020-02-26 12:24:56
【问题描述】:

我有两个独立的项目,ASP.net Web APIAngular 8
我能够在同一个 App Service 上发布两者。

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

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

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

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

【问题讨论】:

    标签: angular azure asp.net-web-api


    【解决方案1】:

    您可以为api创建子应用程序并为index.html设置路径API应用程序和IIS配置集启动页面

    它工作正常!

    请按照以下步骤操作:

    1. 首先创建 Web 应用并设置 Angular 应用路径和域
    2. 然后选择这个web应用,然后右键创建另一个子应用,比如api

    【讨论】:

      【解决方案2】:

      在 Azure Portal 的 App Service 中,启动 Cmd 并运行 dir 命令查看哪些文件部署到 wwwroot。

      而且,API 是否设置为单独的虚拟目录?

      【讨论】:

        【解决方案3】:

        基本上,这需要完成以下步骤才能使其正常工作。

        解决方案包含

        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
                }
        

        【讨论】:

        • 一些用户可能会遇到错误代码:502 而不是 500.19(无法读取配置一)解决方案将保持不变。
        猜你喜欢
        • 2019-05-17
        • 2022-06-13
        • 1970-01-01
        • 2018-02-28
        • 1970-01-01
        • 1970-01-01
        • 2021-02-24
        • 2021-11-29
        • 2022-07-29
        相关资源
        最近更新 更多