我在堆栈溢出中遇到了很多类似的问题，例如one。每个人对部署 react 应用都有不同的看法。
但这个问题是针对那些使用 redux、react-router 和 react-router-redux 的人。我花了很多时间来找出托管单页应用程序的正确方法。我在这里汇总所有步骤。
我已经编写了以下答案，其中包含将 react-redux 应用程序部署到 S3 的步骤。
【问题讨论】：
标签： amazon-web-services reactjs amazon-s3 react-router react-router-redux
如果有人偶然发现这篇文章，并且由于 history.listen 函数中的无限循环而导致解决方案不起作用；对我来说，解决方案是为 history.replace(path) 调用添加一个小超时。所以它看起来像这样：
history.listen(location => {
const path = (/#!(\/.*)$/.exec(location.hash) || [])[1];
if (path) {
setTimeout(() => {
history.replace(path);
}, 100);
}
});
【讨论】：
您可以通过将第 8 步配置编辑为
来忽略第 9 步 <ReplaceKeyPrefixWith>/</ReplaceKeyPrefixWith>
并在 react-router 中使用 browserHistory
【讨论】：
有一个 video 教程用于将 React 应用程序部署到 s3。这将很容易在 s3 上部署应用程序，但我们需要在我们的 react 应用程序中进行一些更改。由于很难遵循，我总结为步骤。就是这样：
添加存储桶策略，让每个人都可以访问 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>/*"
}
]
}
如果您需要日志，请创建另一个存储桶并在 properties 的 logs 部分下设置存储桶名称。
您需要有一个 index.html（这是您的应用程序的起点）和 error.html 以及所有公共资产（浏览的 reactJS app 和其他 CSS、JS、img 文件）在一个文件夹中。
确保您对 index.html 中的所有这些 public 文件具有相对引用。
现在，导航到属性 -> 静态网站托管。启用网站托管选项。将 index.html 和 error.html 分别添加到字段中。保存后，您将收到 Endpoint。
最后，您的 react-redux 应用程序已部署完毕。您所有的反应路线都将正常工作。但是当您重新加载时，S3 将重定向到该特定路由。由于尚未定义此类路由，它会呈现 error.html
我们需要在静态虚拟主机下添加一些重定向规则。因此，当 404 发生时，S3 需要重定向到 index.html，但这只能通过添加一些前缀来完成，例如 #!。现在，当您使用任何 react 路由重新加载页面时，而不是转到 error.html，将加载相同的 url，但带有前缀 #!。点击编辑重定向规则并添加以下代码：
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName> [YOUR_ENDPOINT] </HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
在 react 中，我们需要删除该前缀并将路由推送到原始路由。这是您需要在 react 应用程序中进行的更改。我有我的 main.js 文件，它是 react 应用程序的起点。像这样向 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。这样做会使 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);
}
});
所以上传浏览器化或 webpacked 反应应用程序（app.js 文件）将满足所需的需求。由于我发现很难收集所有的东西，所以我将所有这些都汇总为步骤。
【讨论】：