[Osaka/Yokohama/Tokushima] Looking for infrastructure/server side engineers!

[Osaka/Yokohama/Tokushima] Looking for infrastructure/server side engineers!

[Deployed by over 500 companies] AWS construction, operation, maintenance, and monitoring services

[Deployed by over 500 companies] AWS construction, operation, maintenance, and monitoring services

[Successor to CentOS] AlmaLinux OS server construction/migration service

[Successor to CentOS] AlmaLinux OS server construction/migration service

[For WordPress only] Cloud server “Web Speed”

[For WordPress only] Cloud server “Web Speed”

[Cheap] Website security automatic diagnosis “Quick Scanner”

[Cheap] Website security automatic diagnosis “Quick Scanner”

[Reservation system development] EDISONE customization development service

[Reservation system development] EDISONE customization development service

[Registration of 100 URLs is 0 yen] Website monitoring service “Appmill”

[Registration of 100 URLs is 0 yen] Website monitoring service “Appmill”

[Compatible with over 200 countries] Global eSIM “Beyond SIM”

[Compatible with over 200 countries] Global eSIM “Beyond SIM”

[If you are traveling, business trip, or stationed in China] Chinese SIM service “Choco SIM”

[If you are traveling, business trip, or stationed in China] Chinese SIM service “Choco SIM”

[Global exclusive service] Beyond's MSP in North America and China

[Global exclusive service] Beyond's MSP in North America and China

[YouTube] Beyond official channel “Biyomaru Channel”

[YouTube] Beyond official channel “Biyomaru Channel”

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.
img1

Enter a name for your new bucket and select a region.
Then click Create.
2016-08-22_11h53_55

If you look at the bucket list, the bucket you created should be added!
2016-08-22_12h02_18

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.

2016-08-22_12h04_44

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

Input items detail
index document Enter the page you want users to visit first when visiting your site. I think it is better to specify the top page.
error document Specify the page to display when a 404 error etc. occurs.

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.
2016-08-22_12h13_58

The bucket policy editor will be displayed.
2016-08-22_12h20_19

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...

Setting items detail
"Principal" Enter who is allowed or denied access to the resource. This time, it is *, so it means all users.
"Action" Specifies the operations for which permission is granted. I want to allow GetObject operations, so I type s3:GetObject.
"Resource" Specify the bucket you want to grant permission to.

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.

2016-08-22_12h24_06

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.
2016-08-22_12h51_43

It has been uploaded!
2016-08-22_12h28_33

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

2016-08-22_12h30_41

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.

If you found this article helpful , please give it a like!
1
Loading...
1 vote, average: 1.00 / 11
1,385
X facebook Hatena Bookmark pocket
[2025.6.30 Amazon Linux 2 support ended] Amazon Linux server migration solution

[2025.6.30 Amazon Linux 2 support ended] Amazon Linux server migration solution

The person who wrote this article

About the author

Yuki Teraoka

Joined Beyond in 2016 and is currently in his 6th year as an Infrastructure Engineer
MSP, where he troubleshoots failures while
also designing and building infrastructure using public clouds such as AWS.
Recently, I
have been working with Hashicorp tools such as Terraform and Packer as part of building container infrastructure such as Docker and Kubernetes and automating operations, and I
also play the role of an evangelist who speaks at external study groups and seminars.

・GitHub
https://github.com/nezumisannn

・Presentation history
https://github.com/nezumisannn/my-profile

・Presentation materials (SpeakerDeck)
https://speakerdeck.com/nezumisannn

・Certification:
AWS Certified Solutions Architect - Associate
Google Cloud Professional Cloud Architect