cloudfront s3

by Paul Berg

保罗·伯格

如何使用S3，CloudFront和Route53托管静态网站 (How to Host a Static Website with S3, CloudFront and Route53)

I recently set-up my self-hosted personal blog and I underestimated the effort I had to put in to make it exactly as I wanted. So I decided to write a tutorial to help others do it with less overhead.

我最近建立了自我托管的个人博客 ，但我低估了为使其完全符合我的意愿而付出的努力。 因此，我决定编写一个教程来帮助其他人以更少的开销来完成它。

This article will go into fine details on how to tick all the boxes below, with a focus on the backend components.

本文将详细介绍如何在下面的所有方框中打勾，重点是后端组件。

1. Pay-as-you-go hosting即付即用托管
2. SSL certificateSSL证书
3. Functional www subdomain功能www子域
4. Highly customisable but minimalistic design高度可定制但简约的设计
5. Markdown-powered articlesMarkdown支持的文章

For 4 and 5 above, I used Hugo with the Minimal theme.

对于上面的4和5，我将Hugo与Minimal主题结合使用。

警告 (Caveat)

Do note that this is a verbose tutorial, aimed at those who value flexibility and interoperability with other AWS services more than anything else. If you’re just looking for something light and quick, you may want to use Netlify or Amplify.

请注意，这是一个冗长的教程，针对的是那些最重视与其他AWS服务的灵活性和互操作性的人。 如果您只是想寻找轻便快捷的产品，则可以使用Netlify或Amplify 。

先决条件 (Prerequisites)

I will further assume that:

我将进一步假设：

1. You designed and coded your website or at least have a mockup.您设计并编写了网站代码，或者至少有一个模型。

2. You have an AWS account (if not, go register one. AWS Accounts include one year of free tier access).

   您有一个AWS帐户(如果没有，请注册一个 。AWS帐户包括一年的免费套餐访问权限)。

3. You are familiar with DNS and how it works, at least at a high level.

   您至少在较高级别上熟悉DNS及其工作原理 。

Regarding DNS, a quick explanation is that it’s sort of the directory of the Internet and, just like Google owns google.com, you can own your own domain such as example.com as well. To do it, you have to go a DNS registrar and purchase your the domain you want. I strongly recommend using Namecheap as your registrar, as they have an awesome UI and low prices. As an alternative, you could choose GoDaddy.

关于DNS，一个快速的解释是它是Internet的目录，就像Google拥有google.com ，您也可以拥有自己的域，例如example.com 。 为此，您必须先进行DNS注册，然后购买所需的域名。 我强烈建议使用Namecheap作为您的注册商，因为它们的UI很棒而且价格低廉。 或者，您可以选择GoDaddy 。

In case your “.com” domain is taken and you want some clever mashups, the following sites would be helpful:

如果您的“ .com”域名已被占用，并且想要一些巧妙的混搭，则以下站点会有所帮助：

• LeanDomainSearch

  精益域搜索

• Wordoid

  词义

• Domainr

  领域者

After you purchase it, don’t set any DNS records yet. We’ll do that later once we get to Route53.

购买后，请不要设置任何DNS记录。 一旦到达Route53，我们将在稍后进行。

使用Amazon AWS托管 (Hosting with Amazon AWS)

As mentioned above, the goal is to use a pay-as-you-go service because it’s by far the most cost-effective option out there. I used to pay a fixed cost in the range of tens of USD per month for a server even if I had periods when there was hardly any activity on it.

如上所述，我们的目标是使用即付即用服务，因为它是目前为止最具成本效益的选择。 我曾经为服务器支付每月几十美元的固定成本，即使我几乎没有活动的时间。

However, from my experience, I would recommend that you go modular and go with a pay-as-you-go service such as AWS.

但是，根据我的经验，我建议您采用模块化的方式，并使用按需付费的服务，例如AWS。

Before jumping in, it’s important to grasp the nomenclature:

跳入之前，重要的是要掌握术语：

• AWS: Amazon Web ServicesAWS：Amazon Web服务
• S3: Simple Storage Service, for storing filesS3：简单存储服务，用于存储文件
• Route53: A service for handling DNS recordsRoute53：用于处理DNS记录的服务
• CloudFront: content delivery network (CDN) for speeding up your website, also required to generate the SSL certificateCloudFront：内容交付网络(CDN)，用于加速您的网站，生成SSL证书也需要

Here’s a neat Mindmap designed with Cloudcraft for what you’re going to build:

这是由Cloudcraft设计的整洁的思维 导图，用于您要构建的东西：

We’ll first focus on the path on the right-hand side, so the normal configuration (with Route53, CloudFront and S3), not the one for the www subdomain. Importantly, using this modular configuration, you won’t run any backend Linux server at all, so you don’t have to worry about updating or patching anything. How convenient is that?

我们将首先关注右侧的路径，因此是正常配置(使用Route53，CloudFront和S3)，而不是www子域的配置。 重要的是，使用这种模块化配置，您根本不会运行任何后端Linux服务器，因此您不必担心更新或打补丁。 那有多方便？

亚马逊简单仓储服务(S3) (Amazon Simple Stoarage Service (S3))

This is where you’ll store your static files (HTML, CSS, JavaScript). If you used Create React App or some other frontend development framework, look for your generated “build” or “public” folder.

您将在此处存储静态文件(HTML，CSS，JavaScript)。 如果使用Create React App或其他前端开发框架，请查找生成的“ build”或“ public”文件夹。

Here’s what you have to do:

这是您要做的：

1. Set up an S3 bucket named “example.com”. Notice that S3 bucket names are global and, just like with domains, you’ll have to find another name if someone has taken example.com before you. Based on your needs, you can enable or disable the options AWS provides you: versioning, server access logging, encryption, etc.

   设置一个名为“ example.com”的S3存储桶。 请注意，S3存储桶名称是全局名称，就像域一样，如果有人在使用example.com之前，则必须查找其他名称。 根据您的需求，您可以启用或禁用AWS提供的选项：版本控制，服务器访问日志记录，加密等。

2. Make sure to uncheck the boxes that mention blocking and removing public access ACLs and policies. Many times, S3 buckets are used to store private data, so AWS optimises the configuration for highly secure configurations. In your case though, you want to have the bucket publicly accessible.确保取消选中提到阻止和删除公共访问ACL和策略的复选框。 很多时候，S3存储桶用于存储私有数据，因此AWS会针对高度安全的配置优化配置。 不过，就您而言，您想让存储桶可公开访问。

3. Make sure to set a policy, here’s an example.

   请确保设置一个策略，这是一个示例 。

4. Activate “Static website hosting” for your bucket and check “Use this bucket to host a website”为您的存储桶激活“静态网站托管”，然后选中“使用此存储桶托管网站”
5. Upload your files, making sure “index.html” is at the root of your bucket上传文件，确保“ index.html”位于存储桶的根目录

All the operations above can be done using either the AWS Management Web Console or the AWS CLI. Specifically for step 4 though, I’d recommend doing it in the console so that you can get the endpoint for your new hosted website (I hid mine for privacy reasons):

可以使用AWS Management Web Console或AWS CLI完成上述所有操作。 不过，特别针对第4步，我建议在控制台中执行此操作，以便获取新托管网站的端点(出于隐私原因，我将其隐藏了)：

Test it out in the browser to make sure you set up your S3 bucket correctly. It should like this:

在浏览器中对其进行测试，以确保正确设置了S3存储桶。 它应该像这样：

example.com.s3-website.your-region.amazonaws.com

example.com.s3-website.your-region.amazonaws.com

CloudFront (CloudFront)

To host a static website, you don’t actually need CloudFront or any other CDN, because there’s not much data to store and the gains in efficiency and UX are little. However, one of the original goals was to have a website secured by an SSL certificate so we’ll be using CloudFront.

要托管一个静态网站，您实际上不需要CloudFront或任何其他CDN，因为不需要存储太多数据，并且效率和UX收益很少。 但是，最初的目标之一是使用SSL证书保护网站，因此我们将使用CloudFront。

Now, you might’ve heard about CloudFlare, which is arguably the easiest way to get up and running with a CDN and it also provides the benefit of some SSL security. I say “some” because they have this misleading feature called “Flexible SSL”, which doesn’t have the security guarantees a self-signed SSL certificate has.

现在，您可能已经听说过CloudFlare，它可以说是CDN上线和运行的最简单方法，它还提供了一些SSL安全性。 我之所以说“有些”，是因为它们具有这种被误导的功能，称为“灵活SSL”，该功能不具有保证自签名SSL证书具有的安全性 。

Therefore, you’re not going to use that, but instead make use of a similar service in AWS called CloudFront. You can think of it as having your own content distribution servers, as data is cached in multiple locations around the world to provide your users fast response times. More important for the static website, it also makes using an SSL certificate possible.

因此，您将不使用它，而是使用AWS中称为CloudFront的类似服务。 您可以将其视为拥有自己的内容分发服务器，因为数据被缓存在世界各地的多个位置，以为用户提供快速的响应时间。 对于静态网站更重要，它也使使用SSL证书成为可能。

Again, you can create your CloudFront distribution using the AWS administrator interface or the CLI tool. Here’s an example configuration.

同样，您可以使用AWS管理员界面或CLI工具创建CloudFront分配。 这是一个示例配置 。

Caveats:

注意事项：

1. The origin name should be the endpoint you got after activating “Static website hosting” on your S3 bucket.原始名称应该是在S3存储桶上激活“静态网站托管”后获得的端点。
2. Do NOT set any “DefaultRootObject”. Leave it empty.不要设置任何“ DefaultRootObject”。 留空。
3. Allow both HTTP and HTTPS. You’ll be able to automatically redirect users from HTTP to HTTPS after the certificate is signed and installed.同时允许HTTP和HTTPS。 签署并安装证书后，您将能够自动将用户从HTTP重定向到HTTPS。

Make sure to wait a while for the distribution to properly boot (can take up to 15 minutes). Test it by opening the endpoint you receive, your S3 static website should pop up. The endpoint should look like this:

请确保稍等片刻，以使发行版正确启动(最多可能需要15分钟)。 通过打开收到的端点进行测试，您的S3静态网站应该会弹出。 端点应如下所示：

13fb4knzujxq0b.cloudfront.net

13fb4knzujxq0b.cloudfront.net

Note down your CloudFront endpoint somewhere because we’ll use it with Route53 in a sec.

在某个地方记下您的CloudFront端点，因为我们将在几秒钟内将其与Route53一起使用。

53路 (Route53)

It’s time to connect the domain you bought on your DNS registrar with CloudFront and S3. Route53 acts as the bridge for that.

现在该将您在DNS注册表中购买的域与CloudFront和S3连接起来了。 Route53充当了桥梁。

Here is what you’ll have to do configure Route53 and connect the domain with CloudFront:

这是您必须配置Route53并将域与CloudFront连接的步骤：

1. Create a Route53 hosted zone and set your domain. Make it public.创建一个Route53托管区域并设置您的域。 公开。

2. You’ll be given 4 NS records. Copy and paste the nameservers in your external domain administration page. If you’re using Namecheap, here’s how you can update your nameservers. Within Namecheap, Go to Account -> Dashboard -> Manage -> Nameservers -> Custom DNS and put your 4 nameservers in there:

   您将获得4条NS记录。 将名称服务器复制并粘贴到您的外部域管理页面中。 如果您使用的是Namecheap ，则可以按照以下方法更新名称服务器。 在Namecheap中，转到帐户->仪表板->管理->名称服务器->自定义DNS，然后将您的4个名称服务器放在其中：

3. Create a record set and leave the name empty (it will default to example.com). Then you’d need to:

3.创建一个记录集，并将名称保留为空(默认为example.com)。 然后，您需要：

• Set the type to “A — IPv4 address”将类型设置为“ A-IPv4地址”
• Respond with “Yes” to “Alias” and set the alias target to your CloudFront distribution URL.对“别名”回答“是”，并将别名目标设置为您的CloudFront分发URL。
• Keep the routing policy as “Simple” and, based on your budget and needs, enable or disable “Evaluate Target Health”.保持路由策略为“简单”，并根据您的预算和需求启用或禁用“评估目标运行状况”。

4. Repeat step 3 for type “AAAA - IPv6 address” if you enabled your CloudFront distribution to be IPv6 compatible. If you followed this tutorial, IPv6 was enabled by default.

4.如果您使CloudFront分配兼容IPv6，请对类型“ AAAA-IPv6 address”重复步骤3。 如果您遵循本教程，则默认情况下启用IPv6。

Note that DNS propagation can take up to 72 hours, although it should be normally updated within a few hours or faster. If you previously set any other DNS records (like MX for work emails), you’ll have to reset them in Route53.

请注意，DNS传播最多可能需要72个小时 ，尽管通常应在几小时或更短的时间内进行更新。 如果您以前设置了其他任何DNS记录(例如MX用于工作电子邮件)，则必须在Route53中将其重置。

设置您的WWW子域 (Setting up your WWW subdomain)

Congrats for getting this far! I’m sorry to let you know that now you have to repeat all the previous three steps. Yes, you heard that right, because of the elusive way the Internet works, www is not something included as a holistic component of HTTP.

恭喜！ 很抱歉让您知道，现在您必须重复前面的所有三个步骤。 是的，您没听错，由于Internet难以捉摸的方式， www不包含在HTTP的整体组件中。

It is important to point out that it’s really not mandatory to add a www subdomain to your website and you can safely proceed to the next step if you’re fine with your end users not being able to access your website via www.example.com. I was a bit pedantic about it and I simply had to add the www subdomain.

重要的是要指出，向您的网站添加www子域并不是强制性的， 如果您认为最终用户无法通过www.example.com访问您的网站，可以放心地进行下一步。 。 我对此有点儿痴迷，只需要添加www子域。

Notes:

笔记：

1. Redo only the steps for S3, CloudFront and Route53, you don’t have to (and can’t) go to Namecheap to buy www.example.com.

   只需重做S3，CloudFront和Route53的步骤，就不必(也不能)去Namecheap购买www.example.com 。

2. For all the fields where you were asked to put example.com, now put www.example.com.

   对于要求您输入example.com所有字段，现在输入www.example.com 。

If you wonder whether by creating S3 buckets, it means you are required to deploy your static files to both of them, the answer is no, you don’t have to do that. When you activate “Static website hosting” for your second S3 bucket, select “Redirect requests” instead of “Use this bucket to host a website”:

如果您想知道是否通过创建S3存储桶，这意味着您需要将静态文件部署到这两个存储桶，答案是否定的，那么您不必这样做。 当您为第二个S3存储桶激活“静态网站托管”时，请选择“重定向请求”，而不是“使用此存储桶托管网站”：

SSL证书 (SSL Certificate)

LetsEncrypt is one of the best things that happened to the Internet in the last couple of years. They have democratised access to SSL certificates and this is a huge accomplishment, kudos to them! If LetsEncrypt was so helpful to you, consider making a donation.

LetsEncrypt是最近几年发生在Internet上的最好的事情之一。 他们使对SSL证书的访问民主化，这是一个巨大的成就，对他们而言是荣誉！ 如果LetsEncrypt对您有很大帮助，请考虑进行捐赠 。

This step is crucial and also the hardest in the whole tutorial, so proceed carefully. You could use either your own machine or a Linux server to generate the certificate, but I chose the former option, it’s simpler and less expensive.

此步骤至关重要，也是整个教程中最难的一步，因此请谨慎进行。 您可以使用自己的计算机或Linux服务器来生成证书，但是我选择了前一个选项，它更简单且更便宜。

1. Head to the certbot-s3front repo and install the tool. You need to have Python and pip installed.

   前往certbot-s3front存储库并安装该工具。 您需要安装Python和pip。

2. Follow their instructions, but (1) skip the S3 and CloudFront parts, you had already done that and (2) set “example.com,www.example.com" as the value for the “-d” (domain) parameter. Read more about this on the LE forum.

   遵循他们的指示，但是(1)跳过了S3和CloudFront部分，您已经做到了，并且(2)将“ example.com， www.example.com ”设置为“ -d”(域)参数的值。在LE 论坛上阅读有关此内容的更多信息。

3. After you successfully generate your SSL certificate, you could optionally enable “Redirect HTTP to HTTPS” on your naked domain (that is, “example.com”) CloudFront distribution. Don’t do this for “www”, as it’ll redirect to your naked domain anyway.成功生成SSL证书后，您可以选择在CloudFront分发的裸域(即“ example.com”)上启用“将HTTP重定向到HTTPS”。 不要对“ www”执行此操作，因为它仍将重定向到您的裸域。

4. Make sure to backup your /etc/letsencrypt/live/example.com certificate(s).

   确保备份您的/etc/letsencrypt/live/example.com证书。

Notes:

笔记：

1. Due to mysterious reasons, I couldn’t make certbot’s authentication work by setting the “AWS_ACCESS_KEY_ID” and “AWS_SECRET_ACCESS_KEY” environment variables. This might be caused by the fact that I have several different profiles in my ~/.aws/credentials, but I'm not sure. To avoid a "NoCredentialsError", just temporarily set a "default" profile and certbot will pick that up.

   由于神秘的原因 ，我无法通过设置环境变量“ AWS_ACCESS_KEY_ID”和“ AWS_SECRET_ACCESS_KEY”来使certbot进行身份验证。 这可能是由于我的~/.aws/credentials有多个不同的配置文件，但是我不确定。 为避免出现“ NoCredentialsError”，只需临时设置一个“默认”配置文件，然后certbot会进行选择。

2. If you’re unlucky like me and you get a further “IAMCertificateId” error, check out this solution.

   如果您像我这样不幸，又遇到了另一个“ IAMCertificateId”错误，请查看此解决方案 。

ACM (ACM)

Shortly after this article was published, a lot of people jumped in to say that it’d be much easier to use the AWS Certificate Manager (ACM) for generating certificates. No need to think about renewals, but it means you’re locked in with AWS.

在这篇文章发表后不久，很多人都说使用AWS Certificate Manager(ACM)生成证书要容易得多。 无需考虑续订，但这意味着您已被AWS锁定。

瓶颈 (Bottlenecks)

1. No server logic: This tutorial is only applicable to static websites, so you cannot run any backend logic using a Node.js module like ExpressJS. For that, you can either spin up an EC2 instance, write Lambda functions or use Docker via ECS/ Kubernetes.

   没有服务器逻辑：本教程仅适用于静态网站，因此您不能使用ExpressJS之类的Node.js模块运行任何后端逻辑。 为此，您可以启动EC2实例，编写Lambda函数或通过ECS / Kubernetes使用Docker。

2. LetsEncrypt certificates expire in 90 days: You can solve this in two ways. Firstly, you could set a reminder in your calendar, which I admit is suboptimal, but I’m in an experimentation phase so I'm not bothered by a bit of manual work. Secondly, you could set a cron job, but you need a Linux server and use the “ — renew-by-default — text” options when interacting with certbot.LetsEncrypt证书将在90天后过期：您可以通过两种方式解决此问题。 首先，您可以在日历中设置一个提醒，我认为这是次优的选择，但是我处于实验阶段，因此不必为手动操作而烦恼。 其次，您可以设置cron作业，但是您需要Linux服务器，并在与certbot交互时使用“-默认更新-文本”选项。

3. Rich link previews can be a mess: This could be a problem specific to my Hugo theme, but I also think everyone wants to have a proper preview image and description when sharing their website links. Here’s how I managed to do it.

   丰富的链接预览可能会一团糟：这可能是我的Hugo主题特有的问题，但是我也认为每个人都希望在共享其网站链接时拥有正确的预览图像和说明。 这是我设法做到的方式。

结语 (Wrap-Up)

Congrats, you now have a really cheap but still highly flexible static website! Billing stats for 100 - 1000 monthly active visitors and fairly frequent S3 deployments are between $1 and $2, so this is a steal! For usage way beyond that, you may need to upgrade your AWS components, but this is outside the scope of this tutorial.

恭喜，您现在拥有一个真正便宜但仍然高度灵活的静态网站！ 100-1000个月活跃访问者和相当频繁的S3部署的计费统计信息在$ 1到$ 2之间 ，所以这实在是便宜！ 对于超出此范围的使用方式，您可能需要升级您的AWS组件，但这不在本教程的范围之内。

If you’re an experienced developer interested to replicate this tutorial on multiple AWS accounts, you may want to check out Terraform. It’s a super duper cool Infrastructure-as-a-Service tool which you can use to define your S3, CloudFront and Route53 as code snippets. Isn’t technology so dang amazing?

如果您是一位经验丰富的开发人员，并且有兴趣在多个AWS帐户上复制本教程，则可以查看Terraform 。 这是一个超级傻瓜的“基础架构即服务”工具，可用于将S3，CloudFront和Route53定义为代码段。 技术不是那么惊人吗？

Hope you find this tutorial helpful! Find me on Twitter or Keybase if you want to chat.

希望本教程对您有所帮助！ 如果您想聊天，请在Twitter或Keybase上找到我。

学分 (Credits)

• Amazon for the AWS, S3, CloudFront and Route53 logos

  适用于AWS，S3，CloudFront和Route53徽标的Amazon

Originally published on paulrberg.com

最初发布在paulrberg.com

翻译自: https://www.freecodecamp.org/news/how-to-host-a-static-website-with-s3-cloudfront-and-route53-7cbb11d4aeea/

cloudfront s3