angular - 将 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 的 swagger

发布 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/ 时我在控制台应用程序中看到一个错误，指示:“意外 token <”，如下图所示:

如果我输入 enter link description here我收到此错误消息:

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

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

Answer 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 is a static website, therefore it can be deployed in Azurestorage which provides features specifically designed for staticwebsites. such as Custom Domains, and SSL. Also; using Azure Storageis much cheaper than deploying an app Service on Azure.