The objective of this document is to guide users through the process of adding a custom domain to an AWS S3 bucket, including steps for creating the bucket, setting up static website hosting, configuring CloudFront for content delivery, requesting an SSL certificate, and updating DNS settings.

Step 1: Create an S3 Bucket

1. Create a new S3 bucket:
   • The bucket name should match your domain name (e.g., www.example.com).
   • Go to the S3 service in the AWS Management Console.
   • Click on Create bucket.
   • Enter the bucket name and choose the region.
   • Configure other settings as needed and create the bucket.
2. Enable static website hosting:
   • Go to your S3 bucket in the AWS Management Console.
   • Click on the Properties tab.
   • Click on Static website hosting.
   • Select Use this bucket to host a website.
   • Enter the index document (e.g., index.html) and the error document (e.g., error.html use index.html for SPA) .
   • Save the changes.
3. Upload your website content:
   • Upload your static website files (HTML, CSS, JS, etc.) or React Build to the S3 bucket.

Step 2: Set Bucket Policy for Public Access

1. Set a bucket policy to make your bucket contents publicly accessible:

   • Go to the Permissions tab in your S3 bucket.
   • Click on Bucket Policy and add the following policy, replacing YOUR-BUCKET-NAME with your actual bucket name:

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
           }
       ]
   }
   

Step 3: Set Up a CloudFront Distribution

1. Request an SSL Certificate: (Takes Time)

   • Go to the AWS Certificate Manager (ACM) in the AWS Management Console.
   • Request a public certificate for your domain (e.g., www.example.com).
   • Follow the validation steps provided by ACM (either DNS or email validation).

   <aside> 💡 In CNAME record use only _a79865eas4cd1a6ewf90a45779b4e0b96**.api** CNAME instead of _a79865eas4cd1a6ewf90a45779b4e0b96**.api.example.com.** for faster approval

   </aside>

2. Create a CloudFront distribution:

   • Go to the CloudFront service in the AWS Management Console.

   • Click Create Distribution.

   • Choose Web.

   • In the Origin Domain Name,

     For S3

     • Enter your S3 bucket’s website endpoint (e.g., YOUR-BUCKET-NAME.s3-website-us-east-1.amazonaws.com).

     For EC2:

     • Go to the EC2 service in the AWS Management Console.
     • Select your running instance.
     • In the Description tab, find the Public IPv4 DNS.
     • Copy the Public IPv4 domain name to be used it.

   • Configure the distribution settings:

     • Viewer Protocol Policy: Redirect HTTP to HTTPS.

     • Allowed HTTP Methods:

       • For S3
         • GET, HEAD.

       For EC2:

       • GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE

   • Under Distribution Settings:

     • Alternate Domain Names (CNAMEs): Enter your custom domain (e.g., www.example.com).
     • SSL Certificate: Choose Custom SSL Certificate and select the certificate you requested from ACM.

   • Save and create the distribution.

Step 4: Update DNS Settings

1. Update DNS records at your domain registrar:
   • Create a CNAME record pointing your custom domain to your CloudFront distribution’s domain name (e.g., d1234567890.cloudfront.net).
   • If your domain is managed via Route 53, you can create an Alias record instead of a CNAME record.

Step 5: Verify and Test

1. Propagation: Allow some time for DNS changes to propagate (can take up to 24-48 hours, but usually quicker).