aws 静态网站_如何使用AWS托管静态网站-入门指南

aws 静态网站

When I created my first portfolio last year, I based it on what I had learned from freeCodeCamp (HTML, CSS and a little JavaScript).

去年创建我的第一个投资组合时，我基于从freeCodeCamp (HTML，CSS和一些JavaScript)中学到的知识。

At that point, I had only viewed my portfolio on localhost by viewing the files on my local computer. I didn’t know anything about how to host a website online.

那时，我只通过查看本地计算机上的文件来查看本地主机上的投资组合。我对如何在线托管网站一无所知。

Learning how to host my first website wasn’t easy but it was a great learning experience. If you're an aspiring web developer or just interested in launching your own static website, then I hope you will find this guide useful.

学习如何托管我的第一个网站并不容易，但这是一次很棒的学习体验。如果您是一个有抱负的Web开发人员，或者只是对启动自己的静态网站感兴趣，那么希望您对本指南有所帮助。

本指南适用于谁？ (Who is this guide for?)

This guide is aimed at complete beginners who want to host a static website (a site with fixed content). I will provide a how-to-guide for the following:

本指南面向希望托管静态网站(内容固定的网站)的完整初学者 。我将提供以下方面的操作指南：

How to buy a domain.
如何购买域名。
How to configure your domain for an external hosting provider.
如何为外部托管服务提供商配置您的域。
How to host your website with Amazon Web Services (AWS).
如何使用Amazon Web Services(AWS)托管您的网站。
How to make your website secure (SSL certification) using Amazon Certification Manager.
如何使用Amazon Certification Manager使您的网站安全(SSL认证)。

There might be some terminology that’s new to you. Please go ahead and look up terms that are not familiar. I’ve put in useful links and explanations where I thought appropriate.

可能有些新术语对您而言。请继续查找不熟悉的术语。我在我认为适当的地方提供了有用的链接和说明。

什么是域名和DNS(域名系统)？ (What is a domain name and DNS (Domain Name System)?)

A domain name is your website address. For example thecodinghamster.com. But for a computer, a domain name is actually a series of numbers (an IP address). An IP address looks like this: 123.321.0.1

域名是您的网站地址。例如thecodinghamster.com。但是对于计算机而言，域名实际上是一系列数字(一个IP地址)。 IP地址如下所示：123.321.0.1

It’s not easy for us to remember a long string of numbers. So your computer refers to a DNS to translate a text based website address into an IP address which it can then understand. A DNS is like a directory.

要记住一长串数字对我们来说并不容易。因此，您的计算机使用DNS来将基于文本的网站地址转换为IP地址，然后它便可以理解该IP地址。 DNS就像一个目录。

I watched this great video which explains domain name, DNS and how this works in under five minutes. Please watch the first five minutes of the video if you're interested:

我观看了这段精彩的视频，讲解了域名，DNS以及如何在不到五分钟的时间里工作。如果您有兴趣，请观看视频的前五分钟：

您可以在哪里购买域名？ (Where can you buy your domain name?)

You can buy a domain name from a domain name registrar. Prices start from a few dollars. Your domain name is unique. Each domain name registrar offers different levels of services/support. But you can register your domain with any registrar.

您可以从域名注册商处购买域名。价格从几美元开始。您的域名是唯一的。每个域名注册商都提供不同级别的服务/支持。但是您可以在任何注册商处注册您的域名。

什么是托管服务提供商？ (What is a hosting provider?)

“An Internet hosting service is a service that runs Internet servers, allowing organizations and individuals to serve content to the Internet. There are various levels of service and various kinds of services offered.”
“ Internet托管服务是一种运行Internet服务器的服务，允许组织和个人将内容提供给Internet。有各种级别的服务和提供的各种服务。”

When I was looking for a hosting provider for my website, I explored different options. The prices ranged from £2.00 — £5.00 per month with various storage options from 0.5GB to 10GB. The prices seemed reasonable but all I wanted to do was host a static website. It had a few images, HTML, CSS and JavaScript files. No dynamic content.

当我为我的网站寻找托管服务提供商时，我探索了不同的选择。价格从每月2.00英镑到5.00英镑不等，提供从0.5GB到10GB的各种存储选项。价格似乎合理，但我只想托管一个静态网站。它有一些图像，HTML，CSS和JavaScript文件。没有动态内容。

为什么选择AWS？ (Why AWS?)

After some further research, I found AWS. AWS offers a free tier option. Essentially, you get lots of free products. Some of them expire after 12 months and others are free in perpetuity. The only cost that you will incur for hosting a static website is the cost of setting up a hosted zone. This cost $0.50 per month. So I went with AWS and set up my account.

经过进一步研究，我发现了AWS。 AWS提供了免费套餐选项。本质上，您可以获得许多免费产品。其中一些在12个月后到期，而其他则永久免费。托管静态网站所需的唯一费用是设置托管区域的费用。每月费用为$ 0.50。因此，我选择了AWS，并设置了我的帐户。

The great thing about AWS is the price and it’s a reliable hosting provider. But one thing to bear in mind is that you’re reliant on their documentation. As I started reading about what services AWS offered, it quickly became confusing! I used the official AWS guide provided for setting up static websites. But I found myself getting lost with clicking on a link to another link and so forth. I started researching other guides to make up for knowledge gaps.

AWS的优点在于价格，它是可靠的托管服务提供商。但是要记住的一件事是，您依赖于他们的文档。当我开始阅读有关AWS提供的服务时，它很快变得令人困惑！我使用了提供的用于建立静态网站的官方AWS 指南。但是我发现自己迷失于单击另一个链接的链接，依此类推。我开始研究其他指南以弥补知识差距。

I found this this excellent guide by Victoria Drake.

我发现了这本维多利亚·德雷克(Victoria Drake)的优秀指南。

I followed Victoria Drake’s guide alongside the AWS one and managed to muddle through. But there were still a few things that were not explained which I hope to flesh out.

我遵循了Victoria Drake的指南以及AWS指南，并设法弄清楚了。但是，还有一些未解释的事情我希望能充实。

Before we proceed, here is your to do list:

在继续之前，这是您的待办事项清单：

Do some research on domain registrars and buy your domain name.
对域名注册商进行一些研究，然后购买您的域名。
Sign up for a free account with AWS.
在AWS上注册一个免费帐户。
Have both the documentation from AWS and Victoria Drake’s guide open. Use my guide to guide you through the documentation (hope that makes sense!).
打开 AWS和Victoria Drake的指南中的文档。使用我的指南来指导您阅读文档(希望如此！)。

Here we go!

开始了！

AWS：在Route 53上创建一个托管区域。 (AWS: Create a Hosted Zone on Route 53.)

Route 53 is where all your DNS requests are handled.

路由53是处理所有DNS请求的地方。

The first thing you must set up is your hosted zone with Route 53. This is really easy if you bought your domain through AWS. A hosted zone is created automatically once you’ve purchase it. If you’ve done this then just skip to the next section (Set up your S3 Buckets).

您必须首先设置的是Route 53托管区域。如果您通过AWS购买了域，这真的很容易。购买后，托管区域会自动创建。如果您已完成此操作，则只需跳至下一部分( 设置S3存储桶 )。

However, if you were like me and bought your domain name via another registrar then please do the following.

但是，如果您像我一样，并通过其他注册商购买了域名，请执行以下操作。

This next part is how to create a Hosted Zone on Route 53 if you haven’t bought your domain name from AWS:

下一部分是如何在尚未从AWS购买域名的情况下如何在Route 53上创建托管区域：

Go to Route 53 in your console and click on “Create Hosted Zone”. Fill in your domain address, comment is optional and choose a “Public Hosted Zone”. Click on “Create”.
转到控制台中的Route 53 ，然后单击“创建托管区域”。填写您的域名地址，注释是可选的，然后选择“公共托管区域”。点击“创建”。

2. Once your hosted zone is created, you need your NS (Name Servers) records:

2.创建托管区域后，您需要NS(名称服务器)记录：

3. Go to your domain name registrar and login. Depending on your registrar, you should find a section in your settings called "Nameservers" which you can edit. You need to copy across the AWS NS records and change the existing NS records in your domain settings.

3.转到您的域名注册商并登录。根据您的注册商，您应该在设置中找到一个可以编辑的部分，称为“名称服务器”。您需要复制整个AWS NS记录并更改域设置中的现有NS记录。

Please note, don't copy the full stop/period at the end of the NS record. For example, is should be “ns-63.awsdns-07.com”, not “ns-63.awsdns-07.com.”

请注意，请勿在NS记录的末尾复制句号/句号。例如，应该是“ ns-63.awsdns-07.com”，而不是“ ns-63.awsdns-07.com”。

It will take up to 24 hours to propagate.

最多可能需要24个小时才能传播。

设置您的S3铲斗 (Set up your S3 Buckets)

In the meantime you can set up your S3 Buckets. The S3 Bucket is the storage for your files such as your index.html.

同时，您可以设置S3存储桶。 S3存储桶是文件(例如index.html)的存储。

You must configure two buckets for your website: 1) yourdomainname.com and 2) www.yourdomainname.com.

您必须为您的网站配置两个存储桶：1)yourdomainname.com和2)www.yourdomainname.com。

The first bucket is your main bucket where you will upload all your documents, such as your index.html. The second bucket redirects to the first bucket. To set up your S3 Buckets, please follow the AWS documentation on how to set up your S3 bucket ( 2: Create and Configure Buckets and Upload Data).

第一个存储桶是您的主存储桶，您将在其中上传所有文档，例如index.html。第二个存储桶重定向到第一个存储桶。要设置S3存储桶，请遵循AWS文档中有关如何设置S3存储桶( 2：创建和配置存储桶以及上传数据 )的信息。

In addition to the documentation, there are a few things to note:

除了文档之外，还有一些注意事项：

In section 2.1 (part 2): click on the link How Do I Create an S3 Bucket? This is a step by step guide and explain all the settings you need to choose.
在第2.1节(第2部分)中：单击链接如何创建S3存储桶？这是一个循序渐进的指南，介绍了您需要选择的所有设置。
In section 2.1 (part 3): you don’t have to upload your website files yet. You can add a test index.html in the meantime.
在第2.1节(第3部分)中：您不必上载网站文件。您可以同时添加一个测试index.html。

Take note of your endpoint. You can find this in your S3 bucket > “Properties” tab > “Static Web Hosting” box. It should look something like this: http://yourdomainname.com.s3-website.eu-west-2.amazonaws.com

注意您的端点。您可以在S3存储桶>“属性”标签>“静态Web托管”框中找到此文件。它应该看起来像这样：http://yourdomainname.com.s3-website.eu-west-2.amazonaws.com

在Route 53中添加Alias /“ A”记录 (Add the Alias/“A” records in Route 53)

Finally go back to Route 53 and open your hosted zone to set up your Alias records. You can follow the documentation on “Step 3: Add Alias Records for example.com and www.example.com”. It is quite straightforward.

最后，回到Route 53并打开您的托管区域以设置Alias记录。您可以按照文件上的“第3步：添加别名记录的example.com和www.example.com”。这很简单。

Once the NS settings have propagated, your site is live! You’ll be able to visit your site at the domain address e.g. yourdomainname.com

NS设置传播后， 您的网站就可以使用了 ！您将可以通过域名地址访问您的网站，例如yourdomainname.com

However, please note that it won’t be secure and you’ll see a http:// prefix in the address bar. I’ll get to that in the next section.

但是，请注意，它并不安全，您将在地址栏中看到一个http：//前缀。我将在下一节中介绍。

如何使您的网站安全，什么是SSL证书？ (How to make your website secure and what is a SSL certificate?)

It’s very important to make your website secure and to do this you’ll need to get an SSL certificate. SSL stands for Secure Sockets Layer and it uses encryption to securely transfer data between a user and site. Google will also give a rankings boost for websites with HTTPS.

确保您的网站安全是非常重要的，为此，您需要获取SSL证书。 SSL代表安全套接字层，它使用加密在用户和站点之间安全地传输数据。 Google还将提高使用HTTPS的网站的排名。

If you secure the website with an SSL certificate, you’ll see https:// and a padlock symbol in your address bar.

如果您使用SSL证书保护网站的安全，则会在地址栏中看到https：//和一个挂锁符号。

There are different types of SSL certificates: Extended Validation Certificate and a Domain validated certificate. For a personal website or blog, only a domain validated certificate is required. You also won’t see the name of your company on the left of the bar like the example above. You only get this if you have an Extended Validation Certificate which is more for large companies/enterprises.

SSL证书有不同类型：扩展验证证书和域验证证书。对于个人网站或博客，仅需要域验证的证书。您也不会在栏的左侧看到公司的名称，如上面的示例。只有拥有扩展验证证书(对于大型公司/企业而言更是如此)，您才能获得此证书。

一个SSL证书要多少钱？ (How much does it cost for an SSL certificate?)

I’ve seen a range of ways of getting an SSL certificate. You can pay a premium for a service that will do this on your behalf or you can do it for free with Let’s Encrypt. Let’s Encrypt is an official Certificate Authority (CA). But you have to renew your certificate every three months and the process is quite complicated.

我已经看到了获取SSL证书的多种方法。您可以为代表您执行此操作的服务付费，也可以通过Let's Encryp t免费获得。让我们加密是一个官方的证书颁发机构(CA)。但是您必须每三个月更新一次证书，过程非常复杂。

I didn’t want to pay a premium or want the hassle of renewing every three months. Conveniently, AWS can issue SSL certificates for a very small fee. You pay $0.75 for each certificate issued and it lasts for one year.

我不想支付任何保费，也不希望每三个月续签一次。方便地，AWS只需支付很少的费用即可颁发SSL证书。您为每张证书支付$ 0.75，证书有效期为一年。

If you choose not to go with AWS, make sure you do your research and choose a trusted CA!

如果您选择不使用AWS，请确保您进行研究并选择受信任的CA ！

如何通过AWS获得SSL证书？ (How do you get an SSL certificate with AWS?)

Log into your AWS console and navigate to the AWS Certificate Manager (ACM).

登录到您的AWS控制台并导航到AWS Certificate Manager (ACM)。

Make sure you change the region from the default (Ohio) to N. Virginia. This is not explicit in the guides and only the N. Virginia region can issue certificates. I learned the hard way and wasted a lot of time!

确保将区域从默认(俄亥俄州)更改为弗吉尼亚北部。 指南中没有明确说明，只有弗吉尼亚北部地区可以颁发证书。我学会了辛苦的方法，浪费了很多时间！

Then click on “Get Started” under “Provision Certificates”.

然后单击“供应证书”下的“入门”。

Follow the documentation with AWS (“Requesting a public certificate using the console”) and use Victoria Drake’s guide (under “SSL certificate”).

请遵循有关AWS的文档 (“使用控制台请求公共证书”)并使用Victoria Drake的指南 (在“ SSL证书”下)。

In addition to the guides there are few things that weren’t fully explained:

除了指南之外，还有一些事情没有完全解释：

You’ll need to validate your domain ownership by email or directly with DNS. I would suggest to always verify ownership by DNS validation.
您需要通过电子邮件或直接通过DNS来验证您的域所有权 。我建议始终通过DNS验证来验证所有权。
Once you’ve requested your certificate you’ll get something like this (except the status will be pending). Click on the “Export DNS Configuration file”:
申请证书后，您将获得类似的信息(状态将处于待处理状态)。单击“导出DNS配置文件”：

It’s an Excel spreadsheet which will contain something like this:

这是一个Excel电子表格，其中将包含以下内容：

You’ll need to add these records to your DNS settings with your registrar. Log in and go to DNS settings. The interface varies with different registrars but you’re looking for your Host records under your DNS settings.
您需要通过注册商将这些记录添加到DNS设置中。登录并转到DNS设置。界面因不同的注册商而异，但您正在DNS设置下查找主机记录。
Click on “Add Record” > record type is CNAME:
点击“添加记录”>记录类型为CNAME ：

You need to add two records: 1) Hostname should be “@” and Target Name should be the Record value from the DNS configuration file.

您需要添加两个记录：1)主机名应为“ @”，目标名称应为DNS配置文件中的“记录”值。

2) Hostname should be * (asterisk) and Target Name should be the Record value from the DNS configuration file.

2)主机名应为*(星号)，目标名应为DNS配置文件中的记录值。

If you want more information about the CNAME and record types, I found this helpful article.

如果您想了解有关CNAME和记录类型的更多信息，请参阅这篇有用的文章。

It's quite long, but I've pulled out the useful part:

这很长，但是我已经抽出了有用的部分：

“Note: Hostname refers to the prefix before the domain name. To create a Blank record, use an @ in the Hostname field. This represents an empty prefix (so the name exactly matches the domain name; for example divapirate.com). The @ hostname is also referred to as the the root of the domain. An * (asterisk) in the Hostname is a wildcard, and represents any prefix. For example, creating a record for *.divapirate.com will point <any prefix>.divapirate.com at the IP address provided.”

“注意：主机名是指域名前面的前缀。要创建空白记录，请在主机名字段中使用@。这表示一个空前缀(因此名称与域名完全匹配；例如divapirate.com)。 @主机名也称为域的根。主机名中的*(星号)是通配符，表示任何前缀。例如，为* .divapirate.com创建一条记录会将<any prefix> .divapirate.com指向所提供的IP地址。”

You just need to wait for the verification. For me, this took about an hour.

您只需要等待验证。对我来说，这花了大约一个小时。

如何添加SSL证书？ (How do you add your SSL certificate?)

With AWS you can add SSL certificate to your website through setting up CloudFront. CloudFront is great for speeding up your website. I used the AWS documentation and Victoria Drake’s guide (look out for her useful tips).

使用AWS，您可以通过设置CloudFront将SSL证书添加到您的网站。 CloudFront非常适合加速您的网站。我使用了AWS文档和Victoria Drake的指南 (请注意她的有用技巧)。

Please note, when you create your CloudFront distribution, there’s a drop down menu to add your SSL certificate. If you have been issued with an SSL certificate already, it will be pre-populated in the drop down menu.

请注意，在创建CloudFront发行版时，会有一个下拉菜单来添加SSL证书。如果已经为您颁发了SSL证书，则会在下拉菜单中预先填充该证书。

Your state in your CloudFront dashboard should changed to “Enabled”. This isn’t instant and takes a little time.

您在CloudFront仪表板中的状态应更改为“已启用”。这不是即时的，需要一些时间。

差不多了… (Almost there…)

Finally, you need to get your Domain Name from the CloudFront distribution. It should be something like this dsfdser83543.cloudfront.net.

最后，您需要从CloudFront发行版中获取域名。应该是这样的dsfdser83543。 cloudfront.net 。

Go back to Route 53 > hosted zone > change both Alias records (Alias Target) to the CloudFront Domain Name.

返回路线53>托管区域>将两个别名记录(别名目标)都更改为CloudFront域名。

Voila! You have hosted your first secure static website with AWS.

瞧！您已经使用AWS托管了您的第一个安全静态网站 。

Hope you found this useful. If you have any questions or just want to say hello, find me on Twitter @PhoebeVF

希望您觉得这有用。如果您有任何疑问或想打个招呼，请在Twitter @PhoebeVF上找到我

A big thank you to Victoria Drake for her guide. For a more advanced tutorial on this topic, please check out Victoria's article: "Hosting your static site with AWS S3, Route 53, and CloudFront".

非常感谢Victoria Drake的指导。有关此主题的更高级教程，请查看Victoria的文章： “使用AWS S3，Route 53和CloudFront托管静态站点” 。

Illustrations courtesy of https://undraw.co

插图由https://undraw.co提供