当app是在S3中托管的静态内容时,路由到Angular组件

Question

我目前正在开发一个带有Angular4前端的应用程序.我的生产目标是将前端作为AWS S3存储桶的静态内容提供.

一切都在处理一个例外,这实际上是应用程序的主要问题.当用户注册时,会向他们发送一封电子邮件,其中包含验证其电子邮件地址的链接 链接的格式如下:

https://myhostname.com/user/userguid?token=tokenvalue

由于前端作为静态内容提供,因此实际上只存在页面index.html,因此单击此链接会生成404.

现在,经过一些研究,我采取了以下步骤.在S3中,我有以下路由规则.

<RoutingRules>
  <RoutingRule>
    <Condition>
      <HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
    </Condition>
    <Redirect>
      <HostName>myhostname.com</HostName>
      <ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>
</RoutingRules>

我还有一个CloudFront规则,将所有404错误重定向到index.html.

现在,当有人导航到myhostname.com/user/userguid?token=tokenvalue时,URL会重新写入myhostname.com/#!/user/userguid?token=tokenvalue,但之后用户将被重定向到myhostname.com/home(又名index.html).

我可以对Angular应用程序进行哪些更改以获取散列/片段的值并实际路由到该组件(而不仅仅是重定向,这会将用户发送回index.html)？

请注意,在开发中通过'npm start'提供前端时,这很好用.谢谢大家.

Answer 1

Zack,你选择的方法(索引文档和错误文档应该是'index.html')不幸的是非常糟糕的方法.

会发生什么情况是您的用户将获得404然后重定向 - 这将损害您的搜索引擎优化,Chrome将惩罚您,因为它认为您的网站是网络钓鱼,并且Safari支持被击中和错过.

更好的选择是:

1. 删除错误页面重定向到index.html,
2. 将Cloudfront放在S3存储桶前面
3. 在云端设置自定义错误响应代码,重定向到/index.html和(最重要的!)提供200 Http响应代码

希望有所帮助

Answer 2

这是最终的解决方案.埃德蒙多的主要道具.

设置S3存储桶时,在静态网站托管 - >属性下,索引文档和错误文档都应为'index.html'.请确认重复规则是空白的!

在CloudFlare中,在启用分发并处于联机状态后,转到错误页面并创建自定义错误响应.对于任何404错误,重定向到/index.html并返回200 OK状态代码.

这就像一个魅力!

Answer 3

您需要创建自定义CloudFront的错误响应设置BOTH 404和403错误。

我有一篇关于此的完整博客文章以及其他 AWS 角度设置技巧（如免费 HTTPS）。

Answer 4

All i had to do was set the error document to index.html in my static website hosting block in the console

Answer 5

您不必将前缀替换为#!，除非您使用的是 LocationHashStrategy ，我发现这不是您的情况。所以删除：

<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>

它应该有效。