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:3000/chapter/3 web 應用程序重定向成功，不幸的是在運行在 azure 應用程序服務上的實時構建如果我訪問：mysite.azurewebsites.net/chapter/3 我得到一個錯誤:

您要查找的資源已被刪除、更名或暫時不可用。

我正在運行基於 Windows 的應用服務計划。 我確定有一些選項可以設置重定向，即 /chapter/* -> /www_siteroot/ 但我一直無法弄清楚如何去做。

我通過轉到應用程序服務設置並在“虛擬應用程序和目錄”下添加 /chapter/1、/chapter/2 等並將它們定向到 site\wwwroot 來解決此問題。

我更喜歡有一個像 /chapter/* 這樣的通配符選項，但它似乎不起作用，而且我收到一個錯誤。

Answer 1

如果將存儲庫連接到 Azure Web 應用程序，則可以將此web.config文件放在 create-react-app 項目的/public文件夾中。

<?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/* : https://mysite.azurewebsites.net/chapter/*

這里有更多關於IIS URL Rewrite 的信息。

Answer 3

對於那些使用Linux運行 App Service 的解決方案是創建配置文件.htaccess而不是 web.config。 使用以下內容將此文件創建到公共文件夾的根目錄：

RewriteEngine On
RewriteRule "^[^\.]+$" "index.html"