Deploy scalable website on AWS CloudFront

Build a static web app using this tech stack.

i. Static web hosting using AWS S3

• Create an S3 bucket named exactly after the domain name, for example website.com.
• In Properties, click the Static Website section.
• Click Use this bucket to host a website and enter index.html into Index Document field.
• Don’t enter anything else in this form.
• This will create an “endpoint” on the same screen similar to http://website.com.s3-website-us-east-1.amazonaws.com.
• Then click on Permissions tab, then Bucket Policy. Enter this policy:

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::BUCKET_NAME/*"
        }
    ]
}

Be sure to replace BUCKET_NAME with yours.

Note: Naming the bucket doesn’t have to be exactly the domain name. I read that in several articles that it needed to be, but it doesn’t. If using wildcard domains with AWS, I’ve read that we can’t have dots in the domain name when using wildcard domains. So just know that you can name the bucket whatever, but using dots does work if not using wildcard domains

Uploading an index.html should allow us to visit the "endpoint"

ii. CloudFront configurations AWS S3

• Go to the CloudFront section and click Create Distribution and then create for Web, not RTMP.
• In Origin Domain Name, paste the “endpoint” previously created in S3 (without the http:// part). Note that when you click on this field it will act like a dropdown with options to your existing buckets. I think you can just select one of those two which is a valid list of your S3 buckets.
• The order of these instructions assume SSL certificates are not setup yet. So don’t do anything with settings regarding SSL
• Select “yes” for Compress Objects Automatically.
• In Alternate Domain Names (CNAMEs), put the domain names which you want to correspond to this bucket. Put each on their own line OR separated by comma. The reason why you may have two or more is something like this: mywebsite.com and www.mywebsite.com. The field is called "Alternative Domain Names" because AWS will have an aws-specific domain name for the CDN, but you don't want to use that so you'll want to put in your custom domains and then use Route 53 (next section) to point domains to the CDN.
• In Default Root Object, type index.html.
• Create. The next screen will show distributions in table form, the one we just made will be “in progress” for a few minutes

The distribution will have a domain name like dpo155j0y52ps.cloudfront.net. This is important for DNS (see below). So copy it somehwere.

iii. AWS Certificate Manager

In the AWS Console, go to Certificate Manager and request a cert for domain and all sub domains. We will be required to verify certificate via email or DNS.

If you choose to verify via DNS, AWS will ask you to add some CNAME records to your Route 53 DNS, but the nice thing is that there is a shortcut button to do so (for each domain and sub domain) from within the Certificate Manager section.

After the verification is done and the cert is “issued”, we can go back into CloudFont to edit our distribution for this domain:

• Click the distribution and on the next page (in the General tab), click Edit
• Check the box for Custom SSL Certificate
• Select our cert and save. Note that what looks like a text field is really a dropdown menu once you click it to choose your certificate
• When done with the form, click the Behaviors tab and edit the only record that should be there
• Select Redirect HTTP to HTTPS. Click Save

CloudFront Error pages configs

CloudFront Root config

AWS S3 configurations

iv. GoDaddy Configuration

AWS will get to work on creating your new distribution. While we wait, we will set up our DNS hosting provider (I’ll use GoDaddy) to point to our CloudFront domain name. Copy your CloudFront domain name and head over to your DNS hosting provider’s website.

Set your CNAME entry to point to your CloudFront domain name within your DNS hosting provider’s configuration console. Make sure to save all your changes. You’ll also want to set up your DNS hosting provider to forward your named domain name to your www prefixed domain name. This process will depend on your DNS host, in GoDaddy’s case, you add an entry under “Domain” in the “Forwarding” section set to http://www.yourdomain.com

Now…we wait. We need to wait for CloudFront to finish its deployment and for our DNS hosting provider to update its entries. I suggest clearing your browser cache and then taking a 10–20 minute break while everything finishes up. Once CloudFront has finished deploying, you will be able to enter your CloudFront domain name (e.g. dt45cw1j5fw74.cloudfront.net) and you will reach your website, automatically redirected to be served over HTTPS. More importantly, once your DNS hosting provider has finished updating its entries, you will be able to enter your domain name (www prefixed or naked) and you will automatically redirected and served over HTTPS through CloudFront!

References to follow
1. https://lucasfsantos.com/posts/deploy-react-angular-cloudfront/

2. https://aws.amazon.com/premiumsupport/knowledge-center/resolve-cloudfront-bad-request-error/