CI/CD Pipeline for
React App using
CodePipeline and S3
Abhishek Bhagat
Abhishek Bhagat
💡 Introducing Today’s Project!
What is CI/CD and AWS CodePipeline?
CI/CD stands for Continuous Integration and Continuous Delivery. AWS
CodePipeline is a fully managed continuous delivery service that helps
automate the build, test, and deploy phases of your release process.
🛠 How I Used AWS Services in This Project
• AWS CodePipeline: For automating build and deployment stages
• AWS CodeBuild: For installing dependencies and building the React
app
• Amazon S3: For static website hosting and storing build artifacts
😮 One Thing I Didn’t Expect…
Even with a proper buildspec.yml and CodePipeline setup, the S3 hosted
site initially returned a 403 Forbidden error due to incorrect permissions.
⏱ This Project Took Me…
- 30 minutes
Abhishek Bhagat
📦 Project Steps Breakdown
1. Created an S3 Bucket
• Enabled Static Website Hosting
• Configured permissions to allow public access
2. Created a GitHub Repo and Pushed the Code
Abhishek Bhagat
3. Added a buildspec.yml File
4. Set Up CodeBuild
• Used Node.js 18 runtime
• Connected to GitHub as the source
• Verified successful build with buildspec.yml
Abhishek Bhagat
5. Created a CodePipeline
• Source: GitHub
• Build: CodeBuild project
• Deploy: S3 Bucket (configured as static site)
❗ Issues Faced
• 403 Forbidden: Caused by missing public read permissions on the
S3 bucket
Abhishek Bhagat
Resolved by applying the following bucket policy:
✅ Final Outcome
Successfully deployed a React web app using CodePipeline. Any future
GitHub push now automatically triggers a pipeline to build and deploy the
latest code to S3!
