Angular
Hosting Static Websites on Amazon S3 - Optimizing Website Security and Performance
  •  

Updating Content

PRO
Outline

Remember how we used aws s3 sync to copy all our HTML files to our S3 bucket? Well, the sync command is obviously short for "synchronize" and that means that, more than just a file copy tool, it's primary goal is to bring a local file system into a matching state with the contents of a remote S3 bucket.

So if any files have been added or changed since a previous sync operation, running sync again will add what's new and overwrite what's been changed. Let me show you how that works.

Here's the directory containing our HTML files. I'll make a simple edit to the index.html file that'll be easily visible when we visit the site. Now it's a "fancy NEW site"! Next, I'll simply run the very same sync command we ran earlier, specifying once again that what we're uploading should be publicly readable and that we're referring to this particular AWS account.

aws s3 sync . s3://mysite.thedataproject.net --acl public-read --profile bootstrap

But there is still one more step. You see, since CloudFront caches images of our files at their global edge locations, it might be hours before those caches are updated. If you want your users to get instant access to your newest update, you'll need to force CloudFront to flush their cache and make fresh requests to the origin S3 bucket.

How do we force CloudFront to flush the cache? By creating an invalidation. But before we can do that, we'll need the distribution ID. For that, I'll run a list-distributions command. There's a lot of output here, but you could either filter for the specific distribution you're after, or just scroll back up until you find it. Once you're sure you've got the right one, copy the ID. Then simply paste the ID into your invalidation command - which will look like this.

aws cloudfront list-distributions --profile bootstrap
aws cloudfront create-invalidation \
   --distribution-id E349BSG9XP3JW \
   --paths "/*" \
   --profile bootstrap

That sure seemed to work. Let's head over to the browser to make sure. I'll refresh the page and...yup! We're on the very latest, cutting-edge version of our website. Success!

For more complicated sites, you can integrate Git repos with S3, where Git commits can automatically trigger pushes from GitHub directly to S3. That's way beyond the scope of this course, but there's all kinds of great documentation around the web that can get you started