我使用S3托管一个javascript应用程序,将使用HTML5 pushStates。问题是,如果用户书签了任何url,它将不会解析为任何东西。我需要的是能够接受所有url请求,并在我的S3桶中提供根index.html,而不仅仅是进行完全重定向。然后我的javascript应用程序可以解析URL并提供适当的页面。

有没有办法告诉S3为所有URL请求服务index.html,而不是做重定向?这类似于通过提供一个index.html来设置apache来处理所有传入的请求,如本例中的https://stackoverflow.com/a/10647521/1762614。我真的希望避免仅仅为了处理这些路由而运行web服务器。从S3执行所有操作非常有吸引力。


当前回答

在CloudFront的帮助下,不需要url黑客就可以很容易地解决这个问题。

创建S3桶,例如:react 使用以下设置创建CloudFront发行版: 默认根对象:index.html 来源域名:S3桶域名,例如:react.s3.amazonaws.com 转到错误页面选项卡,单击创建自定义错误响应: HTTP错误码:403:禁止(404:未找到,在S3静态网站的情况下) 自定义错误响应:是 响应页面路径:/index.html HTTP响应码:200:OK 点击创建

其他回答

这里没有提到的解决方案是使用CloudFront函数在查看器请求时将请求URI重写为index.html:

function handler(event) {
    var request = event.request;
    request.uri = '/index.html';
    return request;
}

如果你在这里寻找与React路由器和AWS Amplify控制台一起工作的解决方案,你已经知道你不能直接使用CloudFront重定向规则,因为Amplify控制台不会为应用程序公开CloudFront Distribution。

然而,解决方案非常简单-你只需要在Amplify控制台中添加一个重定向/重写规则,就像这样:

查看以下链接获取更多信息(以及截图中的复制友好规则):

https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa https://github.com/aws-amplify/amplify-console/issues/83

我自己也在寻找答案。S3似乎只支持重定向,你不能只是重写URL并无声地返回一个不同的资源。我正在考虑使用我的构建脚本在所有需要的路径位置简单地复制index.html。也许这对你也有用。

让Angular 2+应用程序通过Amazon S3和直接url工作的最简单的解决方案是在S3桶配置中指定Index .html作为Index和Error文档。

在2022年,Lambda函数是

函数处理程序(事件){ Var request = event.request; Var uri = request.uri; if (uri.endsWith("/")) { 请求。Uri += "index.html" } else if (!uri.includes(".")){ 请求。Uri += "/index.html" } 返回请求; }