aws s3 静态网站_使用AWS S3存储桶启动静态网站

aws s3 静态网站

This article explores the AWS S3 bucket to configure a static website.

本文探讨了用于配置静态网站的AWS S3存储桶 。

介绍 (Introduction)

Amazon Web Services (AWS) has an object-level storage solution known as Simple Storage Service. We can store any kind of file in this cloud service. It gives you unlimited storage and a maximum of 5TB single file upload.

Amazon Web Services（AWS）有一个称为“ 简单存储服务”的对象级存储解决方案。我们可以在此云服务中存储任何类型的文件。它为您提供了无限的存储空间，最多可以上传5TB的单个文件。

In the articles listed below, we explored S3 bucket integration with AWS RDS SQL Server using the web console, and AWS CLI commands.

在下面列出的文章中，我们探索了使用Web控制台和AWS CLI命令与S3存储桶与AWS RDS SQL Server的集成。

Integrating AWS S3 buckets with AWS RDS SQL Server将AWS S3存储桶与AWS RDS SQL Server集成
Learn AWS CLI – Interact with AWS S3 Buckets using AWS CLI了解AWS CLI –使用AWS CLI与AWS S3存储桶进行交互

We can use s3 buckets for hosting a static website. In many cases, we do not require a dynamic website where data changes very frequently. For example, suppose you publish technical articles on SQL Server. It is a static website as users open the website and read the content. We can leverage the s3 bucket for hosting a static website using AWS serverless architecture.

我们可以使用s3存储桶来托管静态网站。在很多情况下，我们并不需要动态数据频繁变化的网站。例如，假设您在SQL Server上发布技术文章。当用户打开网站并阅读内容时，它是一个静态网站。我们可以利用s3存储桶来使用AWS无服务器架构托管静态网站。

Let’s start configuring the static website using the AWS S3 bucket.

让我们开始使用AWS S3存储桶配置静态网站。

AWS S3存储桶配置 (AWS S3 bucket configuration)

Logon to AWS web console and search for S3 service. It lists the existing buckets in your AWS account if any.

登录到AWS Web控制台并搜索S3服务。它列出了您的AWS账户中现有的存储桶（如果有）。

Click on Create Bucket to configure a new s3 bucket that holds contents for our static website. Give a unique bucket name and choose the appropriate region to deploy your AWS resources.

单击创建存储桶以配置一个新的s3存储桶，其中包含我们静态网站的内容。提供唯一的存储桶名称，然后选择适当的区域来部署您的AWS资源。

AWS does not allow public access for s3 bucket, by default. We need to edit this behavior for a static website. Click Next, and you see default behavior – Block all public access.

默认情况下，AWS不允许对s3存储桶进行公共访问。我们需要为静态网站编辑此行为。单击下一步，您将看到默认行为– 阻止所有公共访问。

Remove the tick from the block all public access. It also gives you a warning message, and you need to acknowledge that you operated intentionally.

删除所有公共访问权限中的对勾。它还会向您发出警告消息，并且您需要确认自己是有意操作的。

Review the bucket configuration and click on Create bucket.

查看存储桶配置，然后单击“ 创建存储桶” 。

You can see the newly configured S3 bucket in the below screenshot.

您可以在以下屏幕截图中看到新配置的S3存储桶。

Now, open the bucket and go to Permissions -> Bucket Policy.

现在，打开存储桶并转到Permissions-> Bucket Policy 。

It opens the bucket policy editor. We can specify the policy in the JSON format. Paste the following JSON code with your bucket name.

它将打开存储桶策略编辑器。我们可以以JSON格式指定策略。将以下JSON代码粘贴到您的存储桶名称中。

{"Version": "2012-10-17","Statement": [{"Sid": "PublicReadGetObject","Effect": "Allow","Principal": "*","Action": ["s3:GetObject"],"Resource": ["arn:aws:s3:::example.com/*"]}]
}

使用HTML创建静态网站 (Create a static website using HTML)

You should create a static website in your local system and test if it is working correctly or not. For this article’s demo purpose, I create a basic HTML website.

您应该在本地系统中创建一个静态网站，并测试其是否正常运行。为了本文的演示目的，我创建了一个基本HTML网站。

It uses the following HTML files.

它使用以下HTML文件。

Index.html: This file contains the content of the static website

Index.html：此文件包含静态网站的内容

<body style="background-color:#FAEBD7"></body><body><h1>My First Website using AWS S3 Serverless architecture</h1><h2>Rajendra Gupta</h2><h3> Visit <a href="https://www.sqlshack.com/" target="_blank" rel="noopener noreferrer">SQLShack </a>for all my articles on Microsoft SQL Server and AWS</h3><h4>Microsoft SQL Server</h4><img src="data:image.jpg" ></br><a href = "mailto: rajendra.gupta16@gmail.com">rajendra.gupta16@gmail.com</a></body>

Error.html: It is a custom error HTML page. In case of any error, by default, you receive an error such as HTTP 404 Not Found. You can configure an error web page instead of this default page. I use the following HTML code for error documents

Error.html：这是一个自定义错误HTML页面。如果发生任何错误，默认情况下，您会收到诸如HTTP 404 Not Found之类的错误。您可以配置错误网页而不是此默认页面。我将以下HTML代码用于错误文档
```
<body style="background-color:#FAEBD7"></body><body><h1>There is something wrong, please check the URL and try again</h1><img src="error.jpg" ></br></body>
```

将静态网站文件上传到AWS S3存储桶 (Upload static website files to an AWS S3 bucket)

I have the following files for my static website:

我的静态网站有以下文件：

Browse to the S3 bucket and upload all files in the bucket we created earlier.

浏览到S3存储桶，并上传我们之前创建的存储桶中的所有文件。

After uploading these files, select all files and go to actions-> Make public.

上载这些文件后，选择所有文件，然后转到“操作”->“公开”。

It highlights the public access to this bucket resources explicitly, as shown below.

如下所示，它突出显示了公众对此存储桶资源的访问权限。

在AWS S3存储桶中配置静态网站托管 (Configure static website hosting in the AWS S3 bucket)

We need to configure the S3 bucket for hosting a static website. Open the bucket and navigate to properties. Here, you get bucket configurations such as versioning, server access logging and static website hosting.

我们需要配置S3存储桶以托管静态网站。打开存储桶并导航到属性。在这里，您可以获得存储桶配置，例如版本控制，服务器访问日志记录和静态网站托管。

By default, static website hosting is disabled. Click on the box and do the following configurations.

默认情况下，静态网站托管是禁用的。单击该框，然后进行以下配置。

Use this bucket to host a website 使用此存储桶托管网站
Specify the index document name. In my case, it is index.html 指定索引文档名称。就我而言，它是index.html
Specify the error document name. In my case, it is error.html 指定错误文档名称。就我而言，它是error.html

These index.html and error.html should be available in the s3 bucket with public access.

这些index.html和error.html应该在具有公共访问权限的s3存储桶中可用。

You should note-down the Amazon S3 website endpoint specified in the static website hosting page. Click on Save, and you see a tick mark in the bucket hosting property in static website hosting.

您应该记下静态网站托管页面中指定的Amazon S3网站终端节点。单击“保存”，您会在静态网站托管的存储分区托管属性中看到一个勾号。

Now, open the endpoint URL in a web browser, and you should be able to launch your serverless static website using an S3 bucket.

现在，在Web浏览器中打开端点URL，您应该能够使用S3存储桶启动无服务器静态网站。

Similarly, you can view the error HTML page in the web browser.

同样，您可以在Web浏览器中查看错误HTML页面。

使用您的域名访问AWS Static网站 (Accessing AWS Static Website with your domain Name)

In the above steps, we accessed a static website using the endpoint. Usually, for a website, you require a user-friendly name like www.sqlshack.com

在上述步骤中，我们使用端点访问了静态网站。通常，对于网站，您需要一个易于使用的名称，例如www.sqlshack.com

It is not convenient for users to remember the endpoint name. You might not get a good response for your website even it has relevant content. For this purpose, we can use the existing domain name or purchase a custom domain name. I do not have any domain names so let’s buy it from Amazon.

用户不方便记住端点名称。即使该网站包含相关内容，也可能无法获得很好的响应。为此，我们可以使用现有域名或购买自定义域名。我没有任何域名，所以让我们从亚马逊购买。

In the services, launch Amazon Route 53. It gives you the following options.

在服务中，启动Amazon Route53。它为您提供以下选项。

Click on the domain registration. Search for the domain name, and it shows you the price for different domains. Its price may vary in different domains. You can select the lowest price domain and click Next.

单击域名注册。搜索域名，它会显示不同域名的价格。它的价格在不同领域可能有所不同。您可以选择最低价格域，然后单击下一步。

Enter your contact details such as first name, last name, address, contact number.

输入您的联系方式，例如名字，姓氏，地址，联系电话。

Click Continue. Verify details entered, accept terms & conditions and verify the email address of the registered contact.

单击继续。验证输入的详细信息，接受条款和条件，并验证注册联系人的电子邮件地址。

Check your registered email and click on the link received from Amazon Registrar. Once verification has competed, it shows verified status.

检查您的注册电子邮件，然后单击从Amazon Registrar收到的链接。验证竞争后，它将显示验证状态。

Click on complete order. It processes the order and debits the payment from your registered payment method in the AWS account.

点击完成订单。它会处理订单并从您在AWS账户中注册的付款方式中扣除付款。

It takes some time to register your customized domain. You can view your domains in the registered domain section of Route53.

注册您的自定义域需要一些时间。您可以在Route53的“注册域”部分中查看您的域。

为自定义域创建DNS“ A”记录 (Create DNS ‘A’ record for custom domain)

DNS ‘A’ record refers to an IP address of the specified domain. It holds an IPv4 address. Click on the hosted zones, and it shows your registered domain.

DNS“ A”记录是指指定域的IP地址。它拥有一个IPv4地址。单击托管区域，它会显示您的注册域。

Click on the domain name, and it shows you pre-configured hosted zones. A hosted zone is like a container that has routing information for a domain. You can refer to Working with hosted zones for more details.

单击域名，它会向您显示预配置的托管区域。托管区域就像具有域路由信息的容器一样。您可以参考使用托管区域以了解更多详细信息。

To create domain ‘A’ name, click on the Create record set. It opens a create recordset window.

要创建域“ A”的名称，请单击“ 创建”记录集。 它打开一个创建记录集窗口。

Specify the following values:

指定以下值：

Name: It shows the name of the domain in the recordset name. We can go with the default value 名称：在记录集名称中显示域的名称。我们可以使用默认值
Type: Choose value 类型：从下拉列表中选择值A – IPv4 address from the drop-down list A – IPv4地址
Alias: Choose Yes to create an alias 别名：选择是创建别名

Alias Target: In the alias target, select the s3 bucket name. This bucket name should match with the custom domain. It lists the s3 bucket in the drop if it fulfills following conditions

别名目标：在别名目标中，选择s3存储桶名称。该存储桶名称应与自定义域匹配。如果满足以下条件，它将在下拉列表中列出s3存储桶

AWS S3 bucket should be configured as a static website AWS S3存储桶应配置为静态网站
The bucket name and the A record name should be the same 值区名称和A记录名称应相同
Both the S3 bucket and A record should be in the same AWS account S3存储桶和A记录都应该在同一个AWS账户中

If you do not get the AWS S3 bucket name in the alias target, we can specify the Amazon S3 website endpoint for the region that consists of our S3 bucket for static website.

如果您没有在别名目标中获得AWS S3存储桶名称，那么我们可以为由静态网站的S3存储桶组成的区域指定Amazon S3网站终端节点。

For my S3 bucket in the Asia Pacific (Mumbai) region, it has endpoint s3-website.ap-south-1.amazonaws.com. Once you specify the endpoint, it shows alias hosted zone ID. You can get the region-specific Amazon S3 website endpoint and hosed zone id from the AWS docs.

对于我在亚太地区（孟买）的S3存储桶，其端点为s3-website.ap-south-1.amazonaws.com。 指定端点后，它将显示别名托管区域ID。您可以从AWS文档获取特定于区域的Amazon S3网站终端节点和软管区域ID。

Specify the website endpoint, verify the hosted zone id and create the DNS ‘A’ record set.

指定网站终结点，验证托管区域ID并创建DNS'A'记录集。

It quickly creates the ‘A’ record, as shown below.

它将快速创建“ A”记录，如下所示。

We can test the newly created record set as well. Click on the Test record set.

我们也可以测试新创建的记录集。单击测试记录集 。

Specify your system IP and click on Get response. It checks the response from Route 53, and you get the following output. In case of any error, it shows you an error message.

指定您的系统IP，然后单击“ 获取响应” 。它检查来自Route 53的响应，并获得以下输出。如果发生任何错误，它将显示一条错误消息。

Now, you can test your Amazon S3 static website using the custom domain. Open a web browser, specify the domain, and it launches the website as shown below.

现在，您可以使用自定义域测试您的Amazon S3静态网站。打开网络浏览器，指定域，然后将启动网站，如下所示。

In case you specify a wrong URL, it navigates to the error page that we configured during static website configuration.

如果您指定了错误的URL，它将导航到我们在静态网站配置期间配置的错误页面。

结论 (Conclusion)

In this article, we traversed the configuration of a static website using the AWS S3 bucket. We also used a custom domain to launch the static website. You can create the website pages, upload them into an S3 bucket, and users can access the website. You do not require to maintain any backend servers. It is a serverless architecture, and AWS manages them for you automatically.

在本文中，我们使用AWS S3存储桶遍历了静态网站的配置。我们还使用了自定义域来启动静态网站。您可以创建网站页面，将其上传到S3存储桶中，用户可以访问该网站。您不需要维护任何后端服务器。它是一种无服务器架构，AWS会自动为您管理它们。

翻译自: https://www.sqlshack.com/launch-a-static-website-using-aws-s3-buckets/

aws s3 静态网站