Javascript AWS CloudFront中的单页应用程序

我有一个单页静态网站是在AWS桶托管。 应用程序是JavaScript

我已设置Cloudfront以提供内容。 网站内容托管在AWS S3存储桶中，Cloudfront用于为不同位置的用户提供更快的web内容交付

但在建立网站后，我面临一个问题。如果我刷新页面，它将抛出错误，因为密钥不存在。 我无法刷新页面或复制URL并将其粘贴到浏览器中的其他选项卡以访问同一页面

我得到以下错误：

<Error>
    <Code>NoSuchKey</Code>
    <Message>The specified key does not exist.</Message>
    <Key>__build__/home</Key>
    <RequestId>36941111717B2006</RequestId>   <HostId>wfLt17lDjXhZLqCxRM2zOiDIJSF03/HKdL3V9Oeq3r1glowmlZpavRj0zzBzBgXlXZudiXoc=</HostId>
</Error>

我的S3 bucket重定向规则如下：

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>*/</KeyPrefixEquals>
        </Condition>
        <Redirect>
            <ReplaceKeyWith>index.html</ReplaceKeyWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

*/
index.html

如果您的单页网站正确地处理了404，您只需为您的发行版使用一个自定义错误页面覆盖默认的CloudFront设置，这就是您的

index.html

您可以在发行版的

错误页面
选项卡中设置此选项，其外观如下：

感谢您的回答，我还有一个疑问，例如url是否为/blog或/about，当我们刷新页面时，它将首先通过index.html，然后加载/blog或/about页面。是的，这是正确的，SPA:s通常是如何工作的。什么行为是最佳的？如果我错了，请纠正我，是否可以直接加载页面而不加载index.html？这样我们可以快速加载请求的页面。@Bidyut我不知道你的网站是如何建立的，不同的页面有自己的静态文件吗？是的，不同的页面有不同的静态文件。它调用了一些js脚本