在 15 分钟内使用免费 SSL 托管无服务器静态网站。

在本指南中，我将向您展示如何以无服务器的方式使用 AWS 托管静态网站。

将使用以下 AWS 服务：

简单存储服务（S3）
53号公路
云端
证书管理器

Angular、Vue 和 React 应用可以编译成静态文件，并通过 S3 存储桶提供服务。如果您可以提供这些文件，就可以从 S3 托管动态网站。

您将需要一个 AWS 账户来阅读本指南。

对于本指南来说，最简单的方法是在 Route53 中拥有一个域名。如果没有，请转到您当前注册商的 DNS 设置。创建一个 CNAME 记录，主机名为“www”，目标为 Cloudfront URL。申请证书时，请确保将您的域名指定为 *.yourdomain.com。然后将 www 和不带 www 的变体添加到您的 Cloudfront 发行版的备用域名字段中。

可以使用 SDK 或 Cloudformation 完成这些步骤。

步骤 1-创建 S3 存储桶。

我们稍后将重新访问我们的 S3 存储桶以调整存储桶策略。

在 AWS 控制台中访问S3 。
点击左上角的“创建存储桶”。
建议您的 S3 存储桶名称与您的域名相同。（yoursite.com）不带 www 或 http。
选择您首选的地区。这可能是离您最近的地区。
单击“下一步”，您将看到“配置选项”。保留所有默认设置。
单击“下一步”，您将看到“设置权限”。同样，保留所有默认设置。
单击“下一步”，然后单击“创建存储桶”。
上传您网站的所有静态文件和文件夹。

我们必须先创建 Cloudfront 发行版，才能继续下一步。创建完成后，我们可以调整存储桶策略，以限制对我们创建的 Cloudfront 发行版的访问。

第 2 步 - 创建 Cloudfront 分发。

这是 Route53 访问您的静态网站的资源。它会从您的 S3 存储桶中提取网站的文件。

在 AWS 控制台中访问Cloudfront 。
点击左上角的“创建分发”。
在“Web”下，单击“开始”。
单击“原始域名”输入，然后选择您的 S3 存储桶。
单击“Origin ID”输入，然后输入您的 S3 存储桶名称。
在“查看器协议策略”旁边，选择“将 HTTP 重定向到 HTTPs”。
选择适合您的最小、最大和默认 TTL。在默认 TTL 中，输入 Cloudfront 每次查看您的 S3 存储桶并缓存您对网站所做的更改的间隔秒数。我使用了 86,400 秒，即一天。
在“价格等级”旁边，选择您想要支持的边缘站点。使用更多边缘站点，费用会更高。
您可以指定备用域名，例如“ www.yoursite.com ”
在“SSL 证书”旁边，选择“自定义 SSL 证书”，然后点击“使用 ACM 请求或导入证书”。这将在新选项卡中打开证书管理器。

保持 Cloudfront 标签页打开。我们很快就会返回。

步骤 3 - 请求 SSL 证书。

您应该位于证书管理器中，并在另一个选项卡中设置 Cloudfront 分发。

请确保您的域名在 Route53 中，并且注册人联系方式是您可以访问的电子邮件。

在“域名”下输入您的域名。
点击“下一步”，然后选择“电子邮件验证”。这通常是最简单的方法。
单击“审核”，然后单击“确认并请求”。
转到您的电子邮件，然后确认请求。
您的证书应该显示“验证状态”为“成功”。
复制您的证书 ARN。

您已创建有效证书。AWS 证书管理器将负责续订。请关闭此选项卡，然后切换回 Cloudfront 设置。

步骤 4-完成 Cloudfront 设置。

您正在将刚刚创建的证书添加到正在进行的 Cloudfront 分发中。

在“自定义 SSL 证书”下的字段中，粘贴您的 ARN。
将其余选项保留为默认选项，然后选择“创建分发”。
当您的分发状态为“已启用”时，请在最左侧列中选择“来源访问身份”。
选择左上角的“创建来源访问身份”。
您的评论应该是您的 S3 存储桶的名称。
点击“创建”，然后复制刚刚创建的身份的ID列。
返回 S3。

接下来，我们将您的静态文件上传到 S3，并添加存储桶策略以允许从 Cloudfront 安全读取。

步骤 5-调整存储桶策略。

您应该再次进入您的 S3 存储桶。

选择存储桶上的“权限”选项卡。
选择“存储桶策略”按钮。
粘贴以下存储桶策略。您需要将 XXXXXXX 更改为您的源访问身份。您还需要将 yourdomain.com 更改为新的 S3 存储桶名称。

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "2",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::yourdomain.com/*"
        }
    ]
}

单击“保存”并返回“概览”选项卡。
前往 Route53。

最后一步是将您的域解析到您的 Cloudfront 分发。

步骤 6 - 将您的域名解析到 Cloudfront

您应该已登录 Route53。如果您尚未为您的域名创建托管区域，请按照以下步骤操作：

单击左上角的“创建托管区域”按钮。
输入您的域名，不带 www 或 http。
在“评论”输入中输入您的网站名称。
点击“创建”。
单击“创建记录集”。
名字是“www”
类型为CNAME。
该值是您的域名，不带 www 或 http。
单击“保存记录集”。
再次点击“创建记录集”。
名字是空白的。
类型为“A”
选择“别名”旁边的“是”。
在“别名目标”旁边选择您的 Cloudfront 分发。
选择“创建记录集”。

1-2 分钟后，打开一个新标签页，看看你的域名是否能解析到你的静态网站（带 www 和不带 www）。如果没有，请检查你是否正确执行了上述步骤。如果仍然不行，请在文章下方留言。

我不知道如何在 Markdown 中结束代码块。我用 dilinger.io 检查了一下，当我输入三个反引号时，代码块会跳出。看来这里不行。我已经在 Twitter 上联系了 dev.to，希望能得到解答。

语法好像已经修复了。真奇怪。

我希望这能帮助那些正在寻找廉价的方式来托管安全、无服务器和静态网站的人。

谢谢。

文章来源：https://dev.to/arswaw/host-a-serverless-static-website-with-free-ssl-in-15-minutes-hd3