将 ASP.NET Boilerplate Core 和 Angular 部署到 Microsoft Azure

Posted 2023-03-06

【中文标题】将 ASP.NET Boilerplate Core 和 Angular 部署到 Microsoft Azure

【英文标题】：Deploy ASP.NET Boilerplate Core & Angular to Microsoft Azure

【发布时间】：2018-05-07 14:03:54

【问题描述】：

我想将 ASP.NET Boilerplate Core & Angular 部署到 Microsoft Azure。当前版本的 ASP.NET Boilerplate 包含两种解决方案（一种用于后端，一种用于前端），因此我需要将其部署到两个不同的 AppServices 和一个 SQL 数据库。 这是我尝试过的：

发布后端应用程序：

创建 Web 应用 + SQL 应用服务。

将 Web.Host/appsettings.production.json 配置如下：

"App": 
    "ServerRootAddress": "https://myapp-backend.azurewebsites.net/",
    "ClientRootAddress": "https://myapp.azurewebsites.net/",
    "CorsOrigins": "https://myapp.azurewebsites.net/"

使用 Visual Studio 将应用程序发布到 Azure

浏览到https://myapp-backend.azurewebsites.net/ 时，我可以看到 API 的声明

发布 Angular

为 Angular 客户端创建一个新的简单 Web 应用。 运行 ng build -prod

复制 web.config。它看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <clear />
        <!-- ignore static files -->
        <rule name="AngularJS Conditions" stopProcessing="true">
          <match url="(app/.*|css/.*|fonts/.*|images/.*|js/.*|node_modules/.*)" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
          <action type="None" />
        </rule>    
        <!-- check if its root url and navigate to default page -->
        <rule name="Index Request" enabled="true" stopProcessing="true">
          <match url="^$" />
          <action type="Redirect" url="/home" logRewrittenUrl="true" />
        </rule>    
        <!--remaining all other url's point to index.html file -->
        <rule name="AngularJS Wildcard" enabled="true">
          <match url="(.*)" />
          <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
          <action type="Rewrite" url="/app" />
        </rule>    
      </rules>
    </rewrite>
  </system.webServer>
</configuration>`

这是json 配置：

如下配置angular/dist/assets/appconfig.json：

  
  "remoteServiceBaseUrl": "https://myapp-backend.azurewebsites.net",  
  "appBaseUrl": "https://myapp.azurewebsites.net"  

通过 FTP 将 dist 到 wwww 文件夹的发布文件发送到 Azure

浏览到https://myapp.azurewebsites.net/ 时，我在控制台应用程序中看到一个错误提示：“Unexpected token

如果我输入 enter link description here 我会收到以下错误消息：

您要查找的资源已被删除，有它的名字 已更改，或暂时不可用。

我认为它可能与 Web.config 以及在 Angular 应用程序中设置路由的方式有关，但此刻我迷路了。你能帮忙吗？

【问题讨论】：

你见过Step by step publish to Azure Angular吗？

谢谢，是的，我已经尝试过了，但我无法让它工作。我还使用了 Angular 目录中的 Web.config。

【参考方案1】：

官方文档链接改为Deployment Angular - Publish Azure。

但还有另一种有趣的方式将 www/dist 文件夹发布到 静态站点 并作为 存储帐户。不用担心 asp.net we.configs 和阻塞的 json 文件。

Step by step guide publish to azure static web site(storage account)

为什么使用 Azure 存储

AngularUI 是一个静态网站，因此可以部署在 Azure 中 存储，它提供了专门为静态设计的功能 网站。例如自定义域和 SSL。还;使用 Azure 存储 比在 Azure 上部署应用服务便宜得多。