将所有AWS S3 http请求重定向到index.html以获取AngularJS HTML5Mode

Question

如何将所有请求重定向到我的静态AWS S3网站到index.html,以便我可以使用AngularJS的HTML5模式？

我最近(通过我无尽的喜悦)了解到#,使用HTML5模式可以在URL中使用AngularJS .但是,我从这个答案中知道,这需要在服务器上进行一些设置,因为所有请求都必须重定向到正确的html文件(在这种情况下index.html),以使其正常工作.

我使用AWS S3的静态网站托管我的网站.我尝试将此添加到我的重定向规则:

<RoutingRules>
     <RoutingRule>
         <Redirect>
             <ReplaceKeyWith>/</ReplaceKeyWith>
         </Redirect>
     </RoutingRule>
</RoutingRules>

和

<RoutingRules>
     <RoutingRule>
         <Redirect>
             <ReplaceKeyWith>index.html</ReplaceKeyWith>
         </Redirect>
     </RoutingRule>
</RoutingRules>

但是我遇到了太多重定向的问题.

有没有办法在AWS S3中使用静态网站托管进行必要的重定向？

Answer 1

您可以将AWS CloudFront用于您的用例.在CloudFront后面设置S3存储桶并将index.html添加为默认路由.

如果页面以角度路径(例如/ home)刷新,AWS CloudFront将在S3中搜索/home.html文件并返回404:Not Found Response.但是,有一种解决方法,您可以在其中设置404:Not Found HTTP错误代码的自定义错误响应,指向/index.html响应页面路径.

有关更多详细信息,请参阅博客文章使用AWS CloudFront为S3上托管的SPA提供服务.