amazon-web-services - AWS Cloudfront 作为具有自定义域的 Heroku 站点的 CDN

Question

最近，我从 AWS Route 53 (brianpatrickhummel.com) 购买了一个域来托管个人投资组合。投资组合站点已启动并运行，使用 S3 存储桶和 Cloudfront 作为 CDN。在投资组合网站上，访问者可以预览我构建的一些应用程序，这些应用程序使用 iframe 元素在网站内启动，我注意到我在 Heroku 部署的应用程序需要 10-20 秒才能加载，因为这些网站上的访问者很少平均，没有CDN服务。

因此，我开始研究使用 AWS Cloudfront 作为 CDN。我从一个 Heroku 应用开始，添加了一个自定义域，现在配置如下:

Domain Name: burger.brianpatrickhummel.com
DNS Target: burger.brianpatrickhummel.com.herokudns.com

最后一步是“配置应用程序的 DNS 提供商以指向 Heroku 提供的 DNS 目标”。在这一步和正确配置 Cloudfront 发行版之间，我陷入了困惑的漩涡。我不确定在 Cloudfront、Route 53 或两者中进行某些 DNS/CNAME 更改的位置。

没有太多专门与这三种技术(Heroku、Cloudfront、Route 53)相关的在线文档，我花了很多时间在这三篇文章之间来回切换，但无济于事:

Heroku - Using Amazon CloudFront CDN

Configuring Amazon Route 53 DNS for Your Heroku App

我相信必要的更改本质上很简单，并且非常感谢那些可能有此特定配置经验的人的任何见解。

---更新---

我有最后一个问题，现在我的所有 Heroku 应用程序都已成功通过 Cloudfront 路由，我意识到所有具有生成 POST HTTP 请求的组件的应用程序都会收到 403 - 禁止错误。这与相应 AJAX 调用中的相对 URL 有什么关系:

$(document).on("click", ".saveButton", function () {
  var thisId = $(this).attr("id");
  $.ajax({
    method: "POST",
    url: "/save/" + thisId
  }).done(function () {} 

我在 Cloudfront 文档中看到以下内容:

CloudFront always caches responses to GET and HEAD requests. You can also configure CloudFront to cache responses to OPTIONS requests. CloudFront does not cache responses to requests that use the other methods.

与成功发送请求相比，处理来自 Heroku 应用程序服务器的响应的问题更多吗？

-- 更新 2 --

我认为这与基于 Cloudfront 文档中的此声明的 HTTP/HTTPS 有关:

CloudFront doesn't redirect DELETE, OPTIONS, PATCH, POST, or PUT requests from HTTP to HTTPS. If you configure a cache behavior to redirect to HTTPS, CloudFront responds to HTTP DELETE, OPTIONS, PATCH, POST, or PUT requests for that cache behavior with HTTP status code 403 (Forbidden).

Heroku 指出:

If you are wanting to serve Cloudfront assets using SSL you can simply use HTTPS on the distribution domain given to you by Amazon. Note, whilst you can create CNAME’s for this purpose, serving Cloudfront assets over your CNAME and SSL has an attached cost.

在 AWS Cloudfront Distribution Cache Behavior 设置中，您可以选择
对于 查看者协议(protocol)政策 从三个选项:

If you want CloudFront to allow viewers to access your web content using either HTTP or HTTPS, specify HTTP and HTTPS. If you want CloudFront to redirect all HTTP requests to HTTPS, specify Redirect HTTP to HTTPS. If you want CloudFront to require HTTPS, specify HTTPS Only.

Cloudfront 文档继续指出:

Redirect HTTP to HTTPS Viewers can use both protocols, but HTTP requests are automatically redirected to HTTPS requests. CloudFront returns HTTP status code 301 (Moved Permanently) along with the new HTTPS URL. The viewer then resubmits the request to CloudFront using the HTTPS URL.

When a viewer makes an HTTP request that is redirected to an HTTPS request, CloudFront charges for both requests. For the HTTP request, the charge is only for the request and for the headers that CloudFront returns to the viewer. For the HTTPS request, the charge is for the request, and for the headers and the object returned by your origin.

HTTPS Only Viewers can access your content only if they're using HTTPS. If a viewer sends an HTTP request instead of an HTTPS request, CloudFront returns HTTP status code 403 (Forbidden) and does not return the object.

天啊，我不知道托管个人网站会有多复杂!

Answer 1

Domain Name: burger.brianpatrickhummel.com

您将在 Route 53 中将其指向 CloudFront... 但在您执行此操作之前，您需要创建一个新的 CloudFront 分配并将该主机名配置为该分配的备用域名。

DNS Target: burger.brianpatrickhummel.com.herokudns.com

在创建分配 CloudFront 时将其配置为源域名。

在缓存行为设置中，将 Host 列入白名单 header ，以便 Heroku 了解请求是针对哪个站点的。