Развертывание приложения response-redux в AWS S3

Ответ 1

Существует видео для развертывания приложения-реакции на s3. Это будет просто для развертывания приложения как такового на s3, но нам нужно внести некоторые изменения в наше приложение-ответ. Поскольку это трудно выполнить, я подытоживаю шаги. Вот оно:

• Amazon AWS → s3 → создать ведро.

• Добавьте политику ведра, чтобы каждый мог получить доступ к соответствующему приложению. нажмите созданный ковш → свойства → разрешения. В этом случае нажмите Изменить политику ведра. Ниже приведен пример политики ведра.

  {
      "Version": "2012-10-17",
      "Statement": [
          {
              "Sid": "Allow Public Access to All Objects",
              "Effect": "Allow",
              "Principal": "*",
              "Action": "s3:GetObject",
              "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*"
          }
      ]
  }
  

• Если вам нужны журналы, создайте еще одно ведро и задайте имя ведра в разделе журналы в свойствах.

• У вас должен быть index.html (который является отправной точкой для вашего приложения) и error.html, а также все общедоступные активы (браузерный actionJS приложение и другие файлы CSS, JS, img) в папке.

• Убедитесь, что у вас относительная ссылка на все эти общедоступные файлы в index.html.

• Теперь перейдите в свойства → статический хостинг веб-сайтов. Включите опцию веб-хостинг. Добавьте index.html и error.html в соответствующие поля. При сохранении вы получите Конечная точка.

• Наконец, ваше приложение реакция-редукция развернуто. Все ваши реагирующие маршруты будут работать правильно. Но когда вы перезагрузите, S3 перенаправит этот конкретный маршрут. Поскольку такие маршруты уже не определены, он отображает error.html

• Нам нужно добавить правила переадресации в статическом веб-хостинге. Таким образом, когда возникает 404, S3 необходимо перенаправить на index.html, но это можно сделать, только добавив некоторый префикс, например #!. Теперь, когда вы перезагружаете страницу любым маршрутом реагирования, вместо перехода на error.html, тот же url будет загружен, но с префиксом #!. Нажмите Изменить правила перенаправления и добавьте следующий код:

  <RoutingRules>
      <RoutingRule>
          <Condition>
              <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
          </Condition>
          <Redirect>
              <HostName> [YOUR_ENDPOINT] </HostName>      
              <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
          </Redirect>
      </RoutingRule>
  </RoutingRules>
  

• В ответ нам нужно удалить этот префикс и направить маршрут к исходному маршруту. Вот изменения, которые вам нужно сделать в приложении для реагирования. У меня есть файл main.js, который является отправной точкой для приложения-приложения. Добавьте прослушиватель в browserHistory следующим образом:

  browserHistory.listen(location => {
    const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
    if (path) {
        history.replace(path);
     }
   });
  

• Вышеприведенный код удалит префикс и перенесет историю на правильный маршрут (история браузера HTML 5). Например: что-то вроде этого http://s3.hosting/#!/event изменится на http://s3.hosting/event. Это позволяет реагировать маршрутизатору понимать и изменять маршрут соответствующим образом. Вот мой файл main.js для лучшего понимания:

  import React from 'react';
  import ReactDOM from 'react-dom';
  import {createStore, compose, applyMiddleware} from 'redux';
  import {Provider} from 'react-redux'
  import {Router, Route, IndexRoute, browserHistory, useRouterHistory} from 'react-router';
  import {syncHistoryWithStore} from 'react-router-redux';
  import createLogger from 'redux-logger';
  import thunk from 'redux-thunk';
  
  
  const logger = createLogger();
  const createStoreWithMiddleware = applyMiddleware(thunk, logger)(createStore);
  const store = createStoreWithMiddleware(reducers);
  const history = syncHistoryWithStore(browserHistory, store);
  
  
  browserHistory.listen(location => {
    const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
    if (path) {
        history.replace(path);
     }
   });
  

Таким образом, загрузка загруженного браузера или приложения для веб-приложений (файл app.js) сделает необходимую потребность. Поскольку мне было сложно собрать все материалы, я собрал все это как шаги.

Ответ 2

Если есть кто-то, кто сталкивается с этим постом, и решение не работает из-за бесконечного цикла в функции history.listen; Для меня решением было добавить небольшой тайм-аут для вызова history.replace(path). Так это выглядит так:

    history.listen(location => {
      const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
        if (path) {
          setTimeout(() => {
            history.replace(path);
          }, 100);
        }
      });

Ответ 3

Вы можете проигнорировать 9-й шаг, отредактировав 8-ю конфигурацию как

 <ReplaceKeyPrefixWith>/</ReplaceKeyPrefixWith>

и использовать browserHistory в маршрутизаторе реакции