托管Angular2应用并在Azure中进行路由

问题描述

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

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.

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

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.如何配置该Web应用程序以使用在Angular中配置的路由

推荐答案

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

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

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.

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

作为部署的一部分，此Web.Config和其余的构建工件一起通过FTP发送到站点的根目录(/site/wwwroot-index.html所在的位置)上.

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>

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

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.)

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

更新:长网址/OAuth

Update: Long URLs/OAuth

在将建议的更改应用于web.config时， Kristoffer (OP)遇到了与此相关的问题OAuth返回查询字符串长度超过Azure的默认允许长度并且仍返回以下400错误的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:

Kristoffer能够使用此StackOverflow答案中提供的解决方案，通过添加<requestLimits maxQueryString="32768"/>和<httpRuntime maxQueryStringLength="32768" maxUrlLength="65536"/>到web.config.可以在要点""，下面为完整起见提供了该网址.

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>

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