Mr. Editor-in-chief Mr. Editor-in-chief • October 1, 2023 • Updated April 24, 2026

Deploy React to CloudFront with Custom Domain & SSL Certificate

1. Bundles the react app into static files for production

yarn build
# You will find a folder named dist inside the react project now.

2. Create a Amazon S3 bucket with all the default settings
3. Upload all the files inside dist directory into the bucket
4. Create a CloudFront distribution 

- You will choose something like [bukect-name].s3.ap-northeast-1.amazonaws.com for `Origin domain`  
- Under `Origin access`, choose `Legacy access identities`, then `Create new OAI` and `Yes, update the bucket policy`  
- Under `Viewer`, choose `Redirect HTTP to HTTPS` and `GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE`
- Add your domain name under `Alternate domain name (CNAME) - optional`
- Under `Custom SSL certificate - optional`, `Request certificate`
    - Create a AWS Route 53 hosted zone
    - Validate domain ownership with CNAME
    - connect a registered domain name to your Route 53 hosted zone with Custom DNS setup
    - `Create records in Route 53`, this might be optional
- Choose your newly acquired ACM certificate under `Custom SSL certificate - optional` 
- Under `Default root object - optional`, fill in `/index.html`

5. Create record for the newly-created CloudFront distribution

Value/Route traffic to Alias to CloudFront distribution
6. Create error page response for the CloudFront distribution

HTTP error code: 403: Forbidden
Customize error response: Yes
Response page path: /index.html
HTTP Response code: 200: OK

References

AWS Route 53 Domain Name
Deploy React App to CloudFront with HTTPS Custom Domain

← Back