Introduction ☁️
As a beginner in cloud computing and having recently passed the AWS Certified Cloud Practitioner exam, I wanted to dive deeper into AWS services and explore hands-on projects to gain more practical experience. I decided to host a static website on AWS by leveraging S3 for storage and CloudFront for content delivery. This project was an excellent opportunity to apply the concepts learned from the Cloud Practitioner exam, explore AWS services, and better understand how different AWS products integrate and work together.
Objective
The goal of this project was to:
- Host a Static Website using Amazon S3.
- Enable HTTPS access to the site by using Amazon CloudFront.
- Understand the integration between S3 (for object storage) and CloudFront (for CDN and secure content delivery).
Step-by-Step Process
1. Setting Up the S3 Bucket for Static Website Hosting
The first step was to create an S3 bucket, which would act as the storage for my static website files (HTML). The S3 bucket provides secure and scalable object storage, which is ideal for static website hosting.
- S3 Bucket Creation: I created a new bucket named my-cloudproject-website in the us-east-1 region.
- I enabled the Static Website Hosting option within S3, specifying website.html as the index document.
- After this, I uploaded my simple HTML file, website.html, which served as the homepage of my site.
2. Configuring Bucket Policy for Public Access
At this point, I encountered a key issue. Since my website needed to be publicly accessible, the S3 bucket policy had to be configured correctly. Initially, I received a 403 Forbidden error when trying to access the site via the CloudFront distribution domain. This was due to the lack of public read access on the S3 bucket.
- Bucket Policy: I resolved this by adding a bucket policy that explicitly allowed public read access to the objects stored in the S3 bucket. This step was essential for CloudFront to serve the content to visitors.
Here is the bucket policy I added:
3. Setting Up CloudFront for Secure Content Delivery
The next step was to configure CloudFront, which acts as a Content Delivery Network (CDN) to securely distribute my static website content worldwide. This was important for improving website performance and ensuring that HTTPS is enabled.
- CloudFront Distribution Setup: I created a new CloudFront distribution, specifying my S3 bucket as the origin.
- Instead of using the regular S3 bucket endpoint, I used the S3 website endpoint (***anonymized for safety***-website.s3-website-us-east-1.amazonaws.com) for CloudFront, which is crucial for static website hosting.
- I ensured that Viewer Protocol Policy was set to Redirect HTTP to HTTPS, which guarantees secure connections.
4. Testing the Configuration
After setting up CloudFront, I tested my site using the CloudFront domain (***anonymized for safety***.cloudfront.net). However, I initially encountered issues, including a 403 Forbidden error when trying to access the site. This was due to the lack of public access to the S3 bucket, which I fixed by adding the necessary bucket policy.
Once the bucket policy was updated and the changes were applied, my site became accessible via the CloudFront URL, and all traffic was securely routed via HTTPS.
HTML Code
The static website hosted in the S3 bucket was a simple HTML page. Here’s the code for the website.html file:
Why Push Beyond Just Hosting on S3?
While hosting a website directly from S3 is an easy and efficient way to store and serve static content, I took this project further by integrating Amazon CloudFront for several important reasons:
- Improved Performance: CloudFront is a Content Delivery Network (CDN) that caches copies of your content at edge locations around the world. By using CloudFront, I ensured that my website content would be served from the nearest edge location to the user, reducing latency and improving page load speeds.
- HTTPS and Security: By configuring CloudFront with HTTPS, I could ensure that all data transferred between the user and the website was encrypted. This is essential for ensuring secure communications, especially when dealing with sensitive information.
- Scalability: CloudFront automatically scales based on demand. It can handle large amounts of traffic without affecting the performance of the website, making it a great solution for websites that may experience fluctuating or high traffic volumes.
- Global Reach: CloudFront has a vast global network of edge locations. Using CloudFront, I was able to serve my website to users from various geographical regions, ensuring fast content delivery across the globe.
- Cost-Effectiveness: CloudFront is relatively inexpensive when used in conjunction with S3. Since S3 itself is a pay-as-you-go service with a free tier (for up to 1 GB of storage and 15 GB of data transfer per month), adding CloudFront for caching does not significantly increase costs, especially for a small static website. I personally did all this for free and don’t plan on paying unless I expand this project.
Challenges Encountered
- 403 Forbidden Error: The biggest challenge I faced during this project was the 403 Forbidden error when attempting to access the site through CloudFront. This was due to the S3 bucket not having the proper public access permissions. After researching the issue and asking ChatGPT with some help with, I found the solution by modifying the bucket policy to allow public access to the objects.
- CloudFront and S3 Integration: Understanding how to configure CloudFront with the S3 website endpoint rather than the default bucket endpoint was a bit tricky at first. Once I understood the difference, it became clearer how CloudFront works as a CDN to serve content securely and with lower latency.
Conclusion
By completing this project, I gained practical experience in configuring and managing AWS S3 and CloudFront. I learned how to:
- Host static websites using S3.
- Configure S3 for public access through bucket policies.
- Set up CloudFront for HTTPS content delivery.
This project provided valuable insight into how different AWS services connect with each other. S3 serves as the storage layer for static files, while CloudFront enhances performance and ensures secure access by distributing content globally with HTTPS support. The integration of these services is an essential skill for any AWS professional. Hopefully I will come up with more ideas I can do with it, maybe end up using it as my resume. Maybe even moving this website onto there. Endless opportunity.
This hands-on experience also reinforced my understanding of AWS core concepts, which I learned during my AWS Certified Cloud Practitioner exam. Hosting a static website with these services is a simple yet powerful example of how cloud solutions can provide scalable and secure hosting for web applications. I plan to take the AWS Solutions Architect with more hands-on experience and just knowledge of AWS in the future.
Below are some screenshots of the project!
