The Architecture
Introduction
Continuous Integration and Continuous Deployment (CI/CD) are core practices that enable agile development teams to deliver applications rapidly, reliably, and at scale. For modern web applications built with React, automating the build, test, and deployment process ensures faster feedback and reduces the risk of errors in production.
In this hands-on tutorial, we’ll walk through how to deploy a React application using AWS’s native CI/CD services: CodePipeline, CodeBuild, and CodeDeploy. We’ll leverage GitHub as our source repository and use other foundational AWS services like EC2, Auto Scaling, and S3 to make the entire pipeline robust, scalable, and easy to maintain.
Whether you’re just getting started with AWS CI/CD or want to see how to build an end-to-end pipeline with practical details, this guide will take you step-by-step through the process, complete with real commands, AWS console workflows, and YAML configurations.
Why AWS for CI/CD?
AWS provides a fully managed suite of developer tools that tightly integrate with other AWS services, giving you deep control over the deployment infrastructure with less operational overhead. Key benefits include:
- Seamless integration with popular VCS providers like GitHub.
- Managed build environments via CodeBuild with support for multiple runtimes.
- Automated deployments with CodeDeploy that support blue/green and rolling updates.
- Scalable compute infrastructure with EC2 and Auto Scaling.
- Artifact storage with S3 for built assets.
With this setup, you don’t need to manage your own CI/CD servers or scripts—instead, you focus on the app and deploy process logic.
Project Setup: From React App to GitHub
We started by cloning a simple React app to our local environment:
git clone https://github.com/OjoOluwagbenga700/react-webapp-cicd-pipeline.git
cd react-webapp-cicd-pipeline
Next, i cd’d to the project folder on my Vs Code and ran this command to remove git from the project folder
git remote remove origin
Next, I went back to my Github and created a repo for the project and named it react-deploy
Went back to my VsCode and ran these set of commands copied from Github
echo "# react-deploy" >> README.md
git init
git add README.md
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/patty6339/react-deploy.git
git push -u origin main
What the command above did:
It created a README file and wrote react-deploy to it, initialized the project folder as a git
repo, added the created README file and committed it to branch main, set the destination of
the push to the repo I created on Github and pushed the files.
The Outcome
AWS Preparation: Core Files and Roles
Two essential files must be in the root of your project:
- appspec.yml – Instructions for AWS CodeDeploy on how to deploy the app to EC2.
- buildspec.yml – Build settings for AWS CodeBuild to compile and package the React app.
appspec.yml
This file tells CodeDeploy how to handle application deployment lifecycle events, like where to place files and which scripts to execute at each step:
version: 0.0
os: linux
files:
source: /app/dist
destination: /var/www/html/
hooks:
BeforeInstall:
location: scripts/before_install.sh
timeout: 300
runas: root
AfterInstall:
location: scripts/after_install.sh
timeout: 300
runas: root
ApplicationStart:
location: scripts/start_application.sh
timeout: 300
runas: root
buildspec.yml
This YAML defines the build phases and artifacts for CodeBuild:
version: 0.2
phases:
install:
runtime-versions:
nodejs: 20
commands:
- cd ./app
- npm install
build:
commands:
- npm run build
artifacts:
files:
- 'app/dist/**/*'
- 'appspec.yml'
- 'scripts/**/*'
discard-paths: no
name: 'app.zip'
Note: The artifacts section ensures the appropriate files, including the built React output and deployment scripts, are zipped and passed to the deployment stage.
AWS Console Setup: Roles, Launch Template, and Auto Scaling
Before creating the pipeline, we set up the supporting infrastructure:
IAM Roles
Two roles were created to grant permissions:
- ec2codedeploy-role — assigned to EC2 instances for CodeDeploy agent permissions.
- codedeployrole — for the CodeDeploy service with permissions to manage deployments.
Launch Template for EC2 Instances
A launch template defines EC2 instance configurations, ensuring instances launched in Auto Scaling groups have consistent settings.
We then added User Data scripts to automatically install and start the CodeDeploy agent on instance startup:
#!/bin/bash
sudo apt update -y
sudo apt install ruby-full -y
cd /home/ubuntu
wget https://aws-codedeploy-us-east-1.s3.us-east-1.amazonaws.com/latest/install
chmod +x ./install
./install auto
sudo systemctl start codedeploy-agent
This makes sure all instances are ready for deployments once launched.
Auto Scaling Group
We created an Auto Scaling group using the launch template with 2 EC2 instances initially.
To handle incoming traffic load effectively, we also provisioned an Application Load Balancer (ALB) to distribute traffic to the instances.
S3 Bucket for Artifacts Storage
An S3 bucket named react-bucket6339 was created to store the build artifacts generated by CodeBuild and used by CodeDeploy for deployments.
Building the Pipeline: Source, Build, and Deploy Stages
Step 1: Connect GitHub as Source
In AWS CodePipeline, we connected to the GitHub repository patty6339/react-deploy using an AWS-managed GitHub App to securely access the repo.
Step 2: Add Build Stage with CodeBuild
CodeBuild uses our buildspec.yml to build the React app. The build logs confirmed successful installation, build, and artifact upload:
- Node.js 20 installed.
- Running npm install and npm run build inside the app directory.
- Artifacts zipped into app.zip.
Step 3: Add Deploy Stage with CodeDeploy
Created a CodeDeploy application and deployment group linked to the Auto Scaling group and attached target group from the ALB.
Enabled load balancing to ensure zero downtime deployments, where traffic is blocked during deployment then allowed after success. Also checked to ensure that the codedeploy agent was successfully installed and running in the instances.
Pipeline Execution and Testing
After setting up the pipeline, we tested it by making a minor update to the React app’s displayed message:
- Changed the message in the feature branch.
- Pushed changes and created a Pull Request (PR).
- Merged to main branch.
CodePipeline automatically detected the change, pulled the latest code, built it, and deployed it to the EC2 instances behind the ALB.
Initial message
The live app updated successfully, reachable via the Load Balancer URL, confirming that the entire CI/CD process works seamlessly.
Updated message
Key Takeaways and Best Practices
- Modular YAML configs like buildspec.yml and appspec.yml are critical for defining build and deployment workflows.
- User Data scripts in EC2 launch templates ensure your instances are deployment-ready with the required agents.
- Auto Scaling + ALB integration provides a scalable, highly available infrastructure to serve your app.
- GitHub integration through AWS managed apps simplifies secure code source management.
- Automate testing through pipeline stages helps catch problems early and ensures the delivery pipeline is bulletproof.
Conclusion
This hands-on demo showcased building a modern AWS-hosted CI/CD pipeline for a React application using managed services like CodePipeline, CodeBuild, and CodeDeploy integrated with EC2 and Auto Scaling.
Automating the full path from code commit to live deployment allows teams to deliver features rapidly with confidence. AWS's native developer tools provide an ideal platform to build scalable pipelines removing the complexities of managing self-hosted CI/CD infrastructure.
Hopefully, this step-by-step guide gives you a clear blueprint to build your own React app deployment pipeline on AWS. Feel free to customize the build and deploy scripts to suit your app needs and scale your pipeline as your projects grow.
Happy coding and deploying with AWS!
Top comments (2)
Great Work !!!
Niiice!! Very detailed.