如何使用 Visual Studio 2022 将具有 Angular 应用的 ASP.NET 核心正确发布到 Azure

How to properly publish an ASP.NET core with Angular app to Azure using Visual Studio 2022

提问人：LittleTreeX 提问时间：11/11/2023 更新时间：11/15/2023 访问量：207

问：

赏金将在 14 小时后到期。这个问题的答案有资格获得 +50 声望赏金。LittleTreeX希望引起人们对这个问题的更多关注。

这些是我使用的步骤：

  1. 我在Visual Studio中开始了一个新项目，特别是“ASP.NET Core with Angular”。
  2. 我严格按照本指南中的说明进行操作：https://learn.microsoft.com/en-us/aspnet/core/tutorials/publish-to-azure-webapp-using-vs?view=aspnetcore-7.0（基本上只是运行使用 Visual Studio 中的内置发布功能、创建新的 Azure Web 应用服务、设置数据库和发布项目的过程）。

使用 F5 加载时，该站点在本地工作。

但是，已发布的网站不起作用。这是因为发布功能将文件夹的内容放在 中。distsite\wwwroot\wwwroot

如果我进入 Azure 中的路径映射配置并更改默认虚拟路径以指向站点（尽管不是默认的注册或登录身份验证功能）。/site\wwwroot\wwwroot

身份验证问题可能只是数据库配置问题，或者它仍然是路径问题，我不确定。

但是，更大的问题是，如果我进行更改并再次发布项目，则项目将发布到其中，这意味着新的现在是.site\wwwroot\wwwrootwwwrootsite\wwwroot\wwwroot\wwwroot

因此，我无法更改路径映射以使我的网站正常工作，而不会中断任何未来的发布。我真的不明白为什么我专门使用 Visual Studio 创建的新创建的基础项目会开箱即用。我是 Azure 和 Angular 的新手，所以也许我应该更改配置文件中的某些内容。我在网上搜索并尝试了很多不同的东西，但无济于事。所有 Web 知识看起来都与没有相同配置文件的旧版本相关。

除了这个嵌套的发布问题之外，我还想知道为什么路由可能不适用于默认注册页面。这是浏览器中的内容：我只是得到一个 404 未找到：mysite.azurewebsites.net/Identity/Account/Register?returnUrl=/authentication/loginThe resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

C# asp.net Angular Azure 可视化工作室

评论

0赞 Dai 11/14/2023
“我真的不明白为什么我专门使用 Visual Studio 创建的新创建的基础项目会开箱即用地失败”——因为 JS/生态系统的移动速度（并且中断速度更快）比 MS 可以启动服务版本的速度更快。npm
0赞 Greg Gum 11/15/2023
我已经将许多 .net core 应用程序发布到 Azure，没有任何问题。我不完全理解您的问题，但只是为了尝试提供帮助：除非您真的知道自己在做什么，否则我不会尝试更改 Azure 上的任何默认设置。我从未更改过任何默认设置。如果我是你，我会使用 Angular 模板创建一个新的测试项目，并在不做任何更改的情况下发布它。然后，您可以查看它是否正常工作。如果是这样，那么您可以看到如何修改您的项目以匹配。
0赞 Greg Gum 11/15/2023
此外，创建新的 AppService，以便确保使用所有默认值。或者，您可以在当前的 AppServer 中创建一个“插槽”以发布到，确保不要从主插槽复制设置。
0赞 LittleTreeX 11/16/2023
@GregGum我第一次没有更改任何设置，但可以肯定的是，我删除了所有 Azure 资源，创建了一个新项目，并再次严格按照该 MS 教程进行操作。我还进行了 SaiVamshiKrishna 在回答中建议的调整，但无济于事。我正在经历完全相同的行为。

答：

0赞 SaiVamshiKrishna 11/15/2023 #1

嵌套发布问题

  • 嵌套发布问题是由 Visual Studio 使用 Angular 应用程序发布 ASP.NET Core 的方式引起的。
  • 默认情况下，Visual Studio 将 Angular 应用程序发布到 ASP.NET Core 应用程序的 wwwroot/dist 文件夹。
  • 将 ASP.NET Core 应用程序发布到 Azure 时，Visual Studio 会将 wwwroot 文件夹的内容复制到 Azure Web 应用上的 site\wwwroot 文件夹。
  • 这会导致将 Angular 应用程序发布到 Azure Web 应用上的 site\wwwroot\wwwroot 文件夹。

修复

  • 要解决嵌套发布问题，一种方法是使用 Angular CLI 构建和发布 Angular 应用程序。为此，请按照下列步骤操作：
  1. 打开 Visual Studio 命令提示符。 导航到 Angular 应用程序的目录。 运行以下命令：enter image description here

这将在生产模式下构建 Angular 应用程序，并在 dist 文件夹中生成 Angular 应用程序工件。

  1. 打开 ASP .NET Core 应用程序的 Visual Studio 项目。

  2. 在“解决方案资源管理器”中，右键单击“wwwroot”文件夹，然后选择“从项目中排除”。

  3. 右键单击 Angular 应用程序项目，然后选择 Add > Existing Item。

  4. 导航到 dist 文件夹并选择所有 Angular 应用程序工件。

  5. 单击“添加”。 这会将 Angular 应用程序项目添加到 ASP .NET Core 应用程序项目。

  6. 右键单击 ASP .NET Core 应用程序项目，然后选择“发布”。

  7. 这会将 ASP .NET Core 应用程序发布到 Azure，包括 Angular 应用程序项目。

结果 enter image description here

enter image description here

路由问题当您尝试访问注册页面时出现 404 错误的原因是 Angular 路由器未配置为处理 /Identity/Account/Register 路由。要解决此问题，您需要向 Angular 路由器配置文件添加路由。

为此，请打开 Angular 项目中的 app-routing.module.ts 文件。将以下路由添加到路由数组中：

{ path: 'Identity/Account/Register', component: RegisterComponent }

这将告诉 Angular 路由器在用户导航到 /Identity/Account/Register 路由时加载 RegisterComponent 组件。

添加路由后，需要构建并发布 Angular 项目。然后，您可以在浏览器中导航到注册页面，它应该会正确加载。

评论

0赞 LittleTreeX 11/16/2023
不幸的是，这些修复都没有帮助。我重新启动了一个新项目，并包含了您的第一个修复程序。项目文件未发布到根文件夹中。如果我手动发布它们，特别是打开 /index.html，网站就可以工作了。您的第二个修复似乎不是问题，因为 Angular 在本地站点中路由到此页面很好。另外，“RegisterComponent”在哪里？我需要导入它以将其添加到路径中。
0赞 Harshitha 11/16/2023
@LittleTreeX - 你有没有机会研究这个 SOThread，它解释了如何使用 .NET Core App 发布 angular。

上一个：在 Azure 上使用 IronPdf 对 .NET 6.0 Azure 函数应用进行故障排除

下一个：在 ASP.NET Core MVC 中使用 JWT 进行身份验证时出现问题