Приложение ReactJS, отображающее маршрут, не найденный после развертывания

Question

Мне поручено развернуть приложение ReactJS в корзине AWS S3. Это приложение ReactJS будет вызывать конечные точки API, расположенные на стеке терминатора обратного прокси-сервера Apache. Я настроил развертывание так, чтобы теперь оно могло отображать пустую / белую страницу макета с логотипом приложения, а затем Route not found там, где должны быть компоненты или контент.

Ведро S3 в настоящее время настроено как частное с конечной точкой VPC, маршрутизирующей трафик между ним и веб-сервером Apache. Я избежал проблем с CORS, используя один и тот же домен происхождения для пользовательского интерфейса и конечных точек API.

Когда я использую статический URL-адрес конфигурации веб-сайта S3, меняю ACL с Private на PublicRead и удаляю конечную точку VPC, решение ReactJS успешно загружает компонент по умолчанию.

До этого мне удалось развернуть статический веб-сайт, который использует библиотеку Javascript и успешно выполняет вызовы API за стеком терминатора обратного прокси-сервера Apache.

Это мой код App.js ниже:

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Layout from './components/core/Layout';
import BS from './assets/global-styles/bootstrap.min.module.css';
import './index.module.css';
import Homepage from './pages/Homepage';
import GraphView from './pages/GraphView';
function App() {
  return (
    <Layout>
      <Router>
        <Switch>
          <Route exact path="/" component={Homepage} />
          <Route exact path="/views/:id" component={GraphView} />
          <Route path="*" render={() => <span>Route not found</span>} />
        </Switch>
      </Router>
    </Layout>
  );
}

export default App;

Вот моя конфигурация Apache ниже:

ProxyRequests Off
SSLProxyEngine on
SSLProxyVerify none
SSLProxyCheckPeerCN off
SSLProxyCheckPeerName off
SSLProxyMachineCertificateFile /paht/to/the/private/client_crt_rsa.pem

<Proxy *>
    Require all granted
</Proxy>

ProxyPass / ${API_URL} retry=\${CLOUD_HTTPS_PROXY_RETRY} keepalive=\${CLOUD_HTTPS_PROXY_KEEPALIVE} nocanon
ProxyPassReverse / ${API_URL}

<Location /visualizer/ >
  ProxyPreserveHost Off
  ProxyPass ${S3_URL} retry=\${CLOUD_HTTPS_PROXY_RETRY} keepalive=\${CLOUD_HTTPS_PROXY_KEEPALIVE} nocanon
  ProxyPassReverse ${S3_URL}
</Location>

<Location /visualise/ >
  ProxyPreserveHost Off
  ProxyPass ${S3_REACT_URL} retry=\${CLOUD_HTTPS_PROXY_RETRY} keepalive=\${CLOUD_HTTPS_PROXY_KEEPALIVE} nocanon
  ProxyPassReverse ${S3_REACT_URL}
</Location>

<Location /static/js/ >
  ProxyPreserveHost Off
  ProxyPass ${S3_REACT_JS_URL} retry=\${CLOUD_HTTPS_PROXY_RETRY} keepalive=\${CLOUD_HTTPS_PROXY_KEEPALIVE} nocanon
  ProxyPassReverse ${S3_REACT_JS_URL}
</Location>

<Location /static/css/ >
  ProxyPreserveHost Off
  ProxyPass ${S3_REACT_CSS_URL} retry=\${CLOUD_HTTPS_PROXY_RETRY} keepalive=\${CLOUD_HTTPS_PROXY_KEEPALIVE} nocanon
  ProxyPassReverse ${S3_REACT_CSS_URL}
</Location>

<Location /static/media/ >
  ProxyPreserveHost Off
  ProxyPass ${S3_REACT_MEDIA_URL} retry=\${CLOUD_HTTPS_PROXY_RETRY} keepalive=\${CLOUD_HTTPS_PROXY_KEEPALIVE} nocanon
  ProxyPassReverse ${S3_REACT_MEDIA_URL}
</Location>

Мне нужно, чтобы приложение ReactJS было успешно развернуто и запущено. Я решил создать сопоставление Apache для каждой папки статических активов, поскольку использование только одного сопоставления с директивой Location или LocationMatch сопоставлениями Regex, которые будут соответствовать корню приложения и всем другим местоположениям активов, похоже, не работает. Что я здесь не так делаю, пожалуйста? Это стоило мне пару дней времени.