The Startup’s First Website: Deploying a Static Website on AWS Using Amazon S3 and CloudFront
Lab Overview
A startup company with three employees requires its first public-facing website to showcase its product. The founder wants a solution that is inexpensive, easy to manage, and capable of handling sudden traffic spikes caused by social media platforms such as Reddit.
As the Solutions Architect, your responsibility is to evaluate the available AWS hosting services and deploy the most appropriate solution.
In this lab, you will compare Amazon EC2, Amazon S3 Static Website Hosting, and AWS Amplify before deploying the website 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.**
Learning Objectives
By completing this lab, you will be able to:
Compare EC2, S3 Static Website Hosting, and AWS Amplify.
Explain why Amazon S3 is the preferred hosting option.
Create an S3 bucket.
Upload static website files.
Configure static website hosting.
Configure bucket permissions.
Create a CloudFront distribution.
Access the website securely using HTTPS.
Explain how CloudFront improves website performance.
Prerequisites
Before beginning this lab, ensure you have 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
5)Business Requirements
The founder has specified the following requirements:
Low hosting cost
Fast deployment
Minimal administration
High availability
Ability to handle unexpected traffic spikes
Secure website delivery using HTTPS
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 (if you don’t have website files, download this to your computer and name it index
Open the bucket.
Click:
Upload
Upload:
index.html
css/
js/
images/
답글 남기기