Lab Overview
A startup company with three employees needs its first public-facing website to showcase its product. The founder wants a solution that is:
Low cost
Easy to manage
Highly available
Secure
Able to handle sudden traffic spikes from social media platforms such as Reddit
As the Solutions Architect, your responsibility is to evaluate AWS hosting options and deploy the most suitable solution.
In this lab, you will compare Amazon EC2, AWS Amplify, and Amazon S3 before implementing a highly scalable static website solution using Amazon S3 and Amazon CloudFront.
Scenario
The startup has already developed a simple static website containing HTML, CSS, JavaScript, and image files. Since the website does not require server-side processing or a database, the goal is to identify the AWS service that provides the lowest cost while remaining highly scalable and reliable.
**
The Architecture Diagram used in this lab is shown below.**
Why This Architecture?
CloudFront provides:
HTTPS by default
Global caching
Faster website loading
Protection against traffic spikes
Improved security
Amazon S3 provides:
Durable storage
High availability
Serverless hosting
Very low cost
Learning Objectives
By completing this lab, you will be able to:
Compare EC2, Amplify, and S3 hosting options
Select the most cost-effective AWS service
Create an S3 bucket
Upload website files
Configure permissions securely
Create a CloudFront distribution
Configure Origin Access Control (OAC)
Deliver a website over HTTPS
Explain how CDNs improve performance
Note: This tutorial uses the AWS Management Console. Some labels and layouts may change slightly over time as AWS updates its interface, but the overall process remains the same
Prerequisites
Before starting you the need the following:
1)AWS Account
(If you've never touched AWS before or do not have an account, this is how to create one,
Go to aws.amazon.com/free
Click Create a Free Account
Enter your email, choose an account name (e.g. "YourName-Labs"), and set a password
You'll be asked for a credit card — this is normal and required even for free tier. Everything in this lab stays within free limits, and we'll show you exactly how to confirm that at the end.
Verify your phone number and choose the Basic Support Plan (Free)
2)Internet connection
3)Modern web browser
4)Static website files (HTML, CSS, JavaScript, and images) download it here: https://drive.google.com/drive/folders/1k1ZDBwwV05lToi-0ugOAgv3pfJhKODi9 If the files are downloaded as a ZIP folder, extract them first and Rename the extracted file to index
Solution Analysis
Before selecting a hosting service, evaluate the available AWS options.
| AWS Service | Advantages | Limitations | Decision |
|------------|------------|-------------|----------|
| Amazon EC2 | • Supports dynamic websites
• Full server control | • Requires server management
• Operating system maintenance
• Higher cost | ❌ Not Selected |
| AWS Amplify | • Ideal for React & Angular applications
• Built-in CI/CD | • Too complex for this project
• Unnecessary features for a simple HTML/CSS website | ❌ Not Selected |
| Amazon S3 Static Website Hosting | • Low cost
• Serverless
• Highly scalable
• Easy to configure | • Supports static websites only | ✅ Selected |
Amazon S3 Static Website Hosting was selected because the application consists entirely of static files and does not require a web server or backend processing. CloudFront was added to improve global performance, provide HTTPS support, and protect the S3 bucket from direct public access in future enhancements.
Implementation
Step 1 Sign in to the AWS Management Console.
Expected Result
You should successfully access the AWS Console.
STEP 2: Create an S3 Bucket
Go to the search bar, type S3 and select S3 bucket:
Click Create bucket
Enter a unique bucket name: e.g cooktogether-landing-page
Leave Region as default or choose a nearby region.
Click Create bucket:
Expected Result
You should see Bucket successfully created
STEP 3: Upload Website Files
Open the bucket.
Click:
Upload, then upload the index file you downloaded earlier
STEP 4: Enable Static Website Hosting
Open:
Bucket,bthen navigate to
↓
Properties
Scroll down to:
Static website hosting
Click:
Edit
Enable:
Enable
Choose:
Host a static website
on Index document option type:
index.html
on Error document option type:
index.html
Leave:
Redirection rules blank.
Click:
Save changes
STEP 5: Verify S3 Website Works
After saving:
Go to:
Properties
↓
Static website hosting
Copy:
Bucket website endpoint Example:
http://cooktogether-landing-page.s3-website-us-east-1.amazonaws.com
Copy it and paste in your Browser,
If everything is configured correctly:
You will see your website, the cook together landing page, the landing page will load just like a normal website.
If the page does not load or displays an Access Denied error, do not continue yet. Complete the Public Access and Bucket Policy steps below, then test the S3 website endpoint again before creating CloudFront.
STEP 6: Configure Public Access
Go to:
Permissions
Click:
Edit
under:
Block Public Access
Disable:
Block all public access
Save.
Type:
confirm
when prompted.
STEP 7: Add Bucket Policy
Open:
Permissions
↓
Bucket Policy
Paste this policy below:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicRead",
"Effect": "Allow",
"Principal": "",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::cooktogether-landing-page/"
}
]
}
then click Save.
STEP 8: Confirm Website Works
Open:
http://your-bucket-name.s3-website-region.amazonaws.com
You should see your website. If your website loads correctly from the S3 website endpoint, you are ready to continue to CloudFront. If it does not load, review the previous steps before proceeding.
Do NOT proceed to CloudFront until this works.
STEP 9: Create CloudFront Distribution
Search:
CloudFront
Click:
Create Distribution
General Information
Distribution name:
cooktogether-website
on Description option type:
CloudFront distribution for landing page
Click:
Next
STEP 10: Configure Origin
Origin Type:
Amazon S3
Click:
Browse S3
Select:
cooktogether-landing-page
Keep:
Allow private S3 bucket access to CloudFront
enabled.
Keep:
Use recommended origin settings
enabled.
Origin Path:
Leave blank.
Note: AWS may ask you to create or select an Origin Access Control (OAC). Choose Create new OAC if prompted, then continue using the recommended settings.
(This is only for those who will encounter the OAC prompt).
Click Next
STEP 11: Security Settings
WAF:
Choose:
Monitor Mode
Why?
Safe for beginners
No blocking
Lets AWS observe traffic
Do NOT upgrade plans.
Click:
Next
STEP 12: SSL Certificate
Since you are using the default CloudFront domain name (*.cloudfront.net), CloudFront automatically provides an SSL/TLS certificate. You only need to request your own SSL certificate if you later connect a custom domain name (for example, www.cooktogether.com).
So You DO NOT need one.
Leave blank:
Alternate Domain Name (CNAME)
Leave blank:
Custom SSL Certificate
CloudFront already provides HTTPS using:
.cloudfront.net
STEP 13: Create Distribution
Click:
Create Distribution
Wait 5–20 minutes.
STEP 14: Find CloudFront URL
Type Cloudfront on the search bar, Go to:
CloudFront
↓
Distributions
You will see:
Domain Name
Example:
drqqdng3e0nw5.cloudfront.net
This is your website URL.
Open:
https://drqqdng3e0nw5.cloudfront.net
STEP 15: Configure Default Root Object
Open:
CloudFront
↓
Distribution
↓
Edit Settings
Find:
Default root object
Enter:
index.html
Save.
Take Note:
If this field is blank, CloudFront may return:
403 Forbidden
even though the website exists.
Always set:
index.html
STEP 16: Wait for Deployment
CloudFront needs time to update.
Wait approximately 5–20 minutes for CloudFront to finish deploying. During this time, you may temporarily receive a 403 Forbidden or 404 Not Found response. This is normal. Refresh the page after deployment completes.
before testing again.
Do You Need a Domain Name?
No.
Your site is already live at:
https://drqqdng3e0nw5.cloudfront.net
A domain name is only needed if you want:
https://www.cooktogether.com instead.
Troubleshooting
If you receive 403 Forbidden
Check the following:
The CloudFront distribution has finished deploying.
The Default Root Object is set to index.html.
The bucket policy is correct.
Your bucket contains index.html.
You are using the CloudFront URL shown in your distribution.
If your website has no CSS or images
Check that you uploaded:
CSS files
JavaScript files
Image folders
Uploading only index.html will cause the page to appear broken.
If your website does not load from the S3 website endpoint
Verify:
Static Website Hosting is enabled.
Public Access settings are configured correctly.
The bucket policy has been saved.
The correct website endpoint is being used.
Troubleshooting
If you receive 403 Forbidden
Check the following:
The CloudFront distribution has finished deploying.
The Default Root Object is set to index.html.
The bucket policy is correct.
Your bucket contains index.html.
You are using the CloudFront URL shown in your distribution.
If your website has no CSS or images
Check that you uploaded:
CSS files
JavaScript files
Image folders
Uploading only index.html will cause the page to appear broken.
If your website does not load from the S3 website endpoint
Verify:
Static Website Hosting is enabled.
Public Access settings are configured correctly.
The bucket policy has been saved.
The correct website endpoint is being used.
Final Checklist
confirm:
✅ Bucket exists
✅ Static website hosting enabled
✅ index.html exists
✅ Not index.html.html
✅ Not index (1).html
✅ Public access configured (if using website endpoint)
✅ S3 website works first
✅ CloudFront distribution created
✅ Default root object set to index.html
✅ Waited for deployment
✅ Using actual CloudFront domain name
Result
You now have a production-style architecture used by many startups:
Top comments (0)