Cloud Project Detail
Beauno Resort Website Hosted on AWS S3 and CloudFront
A luxury resort static website deployed using Amazon S3 static hosting and CloudFront HTTPS delivery.
Problem
The resort needed an online presence to showcase weddings, parties, ceremonies, and event hosting services.
Solution
A static website was created and deployed using Amazon S3 static website hosting and delivered securely through Amazon CloudFront over HTTPS.
Goal
The goal of the project was to learn AWS cloud hosting fundamentals including S3 static hosting, public bucket configuration, CloudFront CDN setup, and HTTPS delivery.
Target Users
Potential resort customers, wedding planners, event organizers, and portfolio reviewers/recruiters.
Cloud Services Used
Tools Used
Architecture Overview
The website files are stored inside an Amazon S3 bucket configured for static website hosting. Amazon CloudFront is used as a CDN and HTTPS layer to securely distribute the website globally.
- - User opens website in browser
- - Request reaches CloudFront distribution
- - CloudFront forwards request to S3 static website endpoint
- - S3 serves HTML, CSS, JavaScript, and image files
- - CloudFront caches and delivers content over HTTPS
Steps Taken
Create S3 bucket
Created an Amazon S3 bucket to host the Beauno Resort static website files.
Upload website files
Uploaded HTML, CSS, JavaScript, and image assets to the S3 bucket.
Enable static website hosting
Configured the S3 bucket for static website hosting using index.html as the default root document.
Configure public access
Updated bucket permissions and bucket policy to allow public read access to website files.
Create CloudFront distribution
Created a CloudFront distribution using the S3 website endpoint as the origin.
Enable HTTPS delivery
Configured CloudFront to redirect HTTP traffic to HTTPS for secure website access.
Challenges
Issue: Website worked on the original browser but failed on other devices.
Cause: The S3 website endpoint was only accessible over HTTP and some devices/networks blocked insecure requests.
Solution: Implemented Amazon CloudFront to provide HTTPS delivery.
Lesson Learned: Modern browsers and devices often require HTTPS for reliable public access.
Issue: CloudFront returned a 504 Gateway Timeout error.
Cause: CloudFront attempted HTTPS communication with the S3 website endpoint.
Solution: Changed the CloudFront origin protocol policy to HTTP only.
Lesson Learned: S3 static website endpoints only support HTTP origins.
Mistakes
Mistake: Used the full URL including http:// when configuring the CloudFront origin.
Fix: Used only the domain name without the protocol or trailing slash.
Lesson: CloudFront origins require only the domain name.
Mistake: Initially assumed HTTPS was automatically supported by S3 static hosting.
Fix: Implemented CloudFront for HTTPS support.
Lesson: S3 static website hosting does not provide HTTPS directly.
Security Considerations
Topic: Public access
Explanation: The S3 bucket required public read access for website hosting.
Improvement: Restrict direct bucket access later and allow access only through CloudFront.
Topic: HTTPS delivery
Explanation: HTTP-only websites may expose traffic insecurely.
Improvement: CloudFront was added to enforce HTTPS for secure communication.
Topic: IAM permissions
Explanation: Administrative access should follow least privilege principles.
Improvement: Use dedicated IAM users and avoid root account usage.
Cost Considerations
Service: Amazon S3
Estimated Cost: Very low for small static websites with low traffic.
Notes: Costs depend on storage size and request volume.
Service: CloudFront
Estimated Cost: Low cost for lightweight portfolio traffic.
Notes: Charges are based on bandwidth usage and requests.
Lessons Learned
- - Amazon S3 can host static websites efficiently.
- - CloudFront provides HTTPS and CDN functionality for static websites.
- - Proper bucket permissions are required for public hosting.
- - CloudFront origin protocol settings are important when using S3 website endpoints.
- - Static cloud hosting is inexpensive and suitable for beginner cloud projects.
Future Improvements
- - Connect custom domain using Route 53
- - Add AWS Certificate Manager SSL certificate
- - Migrate frontend to Next.js static export
- - Implement booking enquiry backend using Lambda and API Gateway
- - Store booking requests in DynamoDB
- - Automate deployment using GitHub Actions