在页面刷新时使用 Angular JS ui.router html5Mode(true) 配置 Amazon S3 静态站点

Question

如何配置 Amazon S3 静态网页以正确路由 Angular ui.router html5Mode 路由？在页面刷新时，它会请求一个不存在的文件，angular 无法处理。在文档中，他们建议更改服务器上的 URL 重写。

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

但是，S3 是存储，不提供相同的重定向选项我一直在尝试使用内置的重定向规则，例如

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals >
        </Condition>
        <Redirect>
             <HostName>[[ your application's domain name ]]</HostName>
             <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

然而，这只会导致重定向循环。

有什么建议吗？

Answer 1

在 Frequently Asked Questions, they rewrite almost everything to serve the index.html page. For HTML5 fallback mode 中你需要使用 #!/ (hashbang)。

你可以改变这个：

  <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>

和

  <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

有关此答案的更多详细信息：

您可能还需要配置您的应用以使用该前缀：

angular.module(...)

...

.config(function($locationProvider) {
  $locationProvider.html5Mode(true).hashPrefix('!');
})

Answer 2

基本上有 3 个选项，使用 EC2 实例执行实际服务器重写到配置的 HTML5 路由，或者像 dnozay 建议的那样，使用回退模式并重写请求以使用 # ！哈希邦。最后，您可以只使用标准 angular 路由，这是我选择的选项。更少的麻烦，当 Angular 2.0 推出时，您可以更新到那个。

这里并没有真正解决路由问题。

Answer 3

这是另一个使用 nginx 的选项 proxy_pass，它还允许您在子文件夹中有多个项目并使用子域

S3 Static Website Hosting Route All Paths to Index.html

Answer 4

确保为您的网站配置了索引路由。主要是 index.html 从 S3 配置中删除路由规则在您的 S3 存储桶前面放置一个 Cloudfront。为您的 Cloudfront 实例配置错误页面规则。

在错误规则中指定：

Http error code: 404 (and 403 or other errors as per need)
Error Caching Minimum TTL (seconds) : 0
Customize response: Yes
Response Page Path : /index.html
HTTP Response Code: 200

在页面刷新时使用 Angular JS ui.router html5Mode(true) 配置 Amazon S3 静态站点

Configure Amazon S3 static site with Angular JS ui.router html5Mode(true) on page refresh

html

amazon-s3

angularjs

angular-ui-router