.NET Core + Angular SPA 到 Azure答案

【问题标题】：.NET Core + Angular SPA to Azure.NET Core + Angular SPA 到 Azure
【发布时间】：2020-09-17 06:15:35
【问题描述】：

我一直在尝试部署具有 Web API 和 Angular SPA（ClientApp 文件夹）的 .net Core 解决方案，我一直在尝试使用 Visual Studio 代码部署相同的解决方案，但不知何故它没有发布应用程序。

到目前为止，我已尝试关注以解决问题

1. ng build --prod
2. ng serve

它们都可以正常工作。并且应用程序在本地主机中工作。我也试过下面的命令 dotnet publish -c Release -o ./publish; 创建发布文件夹并尝试发布。我也尝试在 dist 文件夹中发布 ClientApp 文件夹。

**请注意，一切都在一个解决方案中，我想保持这种方式:) **

【问题讨论】：

您遇到了什么问题？ Azure 管道中的错误？
您必须关注一些 azure 文档来帮助您。把它放在这里。或者，尝试将您的代码放入公共存储库并在此处链接。现在，这个问题还真不清楚。
是的，我一直在关注这个视频youtube.com/watch?v=prRBys1h8iw，但它不起作用，我找不到允许我在 Azure 中的同一个 WebApp 中部署我的 API 和 SPA 的东西......希望这有点更清楚......
您是否也在此处使用 Azure DevOps？

标签： angular .net-core azure-web-app-service

【解决方案1】：

当您使用ng build --prod 命令时，将在/dist/project-name/ 文件夹下为您创建一个构建项目。此文件夹的内容包括 index.html 是您可以在 Web 服务器上提供的内容（IIS、Nginx、...）。如果要部署后端（.net Core）和客户端，则应由 Web 服务器提供服务。如果您只想测试部署的 Angular 应用程序，您可以使用 http-server，它是一个简单的零配置命令行 http 服务器。您可以通过以下命令安装它：

npm install -g http-server

安装和构建 Angular 应用程序后，打开终端/CMD 和 CD 到有 index.html 的 /dist/project-name/ 并通过以下命令提供服务：

http-server -p [PORT]

例如如果你想在你的localhost 和端口8080 上提供它，这是命令：

http-server -p 8080

但是，对于生产模式并在服务器上部署，您必须选择一个 Web 服务器，例如 Nginx 或 IIS，然后将这两个应用程序都部署在上面..

为了在 Azure 上部署，在构建 Angular 应用程序之后，这些是一般步骤：

在以下位置创建 Azure 应用服务：Home > App Services

在以下位置配置您的 Azure 应用服务：Home > App Services > Web App

禁用 Application Insights（可选）选项：Home > App Services > Web App

在以下位置查看和创建应用服务：Home > App Services > Web App，第 4 个选项卡 => Create + Review

使用本地 Git 配置应用服务部署流程

查看您的 Git/部署用户名和 Git 克隆 url

配置 Azure 部署用户

验证部署用户和克隆应用服务 Git Repo

准备本地部署文件夹并克隆 Azure 应用服务 Git 存储库

提交部署包并将其推送到 Azure Dev Ops 存储库

有关详细信息，请阅读这篇有用的文章：Deploy Angular 8+ Application to Azure App Service(PaaS) using Local Git(CD

【讨论】：

您好，我正在尝试在 Azure 的应用中部署该应用。
嗨，我为你更新了我的答案。一探究竟。如果您有任何问题，请告诉我。
谢谢，我已经在执行以上步骤了。但是 VS 代码抛出了非常通用的错误。但是，我发现这是因为 anguar.json 文件中的 Budget 属性。一旦我有固定的最大长度。我可以正确构建它，然后毫无问题地进行部署
干得好，伙计。 ;)