Amazon web services 在AWS S3中部署react redux应用程序

我在stack overflow中遇到过很多类似的问题，就像这样。每个人都有部署react应用程序的不同视角

但这个问题适用于那些使用redux、react-router和react-router-redux的用户。我花了很多时间才找到合适的方法来托管单页应用程序。我在这里汇总所有步骤

我已经写了下面的答案，其中包含将react redux应用程序部署到S3的步骤

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

亚马逊AWS->s3->创建bucket

添加bucket策略，以便每个人都可以访问react应用程序。单击创建的bucket->属性->权限。在该对话框中，单击编辑存储桶策略。下面是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>/*"
        }
    ]
}

上述代码将删除前缀，并将历史记录推送到正确的路径（HTML 5浏览器历史记录）。例如：像这样的将变为。这样做会使对路由器做出反应，从而理解并相应地更改路由。以下是我的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文件）将满足所需的需求。因为我发现很难收集所有的东西，所以我将所有这些都汇总为步骤。

您可以通过将第8个配置编辑为来忽略第9个步骤

 <ReplaceKeyPrefixWith>/</ReplaceKeyPrefixWith>

/

---

如果有人无意中发现了这篇文章，并且由于历史中存在无限循环，解决方案无法工作，请使用react router中的browserHistory；对我来说，解决方案是为history.replace（path）调用添加一个小的超时。看起来是这样的：

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

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

---

这对我不起作用，导致无限重定向（例如：hostname.com/////path/to/thing您是否可以获得有关browserHistory的帮助。React 4/Router 4.1版库的侦听部分？您好，我只是按照这些步骤进行了操作，其他所有操作都正常，只是现在重新加载页面时，#！前缀没有替换为/，页面开始在行历史中执行。replace（）调用。您是否能够提供发生这种情况的原因？我正在使用历史库中的createBrowserHistory函数，因为recat router 4不再具有browserHistory函数。实际上，通过从重定向规则中的ReplaceKeyPrefixWith标记中删除#！之后的/part，可以实现这一点。是否会对答案进行投票没有其他人能这么好地指出这个问题。@Lakshmindiwaakar实际上又在努力解决这个问题，散列的路由不太管用。你能帮我解决这个问题吗？如果我按照你的指示，并删除/from#！/brake，history.replace函数将被无限调用。我刚刚经历了这么多现在是2020年，S3允许自定义索引和错误解析为index.html，而无需路由规则（步骤8）和React 16.12+和React Router 5.x。剩下的一个问题是，请求的文档会收到404或其他4xx，即使应用程序在其他情况下工作正常。如果您设置了CloudFront，并且您的CloudFront域上只有React SPA，您可以设置错误页面，以使用200 HTTP响应代码进行响应。

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