Introduction
In this project, I built and deployed a React website hosted on AWS S3, with Amazon CloudFront as a content delivery network (CDN) to improve performance and ensure global availability. Terraform was used for infrastructure as code, and GitHub Actions handled the automation of the deployment process. This documentation walks you through the setup, the structure of the project, and how the various components work together to achieve a seamless deployment pipeline. The source code is available on github. The project structure includes three primary folders: terraform for infrastructure, website for the React application, and .github for the deployment workflow.
Click here for Github Code
Click here to view live website
React Website
The React website is a simple application created using Vite, a modern build tool that has gained popularity for its fast build speeds and developer-friendly features. Unlike Create React App (CRA), which has been the go-to option for React applications, Vite is actively maintained and offers better performance. As CRA is no longer maintained as of a certain date, I chose Vite to future-proof the application.
The website folder contains the React application code, which was generated using the vite command below
npm create vite@latest website -- --template react
After generating the react code, Terraform is used to develop the AWS infrastructure to host the website. AWS S3 was used as the primary storage and hosting solution for the static files of the React application. Additionally, Amazon CloudFront was configured as a content delivery network (CDN) to enhance performance by caching these assets at edge locations globally, reducing latency for end users.
The infrastructure for this project is managed entirely using Terraform. The terraform folder is organized into modular components, with each module serving a specific purpose. These modules are housed in the modules folder, and the main Terraform configuration files in the root folder bring everything together. Here’s an explanation of each module and its role:
Remote Backend: The remote_backend module sets up the infrastructure needed to store and manage the Terraform state. This includes creating an S3 bucket for storing the state file and a DynamoDB table for state locking. Additionally, the module creates an IAM user with the AdministratorAccess policy attached to ensure Terraform has the necessary permissions to deploy resources. While attaching AdministratorAccess simplifies permissions management during development, it is not recommended for production-scale applications due to the potential security risks.
S3 Website: The s3_website module provisions an S3 bucket configured for static website hosting. It enables versioning on the bucket, sets up website-specific configurations (such as specifying index.html as the entry point), and allows public access through a bucket policy.
S3 + CloudFront: The s3_cloudfront module sets up a CloudFront distribution to serve the website by caching the website’s files at edge locations worldwide, reducing latency for users. It also configures an Origin Access Control (OAC) to allow CloudFront to securely access the S3 bucket.
GitHub Actions Workflow
The deployment process is automated using GitHub Actions, with the workflow defined in .github/workflows/deploy.yaml. This workflow is triggered whenever changes are pushed to the main branch and consists of three jobs.
The first job, "Terraform," handles the deployment of the AWS infrastructure. The second job, "Sync_S3," builds the React application and uploads the production files to the S3 bucket. The final job, "Invalidate_CloudFront," invalidates the CloudFront cache to ensure that users see the latest version of the website.
Conclusion
This project demonstrates how to build and deploy a React website using AWS S3, CloudFront, Terraform, and GitHub Actions. The setup ensures scalability, global performance, and automation, with S3 hosting the app, CloudFront improving delivery speed, and Terraform simplifying infrastructure management. While the workflow securely uses GitHub Secrets for sensitive credentials, configurations like AdministratorAccess should be refined for production environments.
