In the previous article of the series, we uploaded a Vue To Do app to AWS S3. Today, we'll learn how to CloudFront to optimize performance of our app. This tutorial can be applied to any S3 bucket though, the process is actually the same.
What is CloudFront
CloudFront is AWS's Content Distribution Network (or CDN). The purpose is to distribute your app or website to the 200+ distribution points around the world. When a user requests your content, AWS will serve it from the closest distribution point to the user, which results in quicker load times.
Connecting CloudFront to S3
Lets start by opening CloudFront in the AWS Console. Once there, click Create Distribution. Select Get Started under Web if it asks.
You'll be presented with a form to complete at this point. Normally you'd need to specify a URL for your Origin (or where your content is originally stored at), but CloudFront integrates nicely with S3 so when you click that box, it will show your current buckets. Select the S3 bucket you wish to publish. Set Viewer Protocol Policy it to Redirect HTTP to HTTPS, then scroll down and set Default Root Object to index.html. Finally, click Create Distribution.
You'll be brought back into your list of CloudFront Distributions. It takes a while for AWS to distribute your content, so wait until the Status shows Deployed.
Now of we copy the Domain Name listed in the table and paste that into a new tab in our browser, we should see our app again!
In the last article of this series, I'll cover how you can use GitHub actions to automate this process every time changes to your code are made!