當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/11/29 编程问答 43 豆豆

生活随笔收集整理的這篇文章主要介紹了 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提供

翻譯自: https://www.freecodecamp.org/news/a-beginners-guide-on-how-to-host-a-static-site-with-aws/