Angular 2 应用程序部署到 Azure 时出现错误 404

Posted 2023-03-15

【中文标题】Angular 2 应用程序部署到 Azure 时出现错误 404

【英文标题】：Error 404 on Angular 2 app when deployed to Azure

【发布时间】：2017-11-29 18:18:19

【问题描述】：

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

我已将我的应用程序部署到 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，但这对我也不起作用。

我真的很想在理解和解决问题方面得到一些帮助，欢迎任何建议！

【参考方案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 托管您的应用程序，并且您可能有一个类似于 this link 中的内容的 web.config 文件。

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

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

所以，在你把它添加到 web.config 之后，

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

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

【讨论】：

感谢您的回答！我怀疑这是根本原因。我的 web.config 看起来像你的（两个突出显示的部分）。我的根文件夹在 Azure 中配置为“site\wwwroot\dist”。在我的根文件夹中，我打开了一个名为“public”的文件夹，并将所有文件复制到该位置。我还确保在构建 Angular 时将此文件夹部署到“dist”文件夹。但是，当我尝试以与您类似的方式访问我的网站时，我收到了错误消息（“您要查找的资源已被删除、名称已更改或暂时不可用。”）。

我已经尝试过soundofsilence.azurewebsites.net/Images.json 和soundofsilence.azurewebsites.net/public/Images.json。我认为这可能与定义的应用程序根有关，您怎么看？

你是如何设置静态目录/assets/images的？你应该为/public做同样的事情。

我没有设置任何东西以任何方式定义该文件夹。我所做的唯一事情就是将该文件夹部署到 dist 文件夹中，这在我构建 angular 时完成并且需要要明确配置。我也将公用文件夹部署到我的 dist 文件夹中。

隔离问题的有趣之处：我将其中一个 png 文件复制到 json 所在的同一文件夹中，我可以（在浏览器中）导航到 png url 并访问它（图像显示在屏幕上），但是当我访问 json 时出现错误。这意味着问题不在于文件夹不是公开的，而是特定于 json 文件的 json

【参考方案2】：

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

我部署了使用 Angular cli 开发的应用程序并使用相同的方式构建。我将 /dist 文件夹中的所有文件复制到 azure 并添加了一个 web.config（这是很多尝试和尝试）但我了解到重写规则需要 for angular，它可以处理 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.

-->

【讨论】：

谢谢！它会试试这个。 .json 文件也有问题吗？我注意到你也没有它的 mime 地图

不，我没有遇到任何问题，因为我没有要提供的 json 文件。但是，如果您只是在上述文件中添加 和 。

并且由于您有不同的文件夹服务文件，我猜您可能需要在规则中设置正确的重写路径，例如url="/dist" 等

@Belgi - 你尝试过吗

我已经添加了 json mime 类型和删除的部分，我还按照您的建议将 url 编辑为 /dist，但不幸的是仍然存在相同的错误

【参考方案3】：

下面的建议效果很好。

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

添加 web.config 有效

感谢您提供出色的解决方案。