react-router在 aws s3 存储桶中不起作用

IT技术 javascript reactjs amazon-web-services amazon-s3
2021-02-10 23:36:09

我将我的 React 网站build/文件夹部署到 AWS S3 存储桶中。

如果我转到www.mywebsite.com，它会起作用，如果我单击a标记转到“项目”和“关于”页面，它会将我带到正确的页面。但是，如果我复制并发送页面 url 或直接转到以下链接：www.mywebsite.com/projects，它会返回 404。

这是我的App.js代码：

const App = () => (
    <Router>
        <div>
            <NavBar/>
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/projects" component={Projects}/>
                <Route exact path="/about" component={About}/>
                <Route component={NoMatch}/>
            </Switch>
        </div>
    </Router>
);
6个回答

我不确定你是否已经解决了它。我遇到过同样的问题。

这是因为 AWS S3 正在寻找要从中提供服务的文件夹（项目），而您没有。

只需将错误文档指向index.html.

在此处输入图片说明

这对我有用。您可以在 react-router 中处理错误页面。

@sumanthshetty 检查我对“Amr Abu Greedah”答案的评论！祝你今天过得愉快
2021-03-16 23:36:09
小东西。当我点击一个路径时，在控制台中显示 404 not found - 因为我们正在将它重定向到错误页面。我不相信。可能有更好的方法。
2021-03-17 23:36:09
尽管此解决方案有效，但它会影响 SEO。谷歌将你的网站排名比其他不会抛出那么多 404 的网站差。我经过惨痛的教训才学到这个。
2021-03-18 23:36:09
@LuisGouveia 那你是怎么进行的？你做了什么？
2021-03-28 23:36:09
是的。这显然是一个黑客。对于正确的解决方案，您可能需要添加 S3 重定向规则。另外，尝试使用 react-router 中的 HashRouter（而不是 BrowserRouter）。这可能有效
2021-04-13 23:36:09

2020 年 5 月 1 日更新：

由于这个帖子很活跃，我需要更新答案：

所以你有几个选项来解决这个问题：

  1. 您可以将index.html放在错误文档框中（就像 Alan Friedman 建议的那样）。
    • 转到您的存储桶（实际拥有代码的存储桶 - 而不是您用来重定向的存储桶）->属性->静态网站托管：
    • 这不是“hacky”，但它的工作方式是react-router 有效的：它处理来自前端的请求并将用户路由到其他路由，但总的来说，React 应用程序是一个单页面应用程序。
    • 如果您想要服务器端 React，请考虑使用Next.js。

在此处输入图片说明

  1. 您可以将指定的错误文件error.html放入您的 React 应用程序的公共文件夹和静态网站托管：错误文档框中，放入：error.html。这也有效。我已经测试过了。

  2. 使用AWS CloudFront > CloudFront Distributions > The distribution of your bucket > Error Pages并添加您想要的错误代码。如果您不使用react-router（如下例所示），存储桶将响应错误 403，因此您可以使用您的error.html进行响应。

在此处输入图片说明

  1. 对于TypeScript，目前react-router不支持它，因此您应该考虑选项 2 和 3。他们将6.*根据此线程在未来版本中更新库。
此解决方案会影响 SEO。谷歌不会对抛出 404 的网站进行排名。
2021-03-23 23:36:09
请注意这种情况的一个后果......如果您的网页包含src="/static/somescript.js"somescript.js 实际上不存在的地方，或者拒绝访问请求的脚本，那么浏览器的请求将产生 index.html 文件的内容，而不是比 JS 文件，它将被浏览器解析为 JavaScript，并导致“<!doctype html> ...”的 JavaScript 解析错误，对于 CSS 文件或其他资产也是如此。
2021-03-24 23:36:09
你如何为错误页面添加自定义标题？stackoverflow.com/questions/69183284/...
2021-03-25 23:36:09
这非常hacky，但也是我使用的解决方案。我不喜欢它的是 404 仍然发生，它只是被重定向。
2021-03-28 23:36:09

如果此 S3 存储桶由CloudFront 分配提供：

在 CloudFront 分配中创建一个自定义错误页面 (AWS Docs)，将 404 错误路由到 index.html 并返回 200 响应代码。这样您的应用程序将处理路由。

自定义错误页面

在此处输入图片说明

是的，我也必须添加 403
2021-03-21 23:36:09
这不会有将合法 404 路由到 index.html（包括图像等）的不良行为吗？有时你确实想要一个真正的 404。
2021-03-31 23:36:09
好吧，除了在这种情况下您的应用程序是客户端，而不是服务器端。因此，作为“应用程序”，您不能再发出未找到资源的信号。我认为您应该区分将由应用程序处理的路由和文件以及将由 S3 或 cloudfront 处理的路由。
2021-04-03 23:36:09
这就是“您的应用程序将管理路由”背后的想法。每个请求都通过您的 index.html（单页应用程序）并且您的应用程序的路由器返回相关的响应。这意味着您将路由逻辑保留在应用程序本身中，同时避免在 CloudFront 中维护另一个路由逻辑。这只是一个很好的技巧，它使开发人员的生活更轻松 - 路由作为一站式商店，无需了解有关 AWS 的任何信息
2021-04-08 23:36:09
是的，它也适用于我
2021-04-11 23:36:09

将 4xx 重定向到 index.html 是可行的，但该解决方案会使您陷入许多其他问题，例如 google 将无法抓取这些页面。请检查此链接，它通过使用 S3 存储桶的重定向规则解决了此问题。

你的答案令人震惊！它应该是公认的答案，因为公认的答案是次优的，并且对 SEO 有非常不方便的影响（因为谷歌不喜欢返回 404 的网站）。如果有人在 Microsoft 世界中搜索 @Amr Abu Greedah，我建议您查看以下答案：stackoverflow.com/a/50767709/3231884
2021-03-24 23:36:09
万一使用 xml 格式失败，请尝试为重定向规则使用 json 版本。这就是我必须做的事情才能让这个解决方案对我有用
2021-03-30 23:36:09
肯定的，正确的答案。我找这条路太久了。
2021-04-11 23:36:09
解决index.html加载相关css/js文件的问题
2021-04-13 23:36:09

案例使用 Cloudfront 到 S3：

https://hackernoon.com/hosting-static-react-websites-on-aws-s3-cloudfront-with-ssl-924e5c134455

3b) AWS CloudFront — 错误页面 创建 CloudFront 分配后，当其状态为进行中时，进入错误页面选项卡。使用自定义错误响应处理响应代码 404 和 403。

Google 建议缓存 1 周或 604800 秒。我们在这里所做的是设置 CloudFront 来处理丢失的 html 页面，这通常发生在用户输入无效路径时，特别是当他们刷新根路径以外的路径时。

当发生这种情况时：

CloudFront 将查找 S3 存储桶中不存在的文件；存储桶中只有 1 个 html 文件，对于像这个项目示例这样的单页应用程序，它是 index.html 将返回 404 响应，我们的自定义错误响应设置将劫持它。我们将返回 200 响应代码和 index.html 页面。React 路由器将与 index.html 文件一起加载，它将查看 url 并呈现正确的页面而不是根路径。对于对查询路径的所有请求，此页面将在 TTL 期间被缓存。为什么我们还需要处理 403？这是因为 Amazon S3 为不存在的资产返回此响应代码，而不是 404。例如，https ://yourdomain.com/somewhere 的网址 将寻找一个不存在的名为某处（没有扩展名）的文件。

附注。以前是返回404，现在好像是返回403；无论哪种方式，最好都处理两个响应代码）。

这有效！浏览了大量关于此的文章，403 是缺失的链接 - 谢谢
2021-03-16 23:36:09
这对我有用。它与stackoverflow.com/a/52343542/2624935相同，但适用于 cloudfront
2021-03-17 23:36:09
与文章所说的相反，这不仅适用于 html 页面。任何 404，包括图像等，都会重定向 index.html，这非常难看。
2021-04-09 23:36:09
其它你可能感兴趣的问题
上一篇聚焦标签索引中的下一个元素 下一篇react-router 在子组件中获取 this.props.location