[Amazon Cloud Technology] Implement website resource hosting through high-performance and low-latency object storage S3

本篇文章授权活动官方亚马逊云科技文章转发、改写权，包括不限于在 亚马逊云科技开发者社区, 知乎，自媒体平台，第三方开发者媒体等亚马逊云科技官方渠道

Preface

At the just-concluded Amazon Cloud Technology Annual Event re:Invent, S3 (Simple Storage Service) buckets once again became a hot topic. As one of the core storage services of Amazon Cloud Technology, S3 buckets play a vital role in the field of cloud computing. It not only provides a reliable storage and access mechanism, but also supports a wide range of configuration options and advanced features. In this article, we'll take a deep dive into the benefits, features, and best practices of S3 buckets to help you make better use of this powerful cloud storage service.

1 Introduction to S3

S3 是一种对象存储服务, delivering industry-leading scalability, data availability, security and performance. Customers of all sizes and industries can use Amazon S3 to store and protect any amount of data for data lakes, websites, mobile applications, backup and recovery, archives, enterprise applications, IoT devices, and big data analytics. Amazon S3 provides management capabilities that allow you to optimize, organize, and configure access to your data to meet your specific business, organizational, and compliance requirements.

1.1 Advantages

advantage	Details
Strong performance	Data persistence meets the changing needs of data
low cost	Reduce costs and increase efficiency, no need to invest money and hardware updates in advance
Data Security	Provides encryption and access management tools to protect data from unauthorized access. S3 encrypts all objects uploaded to all buckets and blocks public access to support auditing
Convenient management	Categorize and report data by bucket name, prefix, object label, and S3 inventory, then configure other S3 features to take action to manage the data in the console

2 steps to use

2.1 Register an account

Open the webpage, https://portal.aws.amazon.com/billing/signup, log in. If you don’t have an account, register first.

2.2 Create bucket

2.2.1 Open the console

OpenAccess console, in the left navigation pane, select Bucket->Choose Create Bucket.

2.2.2 Create a new bucket

Bucket names must meet the following requirements:

• Is unique in the partition. A zone is a group of areas. AWS currently has three regions: aws (standard region), aws-cn (China region) and aws-us-gov (AWS GovCloud (US) Regions
• Length must be between 3 and 63 characters.
• Can only consist of lowercase letters, numbers, periods (.), and hyphens (-). For best compatibility, we recommend that you avoid using periods (.) in bucket names, except for buckets used solely for static website hosting.
• Start and end with a letter or number. Once a bucket is created, its name cannot be changed.
• Avoid including sensitive information such as account numbers in bucket names. The bucket name appears in URLs that point to objects in the bucket.

2.3 Upload resources

After the bucket is successfully created, resources can be uploaded to the bucket.

Here we first download the website static resource package

In the upload page, upload resources

Click upload and wait for the upload to finish

Upload successful

2.4 Resource object operations

After uploading to the bucket, we can download, delete, etc. the resources in the bucket. Since there is no decompression operation, we download the resources and decompress them locally and then upload them again.

2.4.1 Download operation

2.4.1.1 Object download

Click the download button through the web page. Another way is to download through the url.

2.4.1.2 Download via URL

3 Website hosting image resource access

3.1 Configure static resources

After uploading the static resources of the website, we need to display the resources of the website through hosting

3.1.1 Enable static website hosting

Select the bucket you want to operate on, for example mine: dmws3storage

Click Properties, slide down to open [Static Website Hosting]

Rewrite configuration and save

3.1.2 Open public access

Select the bucket for the operation

Click permissions

3.1.3 Add bucket policy

Select the bucket for the operation

Click permissions

click bucket strategy

Policy permissions:

Grant public read access to a website. When you grant public read access, anyone on the Internet can access it!

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

Note⚠️: The following policy permissions need to change the Bucket-Name in Resource to your own bucket name, otherwise the error "Policy has invalid resource" will be prompted when saving.

For example: My bucket name [dmws3storage]

So the strategy is:

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

3.2 Obtain the bucket storage public network address

Refresh the bucket permissions page to get the address of the public network access bucket. Next, we use the bucket to host the web page.

4 Access static resource index

When accessing the public address, an error 404 was reported.

This is because the index.html page was opened by default.

If you need to access a single image, for example: buy_shop.png

Just concatenate the URLs, that is:

http://dmws3storage.s3-website-ap-southeast-1.amazonaws.com/buy_shop.png

The effect is as follows:

5 Modify static resource URL

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML图片示例</title>
</head>
<body>

<!-- 使用img元素插入图片 -->
<img src="path/to/your/buy_shop.png" alt="图片">

</body>
</html>

We can replace local resources on the website by replacing the local path with the public address in the website image tag, for example:

<img src="http://dmws3storage.s3-website-ap-southeast-1.amazonaws.com/buy_shop.png" alt="图片">

If you still need to host the static page html, you only need to upload the corresponding html page, for example: index.html

6 Upload resources to complete hosting

Package and upload the modified static page to the storage bucket

After uploading to the bucket, you can get the hosting page by accessing the public address of the bucket.

7 Product evaluation experience

Amazon Cloud Technology’s S3 (Simple Storage Service), as a high-performance and low-latency object storage service, provides an excellent solution for website resource hosting. In this product experience review, we delve into the key features of S3 and evaluate its performance, reliability, and convenience for hosting website resources. 主要体现在以下几点:

1. In the test, S3 showed extremely high 读写速度, which significantly improved the loading speed of website resources. Through globally distributed AWS edge nodes, users can quickly access the content they need and select nearby storage addresses based on service needs to reduce resource access delays.

2. In the test, S3 provided excellent可扩展性, and users can easily expand storage space without worrying about performance degradation.

3. Through存储桶策略, users can precisely control access to their buckets and objects in them. In addition, S3 also provides 加密选项 to ensure that the data stored in it is fully protected.

4, S3’s 按需定价 models and 灵活付费 options make it a highly cost-effective option. Users only pay for the storage and data transfer they actually use, rather than a fixed upfront fee. This flexibility helps businesses optimize their IT spending and ensure they only pay for the resources they actually use.