Azure应用服务无法与React-Redux Web应用中的自定义路由一起使用-需要通配符虚拟目录吗? [英] Azure App service not working with custom routing in React-Redux web app - need wildcard virtual directories?

问题描述

我有如下自定义路线:

// @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应用程序服务的实时构建中出现错误:

This works fine in localhost, if I visit localhost:3000/chapter/3 the web app redirects successfully, unfortunately in live builds running on azure app services if I visit: mysite.azurewebsites.net/chapter/3 I'm given an error:

您要查找的资源已被删除，并具有其名称 更改，或暂时不可用.

The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.

我正在运行基于Windows的App Service计划.我确定有一些设置重定向的选项，即/chapter/*->/www_siteroot/，但我还无法弄清楚该怎么做.

I'm running a Windows based App Service plan. I'm sure there's some option to set up redirecting, i.e. /chapter/* -> /www_siteroot/ but I haven't been able to figure out how to do it.

我通过转到应用程序服务设置并在虚拟应用程序和目录"下添加/chapter/1，/chapter/2等，并将其定向到site \ wwwroot，解决了该问题.

I fixed the issue by going to the app service settings and adding /chapter/1, /chapter/2, etc, etc under 'Virtual applications and directories' and directing them to site\wwwroot.

我希望使用/chapter/*这样的通配符选项，但它似乎无法正常工作，并且出现错误.

I'd prefer to have a wildcard option like /chapter/* but it doesn't seem to work and I get an error.

推荐答案

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

Since you're on Windows based App Service Plan, your Azure webapp is running under IIS with URL Rewriting module enabled. As such, you can create a simple URL Rewrite rule that directs all requests coming from https://mysite.azurewebsites.net/chapter/* to your site root in which case the client will receive your React/Redux application, and your React application would take care of all subsequent logic and rendering of content etc..

以下是创建此URL Rewrite规则的步骤:

Here are the steps to create this URL Rewrite rule:

1. 在Azure门户中，创建 FTP部署凭据.
2. 在计算机的本地上，创建具有以下内容的Web.config文件:

1. In Azure Portal, create FTP deployment credentials.
2. Locally on your computer, create a Web.config file with following content:

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

1. 打开FTP客户端(Filezilla是一个很好的客户端)，然后登录到您的站点并上传Web.config文件.
2. 访问以下网站进行测试:https://mysite.azurewebsites.net/chapter/*

1. Open up FTP client (Filezilla is a good one) and login to your site and upload the Web.config file.
2. Test by visiting: https://mysite.azurewebsites.net/chapter/*

有关 查看全文