Azure App 服务无法与 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 的应用服务计划.我确定有一些选项可以设置重定向，即/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 等并将它们定向到 sitewwwroot 来解决此问题.

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

我更喜欢使用/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 Web 应用在启用了 URL 重写模块的 IIS 下运行.因此，您可以创建一个简单的 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 重写 规则的步骤:

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/*

这里有更多信息 IIS URL 重写.

这篇关于Azure App 服务无法与 React-Redux Web 应用程序中的自定义路由一起使用 - 需要通配符虚拟目录吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！