Azure 应用服务无法在 React-Redux Web 应用中使用自定义路由 - 需要通配符虚拟目录吗？

Question

我有如下自定义路线：

// @flow

import React, { PureComponent } from 'react';
import { Switch, Redirect } from 'react-router-dom';
import { withRouter } from 'react-router';

import { Route } from 'components/Routes';
import Story from 'pages/Story';
import Page404 from 'pages/404';

class Routes extends PureComponent<{}> {
  render() {
    return (
      <Switch>
        <Route exact path="/" render={props => <Story {...props} />} />
        <Route
          exact
          path="/chapter/:id"
          render={props => <Story {...props} />}
        />
        <Route path="/404" render={props => <Page404 {...props} />} />
        <Redirect to="/404" /* Must be the last one */ />
      </Switch>
    );
  }
}

export default withRouter(Routes);

这在 localhost 中工作正常，如果我访问 localhost:3000/chapter/3，Web 应用程序将成功重定向，不幸的是，如果我访问：mysite.azurewebsites.net/chapter/3，则在运行在 azure 应用程序服务上的实时构建中，我得到了一个错误：

您要查找的资源已被删除、更名或暂时不可用。

我正在运行基于 Windows 的应用服务计划。我确定有一些选项可以设置重定向，即 /chapter/* -> /www_siteroot/ 但我一直无法弄清楚如何去做。

我通过转到应用程序服务设置并在“虚拟应用程序和目录”下添加 /chapter/1、/chapter/2 等并将它们定向到 site\wwwroot 来解决该问题。

我更喜欢像 /chapter/* 这样的通配符选项，但它似乎不起作用，并且出现错误。

Answer 1

如果将存储库连接到 Azure Web 应用程序，则可以将此web.config文件放在/publiccreate-react-app 项目的文件夹中。

<?xml version="1.0"?>
<configuration>
    <system.webServer>

        <directoryBrowse enabled="false"/>

        <urlCompression doDynamicCompression="true" doStaticCompression="true"/>

        <!-- <staticContent>
            <clientCache cacheControlMaxAge="120.00:00:00" cacheControlMode="UseMaxAge"/>
        </staticContent> -->
        <caching enabled="true" enableKernelCache="true">
            <profiles>
                <add extension=".css" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
                <add extension=".js" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
                <add extension=".svg" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
                <add extension=".png" policy="CacheUntilChange" kernelCachePolicy="CacheUntilChange"/>
            </profiles>
        </caching>

        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/index.html" />
                </rule>
            </rules>
        </rewrite>

    </system.webServer>
</configuration>

Answer 2

由于您使用的是基于 Windows 的应用服务计划，因此您的 Azure Web 应用程序在启用了 URL 重写模块的 IIS 下运行。因此，您可以创建一个简单的URL Rewrite规则，将来自https://mysite.azurewebsites.net/chapter/*站点根目录的所有请求定向到您的站点根目录，在这种情况下，客户端将收到您的React/Redux应用程序，并且您的React应用程序将负责所有后续逻辑和内容呈现等。

创建此规则的步骤如下URL Rewrite：

1. 在 Azure 门户中，创建FTP 部署凭据。
2. 在您的计算机本地创建一个Web.config包含以下内容的文件：

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="Chapter-Redirect" stopProcessing="true">
                    <match url="chapter/*" />
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

3. 打开 FTP 客户端（Filezilla 是一个不错的客户端）并登录到您的站点并上传文件Web.config。
4. 通过访问进行测试：https://mysite.azurewebsites.net/chapter/*

以下是有关IIS URL 重写的更多信息。