Deploying My Portfolio Website on AWS: A Complete Guide Using S3 and CloudFront

In this blog post, I’ll walk you through the process of deploying a portfolio website on AWS, leveraging a private S3 bucket and CloudFront distribution to securely deliver content over the web. This setup ensures that your website is not only fast and reliable but also secure, with controlled access to your S3 bucket.

By the end of this guide, you’ll have a clear understanding of how to host a static website on AWS, how to secure your S3 bucket, and how to distribute content globally using CloudFront. I’ll also share screenshots at each step to make the process easier to follow.

Project Overview

The goal of this project was to deploy a portfolio website on AWS using the following services:

  • Amazon S3: For secure and scalable storage of the website’s files.
  • Amazon CloudFront: For content delivery, ensuring the website is fast and available globally.

Prerequisites

Before you begin, make sure you have the following:

  1. AWS Account:
    • You’ll need an active AWS account to access the AWS Management Console and use the services like S3 and CloudFront. If you don’t have an account, you can sign up here and take advantage of the AWS Free Tier.
  2. Basic Knowledge of AWS Services:
    • Familiarity with AWS services, particularly S3 and CloudFront, is beneficial. If you’re new to AWS, I recommend exploring introductory resources or documentation before starting this project.
  3. Website Files:
    • Have your portfolio website’s static files (HTML, CSS, JavaScript, etc.) ready for deployment. This guide assumes you already have a completed static website that you want to host on AWS.
  4. AWS CLI (Optional):
    • Although not necessary for this guide, having the AWS Command Line Interface (CLI) installed can be useful for managing AWS services via the command line. AWS CLI installation guide.

Architecture Diagram

(@copyright This architecture diagram is made by me ask for permissions before using)

Before we dive into the details, here's an architecture diagram of the project. This diagram provides a high-level overview of how the S3 bucket and CloudFront distribution interact to deliver the website securely and efficiently.

Step 1: Setting Up the S3 Bucket

The first step in deploying the website was to create an S3 bucket to store the website files.

  1. Creating the S3 Bucket

    • In the AWS Management Console, navigate to the S3 service.
    • Click on Create Bucket.
    • Name the bucket niraj.cloud. Make sure the name is unique globally.
    • Block Public Access: I enabled the "Block all public access" setting to keep the bucket private. This is crucial for ensuring that only CloudFront can access the bucket contents.


    • ACLs: Access Control Lists (ACLs) were disabled, as they are not needed for this project.
    • Versioning: I kept versioning disabled, although this is optional. Versioning could be useful in scenarios where you want to maintain different versions of the website files.
    • Default Settings: Encryption and advanced settings were left at their default values.
    • Tagging: Added a tag with Key=Project and Value=My Portfolio Website to help manage and identify the bucket later.

  1. Uploading Website Files

    • After creating the bucket, I uploaded the website’s HTML, CSS, JavaScript, and other static files directly into the bucket.

Step 2: Configuring CloudFront Distribution

With the S3 bucket set up, the next step was to create a CloudFront distribution to deliver the website content securely and efficiently.

  1. Creating a CloudFront Distribution

    • Navigate to the CloudFront service in the AWS Management Console.
    • Click on Create Distribution.
    • Under Origin Settings, select the S3 bucket by choosing its domain name from the list. This tells CloudFront where to fetch the content.


    • Origin Access Control (OAC): I opted for "Origin access control settings (recommended)" to restrict direct access to the S3 bucket and ensure that only CloudFront can serve the files.
      • Created a new OAC; the system automatically named it after the S3 domain name.
    • Viewer Protocol Policy: I changed the viewer protocol policy to "HTTPS Only" to enforce secure connections to the website.

  1. Web Application Firewall (WAF)

    • For this project, I chose not to enable WAF security protections, but this is an option if you want to protect your site from common web exploits and attacks.

  1. Copying the Bucket Policy

    • After creating the CloudFront distribution, AWS provided a bucket policy that grants the CloudFront OAC access to the S3 bucket.
    • I copied this bucket policy from the pop-up notification.

  1. Updating the S3 Bucket Policy

    • In the S3 bucket’s Permissions tab, I pasted the copied policy into the bucket policy editor. This policy ensures that the S3 bucket remains private while allowing CloudFront to access its contents.


Step 3: Testing the Deployment

Once the CloudFront distribution was created and the S3 bucket policy updated, the final step was to test the deployment.

  • I retrieved the CloudFront distribution domain name from the AWS Console.

  • By pasting this domain name into a web browser, I could confirm that the website was accessible and functioning correctly. The website content was served over HTTPS, as configured.



What I Learned from This Project

This project provided valuable insights into deploying a static website on AWS using modern cloud infrastructure. Here are the key takeaways:

  • Understanding Cloud Security: The importance of keeping S3 buckets private and using CloudFront for secure content delivery became evident. The project reinforced best practices in cloud security, particularly how to manage access through policies and control mechanisms like OAC.

  • Leveraging AWS Services for Scalability and Performance: By using CloudFront, I learned how to leverage AWS’s global infrastructure to ensure low-latency content delivery, which is crucial for user experience, especially for a portfolio website.

  • Practical Experience with AWS Tools: This project enhanced my familiarity with AWS services like S3 and CloudFront, as well as their configuration and integration. The hands-on experience of setting up policies, managing access, and configuring distributions is invaluable for future cloud-based projects.

  • The Importance of Cleanup: After completing the deployment and testing, I made sure to delete all resources. This not only prevents unnecessary charges but also ensures that no unintended access to the resources is possible after the project is done.

Conclusion

In this project, I successfully deployed a portfolio website on AWS using a private S3 bucket and CloudFront distribution. This setup not only secures the content but also ensures fast and reliable delivery to users around the world. AWS’s robust infrastructure makes it easy to scale and manage, making it an ideal solution for hosting static websites.

Key Takeaways:

  • Private S3 Bucket: Keeping the S3 bucket private enhances security by restricting direct access.
  • CloudFront Distribution: Ensures global content delivery with SSL support, improving both performance and security.
  • Origin Access Control: A recommended practice to enforce that only CloudFront can access your S3 bucket content.

After completing the project, I deleted all resources to avoid incurring unnecessary charges, a good practice to follow when experimenting with AWS.

Additional Resources:

Call to Action: If you found this guide helpful, please share it with others who might benefit from it. Feel free to leave a comment below if you have any questions or need further clarification!

Location: Nashik, Maharashtra, India

Comments

Post a Comment

Popular posts from this blog

Tracking Website Views Using AWS Lambda and DynamoDB

Image
In this phase of my portfolio website project ( AWS Cloud Resume Challenge ), I added a view counter to track the number of visitors to the site. To achieve this, I used AWS Lambda , DynamoDB , and JavaScript . The Lambda function increments and fetches the current view count stored in DynamoDB every time a user visits the website, and this count is displayed on the site using JavaScript. In this blog, I’ll guide you through the following steps: Creating a DynamoDB table to store the view count. Developing an AWS Lambda function that increments and fetches the view count. Using the Lambda Function URL to call the Lambda function directly from the website via JavaScript. By the end of this blog, you’ll have a working setup to track and display view counts on your website. Project Overview AWS DynamoDB : Stores the view count. AWS Lambda : Increments and fetches the view count from DynamoDB. JavaScript : Calls the Lambda function URL and displays the view count on the website. Prerequis...
Read more

Automating Disaster Recovery Using Terraform & CI/CD on AWS

Introduction Hey everyone! 👋 I recently worked on a project where I automated disaster recovery (DR) on AWS using Terraform and CI/CD pipelines . Initially, I had no idea how to set up a proper DR solution, but after diving deep into AWS services and Terraform, I was able to create a fully automated system that recovers from failures without manual intervention . I thought it would be a great idea to document the entire process in this blog so that others (especially students like me) can learn how to build a similar system. If you're new to Terraform, AWS, or CI/CD, don't worry—I’ll explain everything in simple terms . 📌 What will you learn? How to automate disaster recovery on AWS Setting up EC2, RDS, S3, CloudWatch , and more Using Terraform to manage infrastructure as code Implementing CI/CD pipelines for automatic deployment How to test the DR system and make sure it actually works 🔗 GitHub Repository : Disaster Recovery CI/CD Why Do We Need Disaster...
Read more

Automating Frontend Deployment with GitHub Actions: A CI/CD Pipeline for AWS S3

Image
As I continue my journey through the Cloud Resume Challenge , I’ve completed the first two phases where I deployed my portfolio website using AWS services like S3 and CloudFront and integrated a dynamic view counter with Lambda and DynamoDB . In this phase, I’ve implemented Continuous Integration/Continuous Deployment (CI/CD) using GitHub Actions to automate the deployment of my website every time I push updates to the repository. This ensures that my website is always live with the latest changes without manual intervention.
Read more