部署到Azure时，Angular 2应用程序上的错误404

Question

我有一个角度2的应用程序与简单的server.js作为node.js BE。

我已经将我的应用程序部署到Azure，我就是应用程序加载并向我显示欢迎页面。

当我到达试图通过HTTP请求读取本地JSON的组件时，我收到404错误（我在本地环境中没有收到）。

读取json的代码如下：

private ReadFromJson(path: string): Observable<string[]> {
    return this._http.get(path)
        .map((response: Response) => <string[]>response.json())
        .do(data => console.log('All: ' + JSON.stringify(data)))
        .catch(this.handleError);
}

传递的实际路径是控制台中显示的路径。

我做了两件事：首先我确保该文件实际上是使用Azure CLI，并且它按预期存在。

其次，在查看了很多帖子后，我发现的唯一其他解决方案是添加MIME类型，如同建议的here，但这对我来说也不起作用。

我真的很想帮助理解并解决问题，欢迎任何建议！

Answer 1

更新：

如果您的应用只是前端（Angular）应用，那么您不再需要通过Node.js提供这些静态文件。因为默认情况下，Azure App Service已在其上安装了IIS，并且IIS可以通过执行某些配置来提供任何文件类型。所以，在这种情况下，你可以保持web.config看起来像下面，并把它放到“site / wwwroot / dist”。

<?xml version="1.0" encoding="UTF-8" ?>
<configuration>
    <system.webServer>
        <staticContent>
            <remove fileExtension=".json" />
            <mimeMap fileExtension=".json" mimeType="application/json" />
        </staticContent>
    </system.webServer>
</configuration>

---

当您在Azure App Service上部署Node.js时，它将使用iisnode托管您的应用程序，并且您可能有一个web.config文件，看起来像this link中的内容。

默认情况下，此配置文件假定/public文件夹中的静态文件。

<!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
<rule name="StaticContent">
    <action type="Rewrite" url="public{REQUEST_URI}" />
</rule>

所以，在将其添加到web.config之后，

<staticContent>
    <remove fileExtension=".json" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
</staticContent>

请确保将静态文件放入/public文件中。

Answer 2

上周我遇到了同样的问题，我想也许我应该分享我的发现，因为我按照需要开始工作。

我部署了使用angular cli开发的应用程序，并使用相同的方法构建。我将/ dist文件夹中的所有文件复制到azure并添加了一个web.config（这是很多命中和试用）但我知道需要一个alter的重写规则，它可以处理webpack捆绑资产而不返回一个404。

这是web，配置，我相信它应该适合你：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.web>
    <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536" />
  </system.web>
  <system.webServer>
    <security>
      <requestFiltering>
        <requestLimits maxQueryString="32768" />
      </requestFiltering>
    </security>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico|.svg|.eot|.woff|\​.woff2)).*$" />
          <conditions logicalGrouping="MatchAll"></conditions>
          <action type="Rewrite" url="/" appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
    <staticContent>
      <remove fileExtension=".svg" />
      <remove fileExtension=".eot" />
      <remove fileExtension=".woff" />
      <remove fileExtension=".woff2" />
      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>
</configuration>
<!--

This is required for the app to work in Azure or an ASP.NET hosting environment because the woff files 
are not treated as static content on Azure as well as the routing breaks without the rewrite rule below 
and app or rather the server returns a 404.

-->

Answer 3

以下建议创造了奇迹。

如果您的应用只是前端（Angular）应用，那么您不再需要通过Node.js提供这些静态文件。因为默认情况下，Azure App Service已在其上安装了IIS，并且IIS可以通过执行某些配置来提供任何文件类型。因此，在这种情况下，您可以将web.config保持为如下所示并将其放入“site / wwwroot / dist”。

添加web.config工作

谢谢你的出色解决方案