Watching: Redeploying Our Static Site & Invalidating the Cache

From: Serverless for Frontend Developers

Creating a CloudFront Distribution

Adding a DynamoDB Table

To make the most of this tutorial series,  create a Serverless Framework PRO account for free

Lesson Info

In this video, you'll see how to make changes in your website and then invalidate the CloudFront cache so they appear live on your website.


So back over here in my text editor. I've gone ahead and loaded up that index.html file one more time. Let's see how we can change the content of our website and then clear the cache to actually have the new content available. So over here I'm going to change hello, serverless to hello again serverless. And then I'm going to save this file here.

After I've done that, I can make sure that I'm inside the right directory to deploy this out so it looks like currently I actually need to be in my project folder here and inside of there I see the serverless.yml file and this means that I can run any of the serverless commands and the serverless command for the plugin and it should work properly. I'm going to go ahead and run serverless client deploy one more time.

This should take the updated index.html and send it over to S3 right after I hit yes and click enter. Then once this is done, I should be able to click on this link and open it up in my browser and confirm that it has changed. Now you see on this static website and just point it currently says hello against serverless.

However, if I go back to serverless jams and try refreshing the page a few times, you'll notice that it's not changing. Well, this is because we also have to clear the cache for the CloudFront distribution in order to get the most recent version of the site.

There is a few different ways to do that. You could set up a deploy time script that deployed using serverless Finch and then cleared the cache using some command line options locally to clear the CloudFront distribution cache and validate all the files.

You could also set up a more complicated workflow to invalidate the cash for files that you knew might be changing when viewers are going to your website. In order to invalidate the entire CloudFront distribution, we can go back to the AWS console and we can click in on our CloudFront distribution.

We have some distribution settings we could change around for our distribution and over here on the second to last tab, we have the invalidation section. So what we'll be doing, we'll be creating an invalidation for our distribution. In order to do this, we need to set a path related to the objects for distribution.

If we had a more complex site and we wanted to invalidate the cache for particular parts of that site, then we could do that with these object paths here, but because in this case, I know I really just want to invalidate the index.html file., I could either type that in here directly or I could say that because I only have the index.html file, I want to invalidate the entire site with the slash in the asterisks there.

So I'm going to go ahead and do that here and then click invalidate. Now it might take a while for this invalidation to happen and as your site grows in size, this could grow in the length of time it does take to invalidate every file in all of the CloudFront distribution locations throughout the world. But after waiting for a little while, you should be able to go back to your actual custom domain name here and then refresh the page and eventually see it change to the updated version.

This happened pretty quickly for me and now we see hello again, serverless instead of just hello serverless. If we wanted to do this from either the command line or Python or JavaScript, we could go and use the SDKs for those two different languages or look at the AWS CLI and run the equivalent commands to take this exact action here to create an invalidation for CloudFront.

If that's something you're interested in, you can definitely leave a comment below. However, if you're using something like Serverless Framework components, much of this is already taken care of for you, not just the CloudFront distribution section, but also creating the ACM certificate and configuring your DNS settings in Route 53 so that's all the basic setup you need for doing simple updates to your website and starting to work with all these different services inside of AWS.

Hopefully this makes more sense about what each service does and how they work together to give you your final website here, that is on a custom domain with an HTTPS certificate. In the next videos, we'll start to iterate on our website and make it a bit more of a complicated frontend application that works with some backend APIs to manipulate data and show it all to the users. So stay tuned for all of that. If it's something that you'd like to learn.

Get updated when a new course is released