在Azure上部署Angular和.NET Core Web API

随着云计算技术的不断发展，越来越多的企业选择将应用部署到云平台以提高服务的可用性和扩展性。Azure作为微软提供的云服务平台，提供了丰富的服务和工具，使得在云上部署应用变得简单快捷。本文将介绍如何将使用Angular和.NET CoreWeb API构建的项目部署到Azure平台。

API设置

首先，需要在Azure上设置API。在设置API之前，请确保以下配置已经就绪：

对于Azure SQL数据库，确保允许其他Azure服务访问它。点击“设置服务器防火墙”并允许访问。

设置静态Web应用

接下来，将设置Azure上的静态Web应用，该应用将托管Angular应用程序。截至本文撰写时，Azure静态Web应用是免费的，因为它仍处于预览模式。预览模式结束后，将会产生相关费用。只需转到Azure并创建静态Web应用资源即可。

在部署细节中，对GitHub仓库进行身份验证，并选择包含Angular代码的仓库和分支。选择Angular作为构建预设，并输入以下内容：

• 应用位置 - 这是Angular应用程序在GitHub仓库中的位置。在例子中，Angular代码位于ui文件夹中。
• API位置 - 在这里，可以指定API项目的位置。在例子中，已经在另一个Web应用中托管了API，所以将其留空。
• 输出位置 - 这是Angular构建产品的存放位置。默认情况下，当运行“ng build”时，它将位于dist文件夹中。

GitHub Actions

当资源创建后，Azure会在GitHub仓库的.github/workflows文件夹下创建一个构建定义文件：

然后，GitHub将启动构建和部署过程，可以在GitHub的Actions标签页中看到工作流的启动。

在例子中，第一次并没有成功。点击工作流显示它试图构建api文件夹中的内容，这是不需要的：

事实证明，即使在设置Azure静态Web应用时没有输入API位置字段，它仍然在构建定义中添加了字符串“api”。简单地将api_location更新为一个空字符串，它就成功构建并自动部署到Azure：

CORS配置

不要忘记在Azure的API配置中允许CORS。

构建成功后，每次提交新代码时，GitHub都会构建应用程序并部署到Azure。