在 Azure 的不同解决方案中部署 Angular 和 Web API？答案

【问题标题】：Deploy Angular and Web API in different solutions to Azure?在 Azure 的不同解决方案中部署 Angular 和 Web API？
【发布时间】：2020-04-17 22:47:34
【问题描述】：

我们对 Azure 应用服务非常陌生，在将 基于窗口的 Web 应用程序部署到 Azure 门户方面需要帮助。 Web 应用程序由以下部分组成：

Angular 9 SPA UI 在自己的解决方案项目中
一个 Web API .NET EF Core 3.1 在自己的解决方案项目中
作为存储的 SQL 数据库

所有这些解决方案都在 Azure DevOps 存储库中。

截至今天，我们使用 Azure DevOps Build/Release 管道将应用程序部署到 IIS Server on Prem。我们有 2 条不同的管道。一个用于部署 Angular UI，另一个用于部署 Web API。

问题：

我们希望将我们的应用程序迁移到 Azure 门户。数据中心为 Linux 上的 Web 应用 创建了单个应用服务容器，但我们不知道如何设置配置，以便我们可以在 2 个单独的部署中部署 API 和 UI。换句话说，我们想要复制我们现有的流程。由于我们所有人都是 Azure 的新手，我们想知道是否有人对如何使这项工作有一些建议？我们不关心我们是否必须在单个部署或多个部署中进行。

【问题讨论】：

标签： angular azure

【解决方案1】：

这里有几种常见的方法：

将您的 Web API 部署到应用服务和 deploy your angular app to an azure storage account in a blob container。然后，您可以通过 a custom domain 公开您的 blob 容器，或者您可以使用 a function proxy 做同样的事情（后者可以让您更好地控制路由和路由，例如，如果您想从其他地方提供静态资产或转换路由.
向您的 API 添加一个简单的索引端点，为您的 Angular 前端提供服务，为此框架中有 helpers。

我建议查看选项 1，因为它更适合您所描述的内容，即您已经有两个部署管道和一个“纯”API，而不是 MVC 应用程序。

我假设您已经创建/部署了 SQL 数据库到 Azure SQL。

【讨论】：

@user:934407（马特），感谢您的回复。此时，我们只有一个 App Service。我们没有在 Azure 门户上创建 Azure 存储或 SQL 数据库。我们现有的 Web API 构建管道使用 Redgate 作为部署 SQL 数据库的任务之一。我会将您的建议反馈给我们目前正在与我们合作设置配置的数据中心团队。如果可行，我会将帖子标记为“已回答”。
感谢 Alex，您在 Azure 上有一些 SQL 选项，在这种情况下您可能还需要查看这些选项。最简单的方法是使用 Azure SQL 数据库，它是一个完全托管的 HA 和备份服务，具有一系列性价比选项。将自己托管在 VM 中也是一种选择，但设置起来更复杂。
@user:934407 (Matt)，我的数据中心成功地将 Web API 部署到 Azure 门户。对于 Angular，我们仍在努力。我有一个问题。我们在构建过程中压缩了我们的静态文件，并将 zip 文件放入拖放区。我们是否必须包含一个步骤来提取 Azure 门户上的文件？
@AlexL - here's a blog post 描述如何使用 Azure DevOps 将文件复制到 Azure 存储 - 完成此操作后，我还使用了我的答案中描述的函数代理，因此 CLI不需要启用静态站点的步骤 - 如果您仅使用自定义域，我不确定是否仍然需要。 HTH
@user:934407 (Matt)，我们终于让我们的构建/发布管道可以使用 YAML 工作了。我们可以成功构建和发布。过第一关。我们的障碍#2 是试图让我们的 Swagger 页面在 Azure 门户上工作。 Swagger 页面在 IIS 服务器上正常工作，但对于 Azure，控制器根本没有受到影响。我们知道这与路线有关，目前正在处理中。