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

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

1. Amazon AWS ->s3 ->создать ведро.

2. добавить политику ведра, так что каждый может получить доступ к приложению react. нажмите создал ведро ->свойства ->разрешения. В этом щелчке изменить политику ведра. Вот пример политики ведра.

   {
       "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>/*"
           }
       ]
   }
   

3. если вы хотите журналы, создайте другое ведро и установите имя ведра под журналы на свойства.

4. вам нужно иметь .HTML-код(который является отправной точкой своего приложения) и ошибка.HTML-код и все публичные активы (browserified reactJS app и другие CSS, JS, img файлы) в папке.

5. убедитесь, что у вас есть относительные ссылка на все эти общественные файлы .HTML-код.

6. Теперь перейдите в раздел свойства ->статический хостинг сайтов. Включить хостинг. Добавить .HTML-код и ошибка.HTML-код полей соответственно. При сохранении, вы получите точка.

7. наконец,react-redux приложение развернуто. Все ваши маршруты react будут работать правильно. Но когда ты ... --10-->перезагрузка S3 перенаправит на этот конкретный маршрут. Поскольку такие маршруты еще не определены, он отображает ошибка.HTML-код

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

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

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

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

10. приведенный выше код удалит префикс и подтолкнет историю к правильному маршруту (история браузера HTML 5). Например: что-то вроде это http://s3.хостинг/#!/событие изменится на http://s3.хостинг/событие. Это делает react-маршрутизатор чтобы понять и изменить маршрут соответственно. Вот мой 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);
       }
     });
    

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