Javascript React 单页应用程序 + Amazon S3：永久链接问题

Question

我使用 S3 存储桶作为静态 Web 解决方案来托管单页 React 应用程序。 当我点击根域s3-bucket.amazon.com时，react 应用程序工作正常，每次点击链接时 HTML5 历史 API 工作正常，新 url 看起来很好：_http://s3-bucket.amazon.com/ entity/entity_id_ 当我使用永久链接访问应用程序时会出现问题。 假设我在浏览器中输入相同的 url (_http://s3-bucket.amazon.com/entities/entity_id_) 我将从 Amazon S3 收到以下错误：

404 Not Found
Code: NoSuchKey
Message: The specified key does not exist.
Key: users
RequestId: 3A4B65F49D07B42C
HostId: j2KCK4tvw9DVQzOHaViZPwT7+piVFfVT3lRs2pr2knhdKag7mROEfqPRLUHGeD/TZoFJBI4/maA=

是否可以使 Amazon S3 与永久链接和 HTML5 历史记录 api 很好地工作？ 也许它可以充当代理？

谢谢

Answer 1

使用 AWS CloudFront 的解决方案：

步骤 1：转到 CloudFront

单击分发 ID

转到错误页面选项卡

单击创建自定义错误响应

第 2 步：将表格填写为

HTTP 错误代码：404

TTL：0

自定义错误响应：是

响应页面路径：/index.html

HTTP 响应代码：200

来源： https : //medium.com/@nikhilkapoor17/deployment-of-spa-without-location-strategy-61a190a11dfc

Answer 2

遗憾的是，S3 不支持单页应用程序所需的通配符路由（基本上，您希望 url 中主机之后的所有内容都提供 index.html，但保留路由。

所以www.blah.com/hello/world实际上会为www.blah.com/index.html提供服务，但将路由传递给单页应用程序。

好消息是您可以在 S3 前使用诸如 Fastly (Varnish) 之类的 CDN 来做到这一点。 设置规则，例如：

if(req.url.ext == "" ) {
    set req.url = "/index.html"; 
}

这会将所有非资产请求（任何没有文件扩展名的请求）重定向到域上的 index.html。

Answer 3

我没有在 Amazon S3 上运行 SPA 的经验，但这似乎是 url 重写的问题。 在运行您的应用程序/站点时，历史 (html5) api 重写您的 url 是一回事。 但是，当刷新或冷浏览您的站点时，允许访问重写的 url 肯定需要在服务器级别进行 url 重写。 我在考虑 web.confg (IIS)、.htaccess (Apache) 或 nginx 站点配置。

似乎前段时间已经问过同样的问题： https : //serverfault.com/questions/650704/url-rewriting-in-amazon-s3

Answer 4

为“静态网站托管”属性上的索引和错误文件指定相同的名称。 请参阅链接图像1 。

Answer 5

老问题，但最简单的方法是使用散列路由。 所以不是 mydomain.com/somepage/subpage 而是 mydomain.com/#/somepage/subpage