在不破坏 URL 的情况下将 ember-cli 应用程序部署到 S3

Question

我正在开发要在 S3 中部署的 ember-cli 应用程序。我真的很想能够使用这种 'serverless' 方法，因为它配置起来非常简单，而且非常实惠。

我的 URL 有问题。如果我点击 http://my-bucket.s3-website-us-east-1.amazonaws.com/ it works just fine. But if I try to directly load a page other than the root of the application, such as http://my-bucket.s3-website-us-east-1.amazonaws.com/elephants/5，那么它会返回 403，因为 S3 中没有这样的资源。（我可以通过应用程序很好地导航到这些页面，我可以在我的机器上以开发模式直接点击它们，所以 ember 应用程序运行良好。）

寻找解决方案，我发现 suggestions to add #! to my path. This seems better, as it doesn't return a 403, but when I hit http://my-bucket.s3-website-us-east-1.amazonaws.com/#!/elephants/5, it simply redirects to http://my-bucket.s3-website-us-east-1.amazonaws.com，丢失了路径包含的任何特定信息。

我有哪些选择？有没有办法使用 S3 并拥有有效的 URL？我需要服务器吗？还是有另一种方法让我望而却步？

Answer 1

好的，我很接近。结果证明正确的方法是：

http://my-bucket.s3-website-us-east-1.amazonaws.com/#/elephants/5

我尝试过各种方法，但其中 none 恰好是 #，没有 !，并且被 / 包围。相关阅读是 location

上的文档

值得注意的是我用的是：

App.Router.reopen({
  location: 'auto'
});

此外，我在 静态网站托管

下使用以下 RoutingRules

<RoutingRules>
    <RoutingRule>
        <Condition>
            <HttpErrorCodeReturnedEquals>403</HttpErrorCodeReturnedEquals>
        </Condition>
        <Redirect>
            <HostName>my-bucket.s3-website-us-east-1.amazonaws.com</HostName>
            <ReplaceKeyPrefixWith>#/</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

Answer 2

只需将错误文档映射到 index.html 并且您的 locationType 应设置为自动。 http://i.stack.imgur.com/qbAov.png

Answer 3

仅使用基于 # 的重定向的方法几乎没有问题。我在下面列出了它们：

当您的应用程序的路径被解析时，会发生多次重定向。例如：www.myapp.com/path/for/test 被重定向为 www.myapp.com/#/path/for/test
url 栏中出现闪烁，因为“#”由于 SPA 框架的动作而出现和消失。
seo 受到影响，因为 - 'Hey! Its google forcing his hand on redirects'
Safari 对您的应用程序的支持值得一试。

Ember-CLI-Deploy 提倡的 Lightening 部署方法的一种变异方法如下：

确保为您的网站配置了索引路由。主要是 index.html
从 S3 配置中删除路由规则
在您的 S3 存储桶前放置一个 Cloudfront。
为您的 Cloudfront 实例配置错误页面规则。在错误规则中指定：
- HTTP 错误代码：404（以及 403 或其他需要的错误）
- 错误缓存最小 TTL（秒）：0
- 自定义响应：是
- 响应页面路径：/index.html
- HTTP 响应代码：200

5.For SEO 需要 + 确保您的 index.html 不缓存，请执行以下操作：

配置 EC2 实例并设置 nginx 服务器。
为您的 EC2 实例分配一个 public ip。
创建一个 ELB，将您创建的 EC2 实例作为实例
您应该能够将 ELB 分配给您的 DNS。
现在，配置您的 nginx 服务器以执行以下操作：Proxy_pass 对您的 CDN 的所有请求（仅限 index.html，直接从您的云端服务其他资产）和搜索机器人，重定向Prerender.io

我可以提供有关 nginx 设置的更多详细信息，请留言。辛苦了。

一次云前端分发更新。使您的云端缓存失效一次以处于原始模式。在浏览器中点击 url 应该一切正常。

在不破坏 URL 的情况下将 ember-cli 应用程序部署到 S3

Deploying ember-cli app to S3 without breaking URLs

url

amazon-s3

ember.js

ember-cli