Optimise your frontend APP in S3 by connecting with AWS Cloudfront [part 5]

This post continues from my last post: Deploy app to AWS by using Serverless Framework [part 4]

Once you can access your photo album app from S3 bucket, the next step is connecting AWS CloudFront with S3 bucket.

What's CloudFront?

AWS CloudFront is a global content delivery network (CDN) that makes it easy to deliver websites, videos, apps, and APIs securely and at high speeds with low latency. You can use CloudFront to reduce latency by delivering data through 400+ globally dispersed Points of Presence (PoPs) and improve security with traffic encryption, access controls, and resiliency against DDoS attacks.

Create distribution

Origin

In this step, you only need to choose the S3 bucket you use for serving your photo album app.

Default cache behaviour

You basically can leave everything as default but I'd recommend using "HTTPS Only" for the viewer protocol policy. After all, we want to enforce a secure connection on our web app.

Web Application Firewall (WAF)

You can enable it or not, it's up to you. Once it's enabled, you will have an extra charge.

Settings

Leave everything as default unless you want to set up your domain name. If you don't use an Alternate domain name (CNAME) with CloudFront, then choose Create Distribution to complete the process. If you use a CNAME, then follow these additional steps before you create the distribution:

1. For Alternate Domain Names (CNAMEs), choose Add item, and then enter your alternate domain name.
2. For Custom SSL Certificate, choose the custom SSL certificate from the dropdown list that covers your CNAME to assign it to the distribution. Note: For more information on installing a certificate, see How do I configure my CloudFront distribution to use an SSL/TLS certificate?
3. Choose Create distribution. Note: After you choose Create distribution, it might take 20 or more minutes for your distribution to deploy.

Be sure to update the DNS for your domain to a CNAME record that points to the CloudFront distribution's provided domain. You can find your distribution's domain name in the CloudFront console.

In my demo, I don't use any customer domain name so I will leave these 2 input fields empty.

Once your distribution is deployed, you will need to go back to your S3 bucket permission setting and edit the bucket policy:

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "AllowCloudFrontServicePrincipal",
            "Effect": "Allow",
            "Principal": {
                "Service": "cloudfront.amazonaws.com"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::demo-quasar-photo-albums/*",
            "Condition": {
                "StringEquals": {
                    "AWS:SourceArn": "arn:aws:cloudfront::1xxxxxxxxxx:distribution/E1xxxxxxxxxx"
                }
            }
        },
        {
            "Sid": "Read permission for every object in a bucket",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::demo-quasar-photo-albums/*"
        }
    ]
}

After saving the bucket policy, you should be able to access your web app via the CDN endpoint.