在 Azure 中使用路由托管 Angular2 应用

Posted 2023-02-22

【中文标题】在 Azure 中使用路由托管 Angular2 应用

【英文标题】：Host Angular2 app with routing in Azure

【发布时间】：2017-08-04 19:08:37

【问题描述】：

我正在使用 Angular cli 在 Angular 2 中开发一个应用程序。该应用程序运行良好，当我在 Azure 中部署它时运行正常，但路由不起作用。我可以通过“myapp.azurewebsites.net”访问我的应用程序，但如果我尝试“myapp.azurewebsites.net/settings”，我会收到 404 错误。我找到了很多指南，其中有很多不同的方法可以让不同的服务器将所有内容路由到一个索引文件，但根本没有一个有效。就像提供web.config file，配置node 或express 服务器，并且两者同时进行。

所以，我的问题由两部分组成。1。 Azure 中哪种 Web 应用模板最适合托管 Angular2 应用程序？ 它只是一个用 Angular2 编写的单页应用程序。不是包装在 ASP.NET MVC 应用程序中的那种。

2。如何配置该 Web 应用程序以使用我在 Angular 中配置的路由

【问题讨论】：

Windows Azure 网站运行 IIS。您可以使用 web.config 中的重写模块将所有未知 url 移动到 index.html 或 / ***.com/questions/12614072/…

是的，我尝试添加一个看起来完全一样的 web.config，但它似乎没有做任何事情。我在我的问题中链接到了一个类似的解决方案。

【参考方案1】：

Azure 中哪种 Web 应用模板最适合托管 Angular2 应用程序？

我们一直在 Azure 上的标准 Azure“Web 应用”模板中托管我们的 ng2 站点，因为它只是一个可用于提供静态资源的基本 IIS 站点模板。 （没有使用节点或快速解决方案。）根据您的解释，这应该足够了。

如何配置该 Web 应用以使用我在 Angular 中配置的路由？

作为部署的一部分，此 Web.Config 与其余构建工件通过 FTP 传输到站点的根目录（/site/wwwroot -- index.html 所在的位置）：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url="^(?!.*(.bundle.js|.bundle.map|.bundle.js.gz|.bundle.css|.bundle.css.gz|.png|.jpg|.ico)).*$" />
          <conditions logicalGrouping="MatchAll">
          </conditions>
          <action type="Rewrite" url="/"  appendQueryString="true" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这基本上使用正则表达式将所有请求路由回 index.html（或根，如果您愿意），除了我正在使用的静态资源（.js、.css、.png 等）

我的original answer 也有同样的注意事项。

更新：长网址/OAuth

在将建议的更改应用于 web.config 时，Kristoffer（OP）遇到了此 OAuth 解决方案的问题，其中 OAuth 返回查询字符串长度超过了 Azure 的默认允许长度，并且仍然返回以下 400 错误：

此请求的查询字符串长度超过配置的 maxQueryStringLength 值。

Kristoffer 能够使用this *** answer 中提供的解决方案通过将<requestLimits maxQueryString="32768"/> 和<httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/> 添加到web.config 来增加请求限制。他更新的 web.config 可以在 Gist "Configuration file for Azure web app to support angular2 applications with routing and long urls for auth tokens." 中找到，并在下面提供以确保完整性。

<?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)).*$" />
                    <conditions logicalGrouping="MatchAll"></conditions>
                    <action type="Rewrite" url="/" appendQueryString="true" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

【讨论】：

必须为服务器配置 requestLimits 和 httpRuntime 元素以处理更长的 url。我编辑了您的答案以包含此内容。它终于起作用了！谢谢:)

@KristofferBerge 可以！您能否仅将您为 requestLimit 和 httpRuntime 添加的相关行粘贴到评论中，我会将它们添加到答案中。

我在这里为配置文件创建了一个要点：gist.github.com/KristofferBerge/… 在这个答案中找到了解决方案：***.com/a/11636484/5119447

@KristofferBerge 答案已根据您的发现进行了更新。祝你的应用好运！

如果你在 webpack 中使用 angular，你还想将 .chunk.js 添加到你的重写正则表达式中。否则无法加载生成的块文件;)