问题
I have custom routes like follows:
// @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);
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.
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.
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.
I'd prefer to have a wildcard option like /chapter/* but it doesn't seem to work and I get an error.
回答1:
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..
Here are the steps to create this URL Rewrite
rule:
- 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>
- Open up FTP client (Filezilla is a good one) and login to your site and upload the
Web.config
file. - Test by visiting:
https://mysite.azurewebsites.net/chapter/*
Here's more info on IIS URL Rewrite.
回答2:
If you have your repo connected to the Azure Web App, then you can place this web.config
file in the /public
folder of a create-react-app project.
<?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>
来源:https://stackoverflow.com/questions/50753669/azure-app-service-not-working-with-custom-routing-in-react-redux-web-app-need