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.

https://cdn.brianmorrison.me/media/2021/1448c564-3889-4e83-989f-04a03fe9ad0e

https://cdn.brianmorrison.me/media/2021/37621c3a-1836-43d0-bf74-37ef43142540

https://cdn.brianmorrison.me/media/2021/e29d898f-86d3-4ede-b05b-fd1a35dd78ac

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.

https://cdn.brianmorrison.me/media/2021/772c7a58-c153-4734-af58-8fb5b5d2ab65

https://cdn.brianmorrison.me/media/2021/34db7b71-a86f-4f78-9245-4c95b3431faa

https://cdn.brianmorrison.me/media/2021/5b1236f0-7713-44b6-bbd8-170c84302e7b

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.

https://cdn.brianmorrison.me/media/2021/c446072b-0c58-4cee-993e-97581d1b0b6d

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!

https://cdn.brianmorrison.me/media/2021/779627a8-f12f-402e-a390-4dc4acb89da8

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!