问题描述
我有如下自定义路线:
// @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:
- 在 Azure 门户中,创建 FTP 部署凭据.
- 在您的计算机上本地创建一个
Web.config
文件,其中包含以下内容:
- In Azure Portal, create FTP deployment credentials.
- 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>
- 打开 FTP 客户端(Filezilla 是一个不错的客户端)并登录到您的站点并上传
Web.config
文件. - 访问测试:
https://mysite.azurewebsites.net/chapter/*
这里有更多信息 IIS URL 重写.
这篇关于Azure App 服务无法与 React-Redux Web 应用程序中的自定义路由一起使用 - 需要通配符虚拟目录吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!