我使用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执行所有操作非常有吸引力。
当前回答
大多数建议的解决方案(尤其是最流行的答案)的问题是，对于不存在的后端资源，您永远不会看到404错误。如果希望继续得到404，请参考此解决方案
I added a root path to all my routes (that's new to this solution) e.g. all my route-paths start with the same front end root... in place of paths /foo/baz, /foo2/baz I now have /root/foo/baz , /root/foo2/baz paths. The choice of the front-end root is such that it does not conflict with any real folder or path at the back-end. Now I can use this root to create simple redirection rules anywhere, I like. All my redirection changes will be impacting only this path and everything else will be as earlier.
这是我在s3桶中添加的重定向规则
[
{
"Condition": {
"HttpErrorCodeReturnedEquals": "404",
"KeyPrefixEquals": "root/"
},
"Redirect": {
"HostName": "mydomain.com",
"ReplaceKeyPrefixWith": "#/"
}
}
]
甚至是跟随
[
{
"Condition": {
"KeyPrefixEquals": "root/"
},
"Redirect": {
"HostName": "mydomain.com",
"ReplaceKeyPrefixWith": "#/"
}
}
]
在此之后，/root/foo/baz被重定向到/#/foo/baz，页面在主页加载，没有错误。
我在装载Vue应用程序后添加了以下代码。它将把我的应用程序带到所需的路线。您可以更换路由器。push部分根据Angular或你正在使用的任何东西。
if(location.href.includes("#"))
{
let currentRoute = location.href.split("#")[1];
router.push({ path: `/root${currentRoute}` })
}
即使您没有在s3级别使用重定向，在您可能喜欢的任何其他重定向中，为所有路由提供一个单一的基础也会很方便。它帮助后端识别这不是一个真正的后端资源的请求，前端应用程序将能够处理它。
其他回答
这是切题的，但这里有一个提示，对于那些使用Rackt的React Router库和(HTML5)浏览器历史，想要在S3上托管的人。
假设一个用户在s3托管的静态网站上访问/foo/bear。根据David之前的建议，重定向规则将把它们发送到/#/foo/bear。如果您的应用程序是使用浏览器历史记录构建的，那么这样做不会有太大的好处。然而，你的应用程序在这一点上加载，它现在可以操纵历史。
在我们的项目中包括Rackt历史(参见React Router项目中的使用自定义历史)，你可以添加一个侦听器，它可以感知哈希历史路径，并根据需要替换路径，如下例所示:
import ReactDOM from 'react-dom';
/* Application-specific details. */
const route = {};
import { Router, useRouterHistory } from 'react-router';
import { createHistory } from 'history';
const history = useRouterHistory(createHistory)();
history.listen(function (location) {
const path = (/#(\/.*)$/.exec(location.hash) || [])[1];
if (path) history.replace(path);
});
ReactDOM.render(
<Router history={history} routes={route}/>,
document.body.appendChild(document.createElement('div'))
);
回顾一下:
David的S3重定向规则将/foo/bear定向到/#/foo/bear。 您的应用程序将加载。 历史侦听器将检测#/foo/bear历史符号。 用正确的路径替换历史记录。
链接标签将按预期工作，所有其他浏览器历史功能也是如此。我所注意到的唯一缺点是在初始请求时发生的间隙重定向。
这是受到AngularJS的一个解决方案的启发，我怀疑它可以很容易地适应任何应用程序。
转到你的桶的静态网站托管设置 设置“Error document”为index.html。
现在可以使用Lambda@Edge来重写路径
下面是一个lambda@Edge函数:
创建一个新的Lambda函数，但是使用一个已经存在的蓝图，而不是一个空白函数。 搜索“cloudfront”，并从搜索结果中选择cloudfront-response-generation。 创建函数后，将内容替换为以下内容。我还必须将节点运行时更改为10。X，因为cloudfront在撰写本文时不支持节点12。
'use strict';
exports.handler = (event, context, callback) => {
// Extract the request from the CloudFront event that is sent to Lambda@Edge
var request = event.Records[0].cf.request;
// Extract the URI from the request
var olduri = request.uri;
// Match any '/' that occurs at the end of a URI. Replace it with a default index
var newuri = olduri.replace(/\/$/, '\/index.html');
// Log the URI as received by CloudFront and the new URI to be used to fetch from origin
console.log("Old URI: " + olduri);
console.log("New URI: " + newuri);
// Replace the received URI with the URI that includes the index page
request.uri = newuri;
return callback(null, request);
};
在您的云前行为中，您将编辑它们以在“Viewer Request”上添加对lambda函数的调用
完整教程:https://aws.amazon.com/blogs/compute/implementing-default-directory-indexes-in-amazon-s3-backed-amazon-cloudfront-origins-using-lambdaedge/
我自己也在寻找答案。S3似乎只支持重定向，你不能只是重写URL并无声地返回一个不同的资源。我正在考虑使用我的构建脚本在所有需要的路径位置简单地复制index.html。也许这对你也有用。
在CloudFront的帮助下，不需要url黑客就可以很容易地解决这个问题。
创建S3桶，例如:react 使用以下设置创建CloudFront发行版: 默认根对象:index.html 来源域名:S3桶域名，例如:react.s3.amazonaws.com 转到错误页面选项卡，单击创建自定义错误响应: HTTP错误码:403:禁止(404:未找到，在S3静态网站的情况下) 自定义错误响应:是 响应页面路径:/index.html HTTP响应码:200:OK 点击创建
