在2022年，Lambda函数是

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

既然问题仍然存在，我想我提出另一个解决方案。 我的情况是，我想在合并之前自动将所有拉请求部署到s3进行测试，使它们可以在[mydomain]/pull-requests/[pr number]/上访问 (例如www.example.com/pull-requests/822/)

据我所知，没有s3规则的场景允许在一个桶中使用html5路由有多个项目，所以上面大多数投票建议适用于根文件夹中的项目，不适用于自己子文件夹中的多个项目。

所以我把我的域指向我的服务器，在那里遵循nginx配置做的工作

location /pull-requests/ {
    try_files $uri @get_files;
}
location @get_files {
    rewrite ^\/pull-requests\/(.*) /$1 break;
    proxy_pass http://<your-amazon-bucket-url>;
    proxy_intercept_errors on;
    recursive_error_pages on;
    error_page 404 = @get_routes;
}

location @get_routes {
    rewrite ^\/(\w+)\/(.+) /$1/ break;
    proxy_pass http://<your-amazon-bucket-url>;
    proxy_intercept_errors on;
    recursive_error_pages on;
    error_page 404 = @not_found;
}

location @not_found {
    return 404;
}

它尝试获取文件，如果没有找到，则假设它是html5路由并尝试。如果你在angular的404页面中没有找到路由，你将永远不会到达@not_found，而会返回angular 404页面而不是not found files，这可以通过在@get_routes中添加If规则来修复。

我不得不说我在nginx配置和使用regex方面感到不太舒服，我得到了这个工作，经过了一些试验和错误，所以虽然这是有效的，但我相信有改进的空间，请分享你的想法。

注意:如果在s3配置中有重定向规则，请删除它们。

顺便说一下，在Safari中工作

如果你在这里寻找与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

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

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

大多数建议的解决方案(尤其是最流行的答案)的问题是，对于不存在的后端资源，您永远不会看到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级别使用重定向，在您可能喜欢的任何其他重定向中，为所有路由提供一个单一的基础也会很方便。它帮助后端识别这不是一个真正的后端资源的请求，前端应用程序将能够处理它。

对于这个问题，我有4种解决方案。前三个问题已经在答案中提到了，最后一个是我的贡献。

Set the error document to index.html. Problem: the response body will be correct, but the status code will be 404, which hurts SEO. Set the redirection rules. Problem: URL polluted with #! and page flashes when loaded. Configure CloudFront. Problem: all pages will return 404 from origin, so you need to chose if you won't cache anything (TTL 0 as suggested) or if you will cache and have issues when updating the site. Prerender all pages. Problem: additional work to prerender pages, specially when the pages changes frequently. For example, a news website.

我的建议是使用选项4。如果预先呈现所有页面，预期页面将不会出现404错误。页面将正常加载，框架将作为一个SPA进行控制和正常工作。还可以设置错误文档以显示通用的error.html页面和重定向规则，将404错误重定向到404.html页面(不带hashbang)。

关于403禁忌错误，我不让它们发生。在我的应用程序中，我认为主机桶中的所有文件都是公共的，我用具有读权限的everyone选项设置了这一点。如果您的站点有私有页面，让用户看到HTML布局应该不是问题。您需要保护的是数据，这是在后端完成的。

此外，如果你有私有资产，比如用户照片，你可以将它们保存在另一个bucket中。因为私有资产需要与数据同样的关注，并且不能与用于托管应用程序的资产文件进行比较。