AWS Cloudfront作为带有自定义域的Heroku网站的CDN [英] AWS Cloudfront as CDN for Heroku Site with Custom Domain

问题描述

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

Recently, I bought a domain from AWS Route 53 (brianpatrickhummel.com) to host a personal portfolio. The portfolio site is up and running, using an S3 bucket and Cloudfront as a CDN. On the portfolio site, visitors are able to preview some apps that I built, which launch in-site using iframe elements, and I noticed that my Heroku-deployed apps take 10-20 seconds to load, since those sites have very few visitors on average and have no CDN service.

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

Therefore, I began researching using AWS Cloudfront as a CDN. I began with one Heroku app, adding a custom domain which is now configured as such:

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

最后一步是配置您应用的DNS提供商，使其指向Heroku提供的DNS目标。在这一步骤与正确配置Cloudfront发行版之间，我陷入了混乱的漩涡。我不确定在Cloudfront，Route 53或两者中对某些DNS / CNAME进行更改的地方。

The last step is to "configure your app’s DNS provider to point to the Heroku-supplied DNS Target." Between this step and properly configuring a Cloudfront distribution, I have run myself into a spiral of confusion. I'm uncertain as to of where I make certain DNS/CNAME changes, in Cloudfront, Route 53 or both.

没有太多与这些内容相关的在线文档三种技术（Heroku，Cloudfront，Route 53），我花了很多时间在这三篇文章之间跳来跳去，无济于事：

There isn't much online documention specifically related to these three technologies (Heroku, Cloudfront, Route 53) and I've spent much time bouncing between these three articles, to no avail:

Heroku-使用Amazon CloudFront CDN

< a href = https://devcenter.heroku.com/articles/route-53 rel = nofollow noreferrer>为您的Heroku应用配置Amazon Route 53 DNS

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

I'm confident that the necessary changes are simple in nature and would greatly appreciate any insight from those who might have experience with this particular configuration.

-更新---




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

---UPDATE---

I have one last question, now that I have all of my Heroku apps successfully routing through Cloudfront, I have realized that all of the apps which have components that generate POST HTTP requests receive 403 - forbidden errors. Does this have anything to do with the relative URL in the respective AJAX calls:

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

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

I see the following in the Cloudfront documentation:

CloudFront始终缓存对GET和HEAD请求的响应。您还可以配置CloudFront来缓存对OPTIONS请求的响应。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.

这更多的是问题

-更新2- $是处理Heroku应用服务器的响应，而不是成功发送请求的问题？ b $ b

我认为这与基于Cloudfront文档中的以下语句的HTTP / HTTPS有关：

-- UPDATE 2 --
I'm thinking that this has to do with HTTP/HTTPS based on this statement in the Cloudfront Documentation:

CloudFront不会将DELETE，OPTIONS，PATCH，POST或PUT请求从HTTP重定向到HTTPS。如果您将缓存行为配置为重定向到HTTPS，则CloudFront会使用HTTP状态代码403（禁止）响应该缓存行为的HTTP DELETE，OPTIONS，PATCH，POST或PUT请求。

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状态：

如果您想使用SSL服务Cloudfront资产，您可以简单地在Amazon给您的分发域上使用HTTPS。请注意，虽然您可以为此创建CNAME，但通过CNAME和SSL提供Cloudfront资产的服务需要附加费用。

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中分发缓存行为设置，您可以从以下三个选项中为查看器协议策略选择
：

In AWS Cloudfront Distribution Cache Behaviour settings, you can choose for the Viewer Protocol Policy from three options:

如果您希望CloudFront允许查看者使用HTTP或HTTPS访问您的Web内容，请指定HTTP和HTTPS。如果您希望CloudFront将所有HTTP请求重定向到HTTPS，请指定将HTTP重定向到HTTPS。如果您希望CloudFront要求HTTPS，则仅指定HTTPS。

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文档会继续注明：

The Cloudfront doc goes on to note:

将HTTP重定向到HTTPS
查看者可以使用这两种协议，但是HTTP请求会自动重定向到HTTPS请求。 CloudFront返回HTTP状态代码301（永久移动）以及新的HTTPS URL。然后，查看者使用HTTPS URL将请求重新提交给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.

当查看者发出重定向到HTTPS请求的HTTP请求时，CloudFront会对这两个请求收费。对于HTTP请求，收费仅针对该请求以及CloudFront返回给查看器的标头。对于HTTPS请求，将对请求以及源的标头和对象收取费用。

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
查看者仅在使用HTTPS时才能访问您的内容。如果查看者发送的是HTTP请求而不是HTTPS请求，则CloudFront返回HTTP状态代码403（禁止），并且不返回对象。

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.

真可悲，我不知道托管一个个人网站会多么复杂！

Good grief, I had no idea how complicated it would be to host a personal website!

推荐答案

域名：burger.brianpatrickhummel.com

Domain Name: burger.brianpatrickhummel.com

您将在53号公路上将其指向CloudFront ...但是在此之前为此，您需要创建一个新的CloudFront分发并将该主机名配置为该分发的备用域名。

You will point this to CloudFront, in Route 53... but before you can do that, you need to create a new CloudFront distribution and configure that hostname as an Alternate Domain Name for the distribution.

DNS目标：burger .brianpatrickhummel.com.herokudns.com

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

在创建发行版CloudFront时将其配置为原始域名。

Configure this as the Origin Domain Name when creating the distribution CloudFront.

在缓存行为设置中，将 Host 标头列入白名单，以便Heroku知道请求的目标站点。

In the Cache Behavior settings, whitelist the Host header so that Heroku will understand which site the request is for.

这篇关于AWS Cloudfront作为带有自定义域的Heroku网站的CDN的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！