Mr. Editor-in-chief 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: ForbiddenCustomize error response: YesResponse page path: /index.htmlHTTP Response code: 200: OK
References
AWS Route 53 Domain Name
Deploy React App to CloudFront with HTTPS Custom Domain
Share this post
Related Posts
The Evolution of Infrastructure Management
The evolution of infrastructure management goes from clicking in the cloud console to AI-assisted operations.
Setting Up The AWS CLI
AWS CLI setup guide: Linux installation via curl, version verification, IAM user credentials and access keys.
AWS Certified Solutions Architect – Associate Certification Quiz 6
Cost-effective static website hosting on S3: CloudFront CDN for global users to minimize data transfer costs.
AWS Certified Solutions Architect – Associate Certification Quiz 5
Data lake value proposition: ingest and store data for future processing, supporting unstructured and structured data.