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

Question

我想将 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 客户端创建一个新的简单 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/时，我在控制台应用程序中看到一条错误，指示：“意外的令牌 < ”，如下图所示：

如果我在此处输入输入链接描述，我会收到此错误消息：

您正在查找的资源已被删除、更名或暂时不可用。

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

Answer 1

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

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

• 分步指南发布到azure静态网站（存储帐户）

为什么使用 Azure 存储

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