My Cloud Resume Challenge Journey

Building a Serverless Portfolio Website

My Cloud Resume Challenge Journey

The Cloud Resume Challenge by Forrest Brazeal pushes participants to build a complete portfolio website entirely within the AWS ecosystem. By building a real-world application, the challenge helps you gain hands-on experience with various AWS services and DevOps practices, making it an invaluable learning experience for aspiring cloud professionals

In this blog post, I'll share my journey through the Cloud Resume Challenge, detailing the process of building a serverless portfolio website with a visitor counter functionality. We'll explore the technologies used, the challenges encountered, and the valuable knowledge gained along the way.

Building the Front-end Application

Frontend architecture diagram

The foundation of my portfolio website is a React.Js application (SPA) built with Vite. This application serves as the user interface, showcasing my projects, skills, and experiences in an interactive format.

For deployment, I have used AWS S3 Static Site Hosting. This service allows me to upload the static build files of the app to an S3 bucket configured for website hosting, making it publicly accessible through a unique S3 endpoint URL. To further enhance performance, I implemented a CloudFront distribution in front of the S3 bucket. CloudFront acts as a content delivery network (CDN), caching static content across geographically distributed edge locations. This reduces latency and ensures a faster loading website.

For domain name resolution, I utilised Hostinger to manage the Domain Name System (DNS) configuration for my website (vishnuverse.xyz). Hostinger directs web traffic to the CloudFront distribution associated with the S3 bucket, ensuring users always land on the intended page. Finally, to establish a secure connection between users' browsers and the website, I setupd an SSL/TLS certificate obtained from AWS Certificate Manager in N. Virginia region. This enables HTTPS encryption for all communication and enhancing overall website security.

Building the Serverless API

A crucial aspect of this challenge is the visitor counter functionality. To achieve this, I built a serverless API using AWS Lambda and DynamoDB. The API consists of two Lambda functions written in Node.js:

  • UpdateVisitCount: This function is responsible for both updating the total visitor count and returning the updated value.

  • UpdateVisitCount (Preflight): This function ensures that requests made to the UpdateVisitCount API have the appropriate CORS headers set for proper cross-origin communication.

For infrastructure provisioning and management, I opted for Terraform. Terraform is an Infrastructure as Code (IaC) tool that allows me to define and manage all the infrastructure resources on AWS in a declarative manner. This approach promotes maintainability, repeatability, and version control for my infrastructure configurations.

To automate the build, testing, and deployment processes, I implemented a CI/CD pipeline using GitHub Actions. This pipeline is triggered whenever there's a push to the main branch of my Git repository. The workflow retrieves the code, installs dependencies, configures AWS credentials securely, builds the React application, synchronizes the built files to the S3 bucket, and finally invalidates the CloudFront cache to ensure users always receive the latest version.

The Learning Curve

The challenge helped me with hands-on experiencing various aspects of cloud ecosystem:

  • Understanding Serverless Architecture: Building a serverless API with Lambda functions provided valuable insights into the benefits and considerations of serverless computing.

  • Infrastructure as Code: Terraform simplified infrastructure management, allowing me to define and provision resources in a structured and version-controlled way.

  • CI/CD Practices: Implementing a CI/CD pipeline using GitHub Actions streamlined the deployment process, minimizing manual intervention and ensuring consistent deployments.

  • AWS Services Integration: The challenge encouraged me to explore and integrate various AWS services like S3, CloudFront, DynamoDB, API Gateway, and CloudWatch, gaining a broader understanding of the AWS cloud platform.

Future Scope

While the current implementation provides a solid foundation while keeping the resources cost effective, but there's room for further improvements such as:

  • Enhanced Security: Presently, the resources reside in a public subnet. For increased security, I can deploy them within a private subnet of a VPC. This restricts access to the resources only through authorized channels.

  • High Availability: The current setup doesn't leverage multiple Availability Zones for redundancy. Deploying resources across different AZs ensures service continuity even if one AZ encounters an outage.

  • Improved CI/CD with Unit Testing for Client App: Integrating unit testing frameworks like Jest into the CI/CD pipeline would allow for automated testing of the React components, preventing regressions during development.

  • Advanced CI/CD Practices: Incorporating additional CI/CD practices like code linters and static code analysis tools like SonarQube can further enhance code quality and identify potential issues early in the development process.

Summary

This Cloud Resume Challenge has been a rewarding experience, allowing me to build a dynamic portfolio website for my resume, and more importantly gave me an introduction to serverless architecture, and gain valuable exposure to DevOps practices. I'm excited to continue learning and explore more advanced cloud solutions in the future!