I tried delivering a static site with AWS S3

My name is Teraoka and I am an infrastructure engineer.

AWS has a storage service called S3, which
used not only for storage but
also for hosting static content as a website.

This time, I would like to use S3's web hosting function
to distribute a static site without using EC2.
It may seem difficult at first glance, but it is relatively easy to set up, so please give it a try!

■Try it out

When placing files in S3, a container called a bucket is required.
When I asked Google to translate it, it says it means "bucket" in Japanese.
First, create a new bucket to dump static content into S3.

Select S3 from the AWS Management Console and click Create Bucket at the top left of the screen.

Enter a name for your new bucket and select a region.
Then click Create.

If you look at the bucket list, the bucket you created should be added!

Next, let's add settings to use the created bucket as a static site host.

Click on the magnifying glass icon to the left of the bucket name, the properties will appear on the right side of the screen, and
select from Static Website Hosting to Enable Website Hosting!

The S3 endpoint will be displayed on this screen, but you will ultimately access it from your browser, so it is a good idea to make a note of it.

I believe that two input items are displayed, so I will explain the details about each item...

Click Save when you're done!

The settings are now saved, but I still can't access the site.
In order to publish content placed in S3 to the Internet,
you must allow all users to perform the "GetObjects operation" on S3.

In short, you don't have permission to view the site at this stage...
To allow "GetObjects operation", you need to change the S3 bucket policy.

Select Permissions from the bucket properties and click Add Bucket Policy.

The bucket policy editor will be displayed.

Enter the following:

{ "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadForGetBucketObjects", "Effect": "Allow", "Principal": "*", "Action": [ "s3 :GetObject" ], "Resource": [ "arn:aws:s3:::(bucket name)/*" ] } ] }

To summarize the setting items...

Once you have finished entering your bucket policy, click Save!
This completes the S3 configuration!
Finally, upload your content and check how it looks!
Click the bucket name you created from the list.

Click Upload on the top left of the screen to upload the hrml file, etc.
The file and folder selection screen will appear, so
let's add the content from Add File.
Clicking Start Upload will actually upload the content to S3.

It has been uploaded!

Try accessing the S3 endpoint that you have saved.
Your site should now appear!

What did you think?
It's so convenient that you can distribute your site just by doing this without having to build a server!
Next, I would like to write how to perform distribution in conjunction with Cloudfront.
That's all, thank you very much.