在 Azure 中使用路由托管 Angular2 应用程序 [英] Host Angular2 app with routing in Azure

问题描述

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

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

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

解决方案

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

我们一直在标准 AzureWeb 应用程序"模板中在 Azure 上托管我们的 ng2 站点，因为它只是一个基本的 IIS 站点模板，可用于提供静态资源.(未使用节点或快速解决方案.)根据您的解释，这应该足够了.

<块引用>

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

作为部署的一部分，这个 Web.Config 被 FTP 传送到站点的根目录(/site/wwwroot——index.html 所在的位置)和其余的构建工件:

<conditions logicalGrouping="MatchAll"></条件><action type="Rewrite" url="/" appendQueryString="true"/></规则></规则></rewrite></system.webServer></配置>

这基本上使用 RegEx 将所有请求路由回 index.html(或根，如果您愿意)，除了我使用的静态资源(.js、.css、.png 等)

同样的警告适用于我的原始答案.

更新:长网址/OAuth

在对 web.config 应用建议的更改后，Kristoffer(OP)遇到了这个问题OAuth 返回查询字符串长度超过 Azure 的默认允许长度并且仍然返回以下 400 错误的 OAuth 解决方案:

<块引用>

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

Kristoffer 能够使用此 StackOverflow 答案中提供的解决方案通过添加 和 到 web.config.他更新的 web.config 可以在 Gist "配置文件中找到，用于 Azure web 应用程序以支持具有路由和身份验证令牌的长网址."，并在下面提供以确保完整性.

<conditions logicalGrouping="MatchAll"></conditions><action type="Rewrite" url="/" appendQueryString="true"/></规则></规则></rewrite></system.webServer></配置>

I'm developing an app in Angular 2 using the angular cli. The app works fine, and runs ok when I deploy it in Azure, but the routing doesn't work. I can access my app via "myapp.azurewebsites.net", but if I try "myapp.azurewebsites.net/settings" I get an 404 error. I have found a lot of guides with a lot of different ways to make different servers route everything to one index-file, but none have worked, at all. Like providing an web.config file, configuring node or express server, and both at the same time.

So, my question consists of two parts.
1. What kind of web app template in Azure is best suited for hosting an Angular2 application?
It's just a single page application written in Angular2. Not the kind that is wrapped in an ASP.NET MVC application.

2. How do I configure that web app to use the routing I have configured in Angular

解决方案

1. What kind of web app template in Azure is best suited for hosting an Angular2 application?

We've been hosting our ng2 sites on Azure in a standard Azure "Web App" template as it is just a basic IIS site template that can be used to serve static resources. (No node or express solutions used.) From what you explained, this should be sufficient.

2. How do I configure that web app to use the routing I have configured in Angular?

As part of the deployment, this Web.Config is FTP'd to the sites' root directory (/site/wwwroot -- where the index.html is located) with the rest of the build artifacts:

<?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>

This basically uses a RegEx to route all requests back to index.html (or root, if you prefer), except for the static resources that I'm using (.js, .css, .png, etc.)

Same caveats apply from my original answer.

Update: Long URLs/OAuth

Upon applying the suggested changes to the web.config, Kristoffer (The OP) encountered an issue with this OAuth solution where the OAuth return query string length exceeded Azure's default allowed length and was still returning the following 400 error:

The length of the query string for this request exceeds the configured maxQueryStringLength value.

Kristoffer was able to increase the request limit using the solution provided in this StackOverflow answer by adding <requestLimits maxQueryString="32768"/> and <httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/> to the web.config. His updated web.config can be found in the Gist "Configuration file for Azure web app to support angular2 applications with routing and long urls for auth tokens.", and is provided below for completeness.

<?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>

这篇关于在 Azure 中使用路由托管 Angular2 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！