在AWS S3中部署react-redux应用程序

Question

我已经经历了很多类似的问题在堆栈溢出像这一个。每个应用程序都有不同的部署react应用程序的视角。

Answer 1

有一个将react应用部署到S3的视频教程。这将很容易在s3上部署应用程序，但我们需要在react应用程序中做一些更改。由于它很难遵循，我总结为步骤。是这样的：

>

Amazon AWS->S3->创建桶。

添加bucket策略，这样每个人都可以访问react应用程序。单击created bucket->properties->在其中单击“编辑存储桶策略”。下面是bucket策略的示例。

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

如果需要日志，请创建另一个bucket并在属性中的logs部分下设置bucket名称。

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

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

上面的代码将移除前缀，并将历史记录推送到正确的路由上（HTML 5浏览器历史记录）。例如：类似这样的东西http://s3.hosting/#！/event将更改为http://s3.hosting/event。这样做可以使react-router理解并相应地更改路由。下面是我的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);
   }
 });

因此上传Browserialed或webpacked react应用程序（app.js文件）将满足所需的需求。因为我发现很难收集所有的东西，所以我将所有这些集合为步骤。