Project Description :
This project involves hosting a static website on Amazon S3 and using Amazon CloudFront for content delivery. The goal is to leverage CloudFront's global edge network to improve website performance, security, and scalability
Step 1) Create an S3 Bucket and Upload Website Files.
Step 2) Block all public access and we can enable Bucket Versioning if we want to keep multiple versions of our objects.
Step 3) Click on create bucket to create the bucket.
Step 4) Now we can upload the index.html file to our bucket .Click on bucket name then click on upload. Upload your html file.
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> AWS Project </title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
margin-top: 50px;
}
h1 {
color: #333;
}
p {
font-size: 18px;
color: #666;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 80%;
margin: auto;
}
.logo {
width: 100px; /* Adjust size as needed */
margin: 0 15px; /* Adds space between images */
display: inline-block; /* Ensure images display inline */
vertical-align: middle; /* Align images vertically in the middle */
}
</style>
</head>
<body>
<div class="container">
<h1>S3 and Cloudfront AWS Project</h1>
<br>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Amazon_Web_Services_Logo.svg/2000px-Amazon_Web_Services_Logo.svg.png" alt="AWS Logo" class="logo">
<img src="https://blocksandfiles.com/wp-content/uploads/2020/11/S3.png" alt="AWS S3 Logo" alt="AWS S3 Logo" class="logo">
<img src="https://seeklogo.com/images/A/aws-cloudfront-logo-D475098A98-seeklogo.com.png" alt="AWS CloudFront Logo" class="logo">
<p>This is a demonstration of a static website hosting using cloudfront and S3.</p>
<br><br>
</div>
</body>
</html>
Step 5) Now we need to enable Static Website Hosting for our bucket.
Under Properties , scroll down at the bottom to find Static Website Hosting and enable it.
Step 6) Now we have to create a CloudFront distribution.
Enter your bucket endpoint under Origin Domain ( we can select it from dropdown ).
Enter a name for this origin.
Step 7 ) Disable web application firewall, then create distribution.
Step 8) Our distribution is created .
We can access out website using domain name given by the distribution.
Note : We can host our webpage on s3 only, but using cloudfront with s3 give us extra benefits like Lower latency, globally optimized, scalability, security and detailed cloudfront logs.
Thank you for reading!!
Happy Learning!!