本文共 17695 字，大约阅读时间需要 58 分钟。
aws s3 静态网站
S3 and CloudFront are AWS cloud services that make serving static assets powerful and cheap. How can we host a simple static website or JAMstack app on it?
S3和CloudFront是AWS云服务，使服务静态资产功能强大且价格便宜。 我们如何在其上托管简单的静态网站或JAMstack应用程序？
If you’re not familiar, (Amazon Web Services) is a cloud service provider that gives developers opportunities to build pretty much anything they can imagine in the cloud.
如果您不熟悉， (Amazon Web Services)是云服务提供商，它为开发人员提供了构建几乎所有他们可以在云中想象的东西的机会。
Though their extend beyond the likes of and , we’re going to stick with the entry level services for the purpose of this guide that will allow us to easily host an HTML website.
尽管它们的不仅仅局限于和 ，但出于本指南的目的，我们将继续使用入门级服务，这将使我们能够轻松托管HTML网站。
Building a site with S3 and CloudFront is a common recipe that small and high scale companies across the web use, but let’s break down what each service actually does.
使用S3和CloudFront构建站点是小型和大型公司在网络上使用的常见方法，但是让我们分解一下每个服务的实际作用。
(Simple Storage Service) acts as your hosting for your static website. Think of it like a hard drive in the cloud which we’re not able to use it for processing purposes, but rather for simple file storage and access.
(简单存储服务)充当静态网站的托管。 可以将其视为云中的硬盘驱动器，我们无法将其用于处理目的，而仅用于简单的文件存储和访问。
When an app or website is compiled in static form, this is all we need to serve it to the people visiting our site. The HTML is sent in the initial request “as is” (unless there’s processing with your provider) and any additional work occurs after the page loads in the browser usually by JavaScript. This allows us to take this simple (and cheap) approach by serving these files from S3.
当应用或网站以静态形式编译时，这就是我们需要将其提供给访问我们网站的人们的全部条件。 HTML是在初始请求中“按原样”发送的(除非提供者正在处理)，并且通常在JavaScript将页面加载到浏览器中之后，才会进行其他工作。 这使我们能够通过从S3提供这些文件来采用这种简单(且便宜)的方法。
works as a (Content Delivery Network) that sits in front of your website, caching the files, and serving them directly to the people visiting your site.
充当 (内容交付网络)，它位于您网站的前面，缓存文件，并将其直接提供给访问您网站的人。
Where you host and serve your website from, typically called the origin, is the main source of your files and can serve the website itself. But putting a CDN in front of it provides the people accessing your content a shorter and faster way to make their request.
文件的主要来源是托管和服务网站的来源(通常称为来源)，并且可以为网站本身提供服务。 但是将CDN置于其前面，可以使访问您内容的人们以更短，更快的方式提出他们的请求。
Given the rise in the era, many services are popping up that provide similar services for static sites that make it really easy to deploy. Some even come with a generous free tier like and !
鉴于时代的兴起， 许多服务，它们为静态站点提供了类似的服务，从而使其真正易于部署。 有些甚至带有慷慨的免费 ，例如和 ！
But sometimes developers need a little bit more control over their services or they need to integrate into a larger cloud pipeline that’s already 99% percent in AWS, which is exactly where S3 shines. Also, chances are, during your first year you might still qualify for AWS’s .
但是有时开发人员需要更多地控制他们的服务，或者他们需要集成到更大的云管道中，该管道在AWS中已经占99％，这正是S3的亮点。 此外，很有可能在您的第一年中，您仍然有资格获得AWS的 。
As a lead provider in cloud services, AWS has published many guides to help developers and teams strive for excellence in their solutions in terms of performance, cost, and security.
作为云服务的领先提供商，AWS已发布了许多指南，以帮助开发人员和团队在性能，成本和安全性方面寻求卓越的解决方案。
One particular guideline is their 5 pillars of what they describe as a .
其中一个特定的指导原则是其所谓的的5个Struts。
By default, we check all of these boxes with our hosting solution by using S3 and CloudFront. Out of the box, the HTML and assets you serve will be fast, cheap, secure, and reliable.
默认情况下，我们使用S3和CloudFront在我们的托管解决方案中选中所有这些框。 开箱即用，您提供HTML和资产将快速，廉价，安全和可靠。
Building on top of the pillars, what you’re actually serving is a static HTML file and group of assets that won’t require any type of rendering resources on the initial request. Before this, a common problem was having to worry about a site crashing due to heavy load. But with S3 and CloudFront, your website is infinitely scalable.
在Struts之上构建的服务，实际上是一个静态HTML文件和一组资产，这些资产在初始请求时不需要任何类型的渲染资源。 在此之前，一个常见的问题是必须担心由于高负载而导致站点崩溃。 但是使用S3和CloudFront，您的网站可以无限扩展。
On a similar note, when that server scales up as it's trying to serve millions of hits on your post that went viral, so will your costs. Serving a static site is cheap and can greatly reduce the cost associated with running a web server.
与此类似，当该服务器尝试为病毒式传播的帖子提供数百万次点击时，如果该服务器规模扩大，那么您的费用也将随之增加。 为静态站点提供服务很便宜，并且可以大大降低与运行Web服务器相关的成本。
To work through this guide, you’ll need an AWS account. Luckily, it's free to create an account – you’ll only pay for the services used.
要完成本指南，您需要一个AWS账户。 幸运的是，创建帐户是免费的-您只需为使用的服务付费。
On top of that, AWS provides a generous free tier for some of its services. Some services provide only 12 months of a free tier (like S3) where others are always eligible for the free tier (like ), so make sure to do your homework so you don’t rack up an unexpectedly high bill.
最重要的是，AWS为某些服务提供了免费的免费套餐。 某些服务仅提供12个月的免费套餐(如S3)，而其他服务始终有资格享受免费套餐(如 )，因此请务必做功课，以免产生意想不到的高额账单。
To create your account, head over to the AWS website and then continue on to get started: .
要创建您的账户，请转到AWS网站，然后继续入门： : 。
To get started, we’re going to begin with a simple HTML file that will serve as our website. This will allow us to focus more on the process of hosting rather than the intricacies of the website itself.
首先，我们将从一个简单HTML文件开始，它将作为我们的网站。 这将使我们更加专注于托管过程，而不是网站本身的复杂性。
Begin by creating a new folder called my-static-site. Inside that folder, let's create a new file called index.html and add the following to the file:
首先创建一个名为my-static-site的新文件夹。 在该文件夹内，让我们创建一个名为index.html的新文件，并将以下内容添加到该文件中：
My Static Website Hello World!
This is my static website. 🚀
If you open this file from your computer in your favorite browser, you should now be seeing this.
如果您从计算机上使用自己喜欢的浏览器打开此文件，现在应该会看到此文件。
Head on over to your AWS account, log in, and navigate to your .
转到您的AWS账户，登录并导航到 。
Once there, let’s create our bucket by clicking on the blue Create bucket button:
到达那里后，让我们通过单击蓝色的“ 创建存储桶”按钮来创建存储桶 ：
The first thing AWS wants us to do is enter a Bucket name. The bucket name must be globally unique, meaning, the name you use can be the only one in the world, so let’s try something like [yourname]-static-website, where I’ll use colbyfayock-static-website.
AWS希望我们做的第一件事是输入Bucket名称 。 存储桶名称必须是全局唯一的，这意味着您使用的名称可能是世界上唯一的名称，因此让我们尝试使用[yourname]-static-website类的东西，在这里我将使用colbyfayock-static-website 。
Next, let’s set the . This is the geographic location where AWS will host the bucket and your website. You’re probably fine with the default, but if you’d like, you can select the location closest to you if it’s permitted. Since I’m in Virginia, I’m going to stick with my default of US East (N. Virginia).
接下来，让我们设置 。 这是AWS将托管存储桶和您的网站的地理位置。 您可以使用默认设置，但如果需要，可以选择最接近您的位置。 由于我在弗吉尼亚州，因此我将继续使用默认的美国东部(弗吉尼亚北部) 。
Finally, hit the Create button on the bottom left of the page.
最后，点击页面左下方的“ 创建”按钮。
Note: even if you use the [yourname]-static-website pattern, there’s a chance the name will be taken. If it’s taken, AWS will show an error stating “Bucket name already exists,” at which point you’ll want to try a new name of your choosing.
注意：即使您使用[yourname]-static-website您的名字[yourname]-static-website模式，也有可能会使用该名字。 如果采用此选项，AWS将显示一条错误消息，指出“存储桶名称已存在”，此时，您将要尝试使用自己选择的新名称。
Alternatively, you can hit Next for advanced usage, but for this guide, we’re okay with all of the defaults S3 provides.
另外，您可以单击“ 下一步”以获得高级用法，但是对于本指南，我们可以使用S3提供的所有默认设置。
If successful, you should now see your bucket in the list on the S3 console dashboard.
如果成功，您现在应该在S3控制台仪表板上的列表中看到您的存储桶。
Let’s navigate to our new bucket by clicking the row of our bucket. You’ll be greeted with a message stating “This bucket is empty. Upload new objects to get started,” so that’s what we’ll do.
通过单击存储桶的行，导航到新存储桶。 将会收到一条消息，提示您“此存储桶是空的。 上传新对象以开始使用”，这就是我们要做的。
Click the Upload button to get started.
点击上传按钮开始使用。
You’ll then see a popup that will ask you to upload a file. Click on the Add files button and select your index.html file we created earlier.
然后，您会看到一个弹出窗口，要求您上传文件。 单击添加文件按钮，然后选择我们之前创建的index.html文件。
Once selected, click the Upload button on the bottom left.
选择后，点击左下角的上传按钮。
And now your file is uploaded to S3!
现在，您的文件已上传到S3！
If you try to navigate to your index.html file and open it, you’ll notice a big ugly "Access Denied" message.
如果您尝试导航到index.html文件并打开它，则会注意到一条难看的“拒绝访问”消息。
This is because your file doesn’t currently have the permissions and settings necessary to serve the file to the public, so let’s fix that.
这是因为您的文件当前不具有向公众提供该文件所需的权限和设置，因此让我们对其进行修复。
Navigate to the Properties tab inside of your bucket, then click Static website hosting.
导航到存储桶中的“ 属性”标签，然后点击静态网站托管 。
Once there, we want to do a few things:
到达那里后，我们想做一些事情：
Note down the Endpoint at the top of the block. We’ll use this to access our site later (you can always find this here again)
记下模块顶部的端点 。 我们稍后将使用它来访问我们的网站(您随时可以在这里再次找到它)
Enter index.html in the Index document field
在索引文档字段中输入index.html
Finally hit Save
最后点击保存
Next, navigate to the Permissions tab. Here we’ll want to do 2 things: unblock all public access and add a Bucket Policy.
接下来，导航到“ 权限”选项卡。 在这里，我们要做两件事：取消阻止所有公共访问并添加存储桶策略。
First, on the main page, let’s click Edit to unblock all access.
首先，在主页上，单击“ 编辑”以取消阻止所有访问。
Then, uncheck the “Block all public access” checkbox and hit Save.
然后，取消选中“阻止所有公共访问”复选框，然后点击“ 保存” 。
AWS will ask you to confirm these settings, as this may not always be what you want to do with your bucket. But for the purposes of hosting a website, we want the whole world to see, so type in the word “confirm” and hit the Confirm button.
AWS会要求您确认这些设置，因为这可能并不总是您想要对存储桶执行的操作。 但是出于托管网站的目的，我们希望全世界都能看到，因此输入“ confirm”一词并单击“ Confirm”按钮。
After confirming, click the Bucket policy button and you’ll be taken to a text editor.
确认后，单击“ 存储桶策略”按钮，您将被带到文本编辑器。
In this text box, we’ll want to paste the following snippet. Within this snippet, make sure to replace [your-bucket-name] with the name of your bucket, otherwise you will not be able to save this file.
在此文本框中，我们将粘贴以下代码段。 在此代码段中，请确保将[your-bucket-name]替换为[your-bucket-name] ，否则您将无法保存此文件。
{ "Version":"2012-10-17", "Statement":[{ "Sid":"PublicReadGetObject", "Effect":"Allow", "Principal": "*", "Action":["s3:GetObject"], "Resource":["arn:aws:s3:::[your-bucket-name]/*” ] } ]} states that it’s allowing the public to perform a GetObject request on the S3 resource, which is your S3 bucket.
声明它允许公众对S3存储桶S3资源执行GetObject请求。
After you add the policy, click the Save button. Your should now see a message stating "This bucket has public access.”
添加策略后，单击“ 保存”按钮。 您现在应该看到一条消息，指出“此存储桶具有公共访问权限。”
If you noted down the Endpoint from your Properties page, you can now visit that address to see your website. The endpoint should look like this:
如果您从“属性”页面记下了“端点”，则现在可以访问该地址以查看您的网站。 端点应如下所示：
http://[your-bucket-name].s3-website-[region-id].amazonaws.com
If you didn’t, jump back up a few steps to remind yourself how to find it or look under the Properties tab.
如果没有，请跳回几步以提醒自己如何查找或在“属性”选项卡下查找。
Congrats, you're halfway there! 🎉
恭喜，您已经中途了！ 🎉
Now that we have our static website being served from a bucket on S3, let’s take it up another level and serve it across the world using CloudFront.
现在我们可以从S3的存储桶中访问静态网站，让我们再上一个台阶，并使用CloudFront在全球范围内提供服务。
Navigate to your and click the Create Distribution button.
导航到您的 ，然后单击“ 创建分发”按钮。
Next, select Get Started under the Web delivery method.
接下来，在Web传递方法下选择“入门 ”。
Here, we’ll enter a few custom parameters to get our distribution set up.
在这里，我们将输入一些自定义参数来设置我们的发行版。
Click into the Origin Domain Name field. Once selected, a dropdown list should appear where you can select the S3 bucket you just created. Go ahead and select your S3 bucket.
单击进入“ 原始域名”字段。 选择后，将出现一个下拉列表，您可以在其中选择刚刚创建的S3存储桶。 继续并选择您的S3存储桶。
While you can to your liking, for our purposes, we’re going to leave all as their default values except for one.
虽然您可以自己的喜好 ，但出于我们的目的，我们将保留所有设置作为默认值，唯一的一项除外。
Scroll down to the Default Root Object field and type index.html.
向下滚动到“ 默认根对象”字段，然后键入index.html 。
After, scroll down to the bottom and click Create Distribution in the bottom right.
之后，向下滚动到底部，然后单击右下角的“ 创建分发 ”。
After hitting the Create button, it will take some time for your distribution to be created and set up. You’ll notice on the CloudFront Distributions list page that the Status of your new distribution is In Progress.
点击创建按钮后，将需要一些时间来创建和设置您的发行版。 您会在CloudFront分配列表页面上注意到新分配的状态为“ 进行中” 。
Once this completes, it will say Deployed. Then you can find your Domain Name in the same row.
完成后，将显示Deployed 。 然后，您可以在同一行中找到您的域名 。
Using the value in the Domain Name column, open your distribution in your browser and success! You now are viewing your S3 bucket through CloudFront’s distribution network.
使用“域名”列中的值，在浏览器中打开分发并成功！ 现在，您正在通过CloudFront的分发网络查看S3存储桶。
While most of us will probably want to use a custom domain name with our website, we’re not going to dive too deep into that this guide, as there are many ways to set that up depending on where you purchase your domain name.
虽然我们大多数人可能希望在我们的网站上使用自定义域名，但我们不会深入研究该指南，因为有很多方法可以根据您在哪里购买域名进行设置。
However, here are a few things to consider.
但是，这里有几件事要考虑。
If you’re creating your CloudFront distribution to use with a custom domain name, you'll most likely want to configure your distribution with an using AWS’s . Alternatively you can provide your own certificate with tools like , but by using ACM, AWS makes it easy to pull in the records for use with your distribution.
如果要创建要与自定义域名一起使用的CloudFront分配，则很可能要使用AWS的为您的分配配置 。 或者，您可以使用类工具提供自己的证书，但是通过使用ACM，AWS可以轻松提取记录以供您的发行版使用。
Once in ACM, you’ll want to configure the certificate, map what domains and subdomains should match (typically *.domain.com), and then create your certificate to use with your distribution.
进入ACM后，您将需要配置证书，映射应该匹配的域和子域(通常为*.domain.com )，然后创建要与分发一起使用的证书。
To get started, you can check out the AWS guide for .
首先，您可以查看AWS指南以 。
A common approach to setting up a custom domain is to use a CNAME. CloudFront makes this pretty painless, as you’ll add it as a configuration option when you’re configuring your distribution.
设置自定义域的常见方法是使用CNAME。 CloudFront使这一过程变得很轻松，因为在配置发行版时将其添加为配置选项。
To get started with setting up a CNAME in CloudFront, .
要开始在CloudFront中设置CNAME， 。
If you’re using to manage your , you can then set up an A record (alias) to point to your distribution. You can learn more .
如果您使用管理 ，则可以设置A记录(别名)以指向您的分发。 您可以了解更多信息。
For this guide, we walked you through setting up a new static website and app using the AWS console. But whether you want to learn more, improve your deploy efficiency, or want to automate this process, you’ll want to take a it a step further with the AWS CLI or CloudFormation.
对于本指南，我们将引导您使用AWS控制台设置新的静态网站和应用程序。 但是，无论您是想了解更多信息，提高部署效率还是要自动化该过程，您都希望使用AWS CLI或CloudFormation进一步走下去。
While we won’t walk you through how to use these tools here, we’ll get you started with a little bit of an idea of what you’re up against.
虽然我们不会在这里逐步指导您如何使用这些工具，但可以让您开始了解您要面对的挑战。
The allows someone to perform AWS operations from the command line. This can be incredibly powerful when you want to script out your resource creation or if you simply prefer to do all of your work from the terminal.
允许某人从命令行执行AWS操作。 当您想编写资源创建脚本或只是简单地希望从终端上完成所有工作时，此功能可能会非常强大。
Once set up locally, you’ll be able to perform actions like creating a bucket using the following command:
在本地设置后，您将可以使用以下命令执行类似创建存储区的操作：
aws s3api create-bucket —-bucket [your-bucket-name] —-region [bucket-region]
To get started, check out the AWS CLI or the AWS CLI .
首先，请查看《 AWS CLI 或《 AWS CLI 。
AWS preaches “infrastructure as code.” It’s the idea that you can spin up your infrastructure using something that’s written in a file, where in this particular case, it would be a CloudFormation template. This allows you to have a repeatable process that will be the same each time you perform the deploy.
AWS宣扬“基础架构即代码”。 这个想法是，您可以使用文件中编写的内容来加速基础架构，在这种情况下，它就是一个CloudFormation模板。 这使您可以有一个可重复的过程，该过程在每次执行部署时都相同。
allows you to set up a configuration file that will deploy the services and resources of your choosing by pointing to that file with the CLI or by uploading it in the console.
允许您设置配置文件，该配置文件将通过使用CLI指向该文件或将其上传到控制台中来部署您选择的服务和资源。
Here’s an of what that looks like for a static S3 bucket that could serve as a website.
这是的一个该看起来像可以用作网站的静态S3存储桶。
To get started, check out AWS’s CloudFormation or their .
要开始使用，请查看AWS的CloudFormation 或其 。
If you’re interested in getting deeper into the AWS ecosystem, here are a few resources to get started:
如果您想更深入地了解AWS生态系统，请参考以下一些资源：
(freeCodeCamp.org)
2019-4 (freeCodeCamp.org)
(freeCodeCamp.org)
(freeCodeCamp.org)
(AWS)
(AWS)
(Paid courses)
(付费课程)
(AWS)
(AWS)
翻译自:
aws s3 静态网站
转载地址：http://cbuzd.baihongyu.com/