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

Я пережил много похожих вопросов в переполнении стека, как этот один. Каждый из них имеет разную перспективу развертывания реагирующего приложения.

Но этот вопрос для тех, кто использует сокращение, реагировать-маршрутизатор и реакция-маршрутизатор-редукция. Мне потребовалось много времени, чтобы выяснить правильные способы размещения приложения с одной страницей. Я собираю все шаги здесь.

Я написал ниже ответ, содержащий шаги по развертыванию приложения response-redux для 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 в маршрутизаторе реакции