In this tutorial, we'll be hosting a static website on Amazon S3.
Let's get started.
Amazon S3, which stands for "Simple Storage Service," is a scalable and highly available object storage service provided by Amazon Web Services (AWS). It is designed to store and retrieve any amount of data from anywhere on the web. S3 is a popular choice for a wide range of use cases, including data backup, archiving, content distribution, data lakes, and more.
In the services section, search for s3.
click on Create bucket
.
Give a name to your bucket.
Object Ownership as default.
Object ownership in Amazon S3 refers to who has the rights and control over a specific object (file) stored in an S3 bucket.
An ACL is a list of permissions associated with an object that defines who can perform specific actions on that object, such as reading, writing, or deleting. You can use ACLs to grant or deny access to specific users, AWS accounts, or predefined groups (e.g., authenticated users, everyone).
Only CloudFront should be accessing the bucket.
We keep it as default.
Enable bucket versioning.
Bucket versioning is a feature in Amazon S3 (Simple Storage Service) that allows you to preserve, retrieve, and restore every version of every object stored in a specific S3 bucket.
Click on Create bucket
.
Click on your created bucket.
Select the Properties section and scroll to the bottom where you'll find Static website hosting.
Click on Edit
.
Check Enable
.
Provide name as index.html page.
Click on Save Changes
.
Copy the following code and save it as index.html on your local machine.
<!DOCTYPE html>
<html>
<head>
<title>My Static Website</title>
</head>
<body>
<h1>This is a static website</h1>
<p>Hello Everyone, this is my simple html page.</p>
</body>
</html>
Now, click on your bucket and click on Upload
.
Click on Add files
and select the index.html file.
Click on upload
.
Now head up to the Static website hosting again and try to access our static site.
Ops!
We have chosen to block all public access.
In the service section, search for CloudFront and select it.
Amazon CloudFront is a content delivery network (CDN) service provided by Amazon Web Services (AWS). It is designed to improve the performance, security, and scalability of delivering content over the Internet. CloudFront uses a network of edge locations around the world to cache and distribute content to end-users with low latency.
Click on Create Distribution
.
Creating a distribution in Amazon CloudFront involves configuring how your content is delivered and cached to end users. You can create a web distribution for websites and web applications or an RTMP(Real-Time Messaging Protocol) distribution for streaming media content.
Under "Origin Domain Name," select the origin of your content.
In this case, it's our Amazon S3 bucket.
In the context of Amazon CloudFront, "origin access" or "origin access identity" refers to a security feature that helps protect your origin (the source of your content, such as a web server or an Amazon S3 bucket) from unauthorized access while allowing CloudFront to fetch and distribute content from that origin.
Click on Create new OAI
.
An OAI is a unique identity created by CloudFront. It acts on behalf of CloudFront when retrieving content from your origin server.
When CloudFront needs to get content from your origin server, it uses the OAI's identity to make the request.
Your origin server can be configured to allow access only to requests that come from the OAI. This means it only responds to requests authenticated with the OAI's identity.
If someone tries to access your origin server directly (bypassing CloudFront), they won't have the proper authentication credentials provided by the OAI, so your origin server denies access.
Click on Create
.
Also, make changes to the Bucket policy like this:
Choose No protection for time being.
The "root object" refers to the default object that CloudFront serves when a user accesses the root URL of your distribution, which is typically the top-level domain or subdomain (e.g., https://www.example.com/
or https://example.com/
).
If your website's root object is set to "index.html," then when a user enters https://www.example.com/
, CloudFront will serve the "index.html" file as the default content for that URL.
You can observe the rest aspects we set to default.
Click on Create distribution
.
It will take some time to deploy. [around 5 min]
Now, After being deployed, select your created Distribution, copy the Distribution domain name and paste it into the browser.
You'll be seeing your webpage.
So, that was all for this lab.
Now, it's time to clean up the lab resources.
Select your distribution and disable it.
Select your bucket and click on
Empty
.We have to empty our buckets before deleting them.
After emptying, click on
Delete
.
This concludes the lab.
Thank you.