React App CI/CD Deployment on S3 with Custom Domain & HTTPS using Route 53 + CloudFront 🔒

How to Add a Custom Domain and HTTPS to Your React App on AWS S3 using Route 53 and CloudFront

Build this hands-on demo step by step with my detailed tutorial on Julien Muke YouTube. Feel free to subscribe 🔔!

🚨 Tutorial

This repository contains the steps corresponding to an in-depth tutorial available on my YouTube channel, Julien Muke.

If you prefer visual learning, this is the perfect resource for you. Follow my tutorial to learn how to build projects like these step-by-step in a beginner-friendly manner!

🤖 Introduction

This project builds upon Part 1: CI/CD Pipeline for React App on AWS by securing the deployed app with a custom domain and SSL/TLS encryption using AWS Route 53, CloudFront, and ACM.

🌐 Features

• Custom domain (e.g., www.myapp.com)
• HTTPS with free SSL certificate (via ACM)
• CDN caching and speed boost (via CloudFront)
• DNS routing with Route 53

🧰 AWS Services Used

• Amazon S3 (static site hosting)
• AWS CodePipeline (CI/CD)
• AWS Certificate Manager (SSL/TLS)
• Amazon CloudFront (CDN + HTTPS)
• Amazon Route 53 (DNS)

✅ Prerequisites

Before you begin, ensure you have the following set up:

• Working S3 React app from Part 1
• Domain registered (Route 53 preferred)
• AWS CLI configured

🚀 Setup Steps

1. Request an SSL Certificate in ACM (us-east-1)
   
2. Create a CloudFront Distribution pointing to your S3 endpoint
   
3. Configure Route 53 to route your domain to CloudFront
   
4. 🎉 Done! Your React app is now live with HTTPS and a custom domain!
   

📺 Video Tutorial

Check out the full video tutorial here 👉 [YouTube Link]

📬 Feedback

Found it helpful? Star ⭐ the repo and share with your friends! Issues or bugs? Open an issue or reach out on LinkedIn.

🗑️ Cleaning Up

When you are finished with the project, you can delete all the created AWS resources to avoid incurring further costs.