Служба приложения Azure не работает с настраиваемой маршрутизацией в веб-приложении React-Redux. Вам нужны виртуальные каталоги с подстановочными знаками?

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, если я посещаю localhost: 3000 / chapter / 3, веб-приложение перенаправляет успешно, к сожалению, в живых сборках, работающих на службах приложения Azure.если я захожу: mysite.azurewebsites.net/chapter/3 Мне выдается сообщение об ошибке:

Требуемый ресурс удален, изменилось его имя или временно недоступен.

У меня работает план обслуживания приложений на базе Windows.Я уверен, что есть какая-то опция для настройки перенаправления, например / chapter / * -> / www_siteroot /, но я не смог выяснить, как это сделать.

Я исправил проблему, перейдя внастройки службы приложений и добавление / chapter / 1, / chapter / 2 и т. д. и т. д. в «Виртуальные приложения и каталоги» и направление их на сайт \ wwwroot.

Я бы предпочел использовать подстановочный знак, например/ chapter / * но, похоже, это не работает, и я получаю сообщение об ошибке.

Answer 1

Поскольку вы работаете в плане обслуживания приложений на базе Windows, ваше веб-приложение Azure работает под управлением IIS с включенным модулем перезаписи URL.Таким образом, вы можете создать простое правило 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>

Откройте FTP-клиент (Filezilla - хороший) и войдите на свой сайт и загрузите файл Web.config. Проверьте, посетив: https://mysite.azurewebsites.net/chapter/*

Вотдополнительная информация о IIS URL Rewrite .