This document will cover the steps to host an angular website using AWS CloudFront.
1. S3 Permission
2. CDN Permission
3. AWS Certificate Manager Permission
1. Create an S3 bucket named webhost
a. Create Index.html with the following content
2. Configure the bucket for Web Hosting
a. Select the bucket
b. Select “Properties”
c. Select “Static web hosting”
i. For Index document enter index.html (Angular prod build generates index.html as the starting point for the website)
ii. For Error document enter error.html (create a file called error.html to show a custom error message when users access a wrong URL)
3. Set Bucket policy
There are two possible options
a. Make the bucket public
b. If a custom policy is set, then make the content of the bucket publicly accessible.
Refer to this document to set bucket policy
4. Create Cloudfront Distribution
a. Select services from the top menu
b. Select CloudFront
c. Select Create Distribution.
d. Select Get started under “Web”
Set “Origin Domain name” as the Endpoint of Static website hosting (Step No 2)
Compress Objects Automatically – Select “Yes” for a better performance
CNAME – website name. (Optional, use this for user-friendly website name)
If alternate domain is used, an ACM (AWS Certificate Manager) certificate has to be created
Refer to this document to create ACM.
In the above image, set the “Default Root Object” to index.html
5. Click “Create Distribution”.
6. Map CNAMEs and Domain in Route 53 or any other DNS provider.
7. Type your domain in the address bar of the browser. You should see the following result.