在 S3 上使用 https 托管 SPA 或静态网站的最便宜方式答案

【问题标题】：Cheapest way to host a SPA or static website with https on S3在 S3 上使用 https 托管 SPA 或静态网站的最便宜方式
【发布时间】：2020-01-05 21:20:06
【问题描述】：

问题

我想托管多个网站，每个网站都使用 ssl(https) 并且不必花费超出我需要的费用。

如果可能（但不是必须），我还想继续使用 Route53，因为我了解如何使用它，而且每月只需花费大约 0.50 美元。

背景

我对后端/服务器的了解非常有限。

我已经创建了一些反应网站（我认为我正确使用了静态这个词，javascript 更改了一些东西），目前我将每个网站都托管在 ec2 上。我使用 certbot(lets-encrypt) 为我的网站启用 https。域名通过Route53和Namecheap处理。

S3 和 Cloudfront

我想将我的网站放在 S3 上以节省成本。我需要https。我看到的大多数tutorials 都在谈论使用云端。看起来cloudfront 的成本与我的 ec2 成本相似，所以它对我来说似乎不是解决方案。也许我错了？费用会不会微不足道？

Route53 和 NGINX

看起来我可以用 Route53 做到这一点？有一个来自 Gianluca Casati 的answer，但他并没有真正提供足够的细节供我使用。

Some other tutorials 解释一下，不过说说搭建 NGINX 服务器，我真的不知道那是什么。如果可能，我想避免使用 NGINX，但如果必须，我会使用它。

这开始变得非常复杂，所以我想知道是否有更简单的方法。如果不是，涉及的所有步骤是什么

旁注（如果你也能回答这个问题，那会很有帮助，但不是必须的）

我也想要好的 SEO。对于至少其中一个网站，看起来这将涉及动态渲染，使用 rendertron 或 puppeteer 或其他东西。并非我的所有网站都需要这个，但有一个需要。很高兴知道这是否可行。

总结：

我正在寻找一种成本效益高的方法来托管多个静态网站
看起来这种方法是将每个存储在亚马逊 S3 上
我希望每个网站都有 SSL(HTTPS)
看起来 Cloudfront 可以做到这一点，但无论如何也不会真正为我省钱
看起来有一种方法可以使用 Route53 进行此操作
Route53 方法可能需要一个 NGINX 代理服务器，我不知道大部分是什么。

【问题讨论】：

有关在 AWS（包括 S3）上托管静态站点的说明性指南，请访问 d1.awsstatic.com/whitepapers/…
做你正在做的事情非常简单，我为一些 React 应用程序做这件事。你不需要 NGINX 代理服务器。最初只需使用“静态网站托管”设置 S3，直到您准备好上线，然后使用 https 设置 Cloudfront 并关闭静态网站托管。您也可以通过 CloudFront 在 Edit Origin "Grant Read Permissions on Bucket" 中自动设置 S3 存储桶策略。您还可以通过 CloudFront 简单地添加 SSL 证书，并轻松地将您在 route53 中的域链接到您的 CloudFront 分配。
@JonB 我担心云端的成本。我可能是错的，但与使用 ec2 相比，使用 cloudfront 并不会节省任何钱
这既不是编程相关的，也是一个推荐请求，这两者都使它偏离主题。
@DaveNewton 与编程有关。这是关于如何为网络服务器设置后端 ssl。该站点上存在标签 s3、route53 和 amazon-web-services，以便人们可以询问它们。我的主要问题是在 S3 上启用 https。我不知道该怎么做。它可能是编辑服务器文件，或使用第三方软件，这是现代编程的一部分。某些东西的成本是在编程时避免它的正当理由。答案可能需要使用某些软件，这类似于使用库的答案。

标签： amazon-web-services ssl amazon-s3 https amazon-route53

【解决方案1】：

我会尝试按顺序回答您的问题。

Cloudfront：成本会微不足道吗？

是的，难以置信。下面是我的 AWS 账户中随机账单的截图：

以下是典型 AWS 发票上的 Cloudfront 定价明细：

Route53：我可以用 Route53 做到这一点吗？

是的，这将是必要的。 NGINX 不是必需的。

您需要的 4 项 AWS 服务是：

S3：创建一个启用“网络托管”且名称与所需域 URL 相同的存储桶。例如：“www.jacobswebsite.com”或“jacobswebsite.com”
Cloudfront：因为您不能直接在 S3 存储桶上安装 SSL 证书，但您可以在 Cloudfront 发行版上安装 SSL。
Route53：当用户输入您的 URL 时，您使用什么来指向您的 DNS 记录。以一种简单的方式，您将“www.mysite.com”DNS 记录指向 Cloudfront，Cloudfront 将指向您的 S3 存储桶。
AWS Certificate Manager：使用它，您可以生成免费的自动更新浏览器兼容 SSL 证书。如果 Route53 正在为您的域处理 DNS，则 SSL 生成是一键式设置，大约需要 30 分钟的等待时间。然后，您可以通过下拉菜单将这些 SSL 证书安装到 CloudFront 分配中。

这是基本程序的极好指南：

https://medium.com/@sbuckpesch/setup-aws-s3-static-website-hosting-using-ssl-acm-34d41d32e394

您可以跳过有关 SES 的部分进行基本设置，但如果您需要设置一个提交到您的电子邮件收件箱的表单，那么您可能需要查看它。

简而言之，答案是肯定的。您可以使用 S3 和 Cloudfront 来实现您的目标，而无需大量后端服务器知识并且每月只需几美分。上面描述的方法和服务正是你的做法。

【讨论】：

我唯一要补充的是，存储桶不必具有域的名称，它可以是任何东西，并且不需要启用网络托管。您应该授予 Cloudfront Origin Access Identity 对存储桶的访问权限。
@chris，很好！刚刚在这里学到了一些东西。我想我过去一定是通过在没有 Cloudfront 的情况下创建仅 S3 http 的网站而养成了这种工作流习惯。很高兴知道

【解决方案2】：

Jacob，here 是使用 CloudFront 设置 HTTPS 的官方指南。更具体地说，您需要为 communication between viewers and CloudFront 启用 HTTPS。

尽管上述链接为您提供了有关设置的一般信息/理解，但正如您所说，关键是您需要通过 HTTPS 从 CloudFront 提供 多个域。知识中心的这个页面确切地告诉你你需要什么：https://aws.amazon.com/premiumsupport/knowledge-center/multiple-domains-https-cloudfront/

简而言之：

在分发设置 (CloudFront) 中配置 CNAME。
为您的域配置 SSL 证书（视频说明了如何通过 AWS 的 ACM 创建它们，但您也可以在其他地方购买通配符或多域证书。Here 是一个很好的帖子，解释它们之间的区别。
将 CNAME 指向您的 CloudFront 域（通过 Route53 或您使用的任何 DNS 提供商完成）。

请注意，如果您由于旧浏览器不兼容而无法使用SNI，则会花费您更多的钱，因为您需要每个域一个 IP - 见下图。 SNI 是最具成本效益的选择，我认为这就是您的问题所在。您可能想查看here 了解更多详情。

希望对你有帮助！

【讨论】：

【解决方案3】：

我们完全按照您的要求构建了一块砖，在 S3 上使用 CloudFront 的 HTTPS 和 url 重写规则来获得 SEO 友好的 URL。

https://github.com/icdotdev/iclab.website

按照自述文件中的步骤，您应该能够以无服务方式托管您的网站。

如果您已经配置了 Route 53，只需在创建砖块时提供 hosted_zone_id 参数即可。

和

如果您已经为您的域颁发了证书，请提供certificate_arn 参数。

PS：我是开源项目 ic.dev 的合著者 :)

【讨论】：

【解决方案4】：

您可以为此目的使用 Cloudflare。有一个例子可能对你有帮助： https://www.engaging.io/easy-way-to-configure-ssl-for-amazon-s3-bucket-via-cloudflare/

【讨论】：

【解决方案5】：

如果您正在寻找一种更好的方式来使用 S3 和 Cloudfront 托管您的网站，而无需使用 Lambda 函数，我为此创建了一个分步教程，请查看https://www.youtube.com/watch?v=94DyGswSY6k&t=1475s

【讨论】：