Invalidating cache for backbone index.html on CloudFront

Question

I'm pointing a CloudFront distribution to my BackboneJS app. This includes index.html, master.css, master.js.

Steps:

1. Append ?v=ID to css & js links within index.html
2. Deploy index.html, css, js files to origin server.
3. Invalidate index.html file @ CloudFront
4. Wait for CF to grab new index.html file from server and load the newly versioned assets.

When I deploy, I can bust the master.css and master.js cache by applying a new querystring within the index file. Unfortunately the index.html file cache has to be manually invalidated - a process which Amazon says can take 10-15minutes.

Any tips to instantly change index.html file to latest version on CF?

Thank you!

Answer 1

From personal experience I can tell you CloudFront invalidations don't take that long. Because your users may leave your page open for a long time, you need to deal with multiple versions of your application running at the same time anyway.

Here's a Bash script to invalidate using the AWS CLI and wait for the invalidation to propagate:

# Invalidates the CloudFront cache,
# waits for invalidation to be propagated.
function invalidate_cache() {
  local invalidation
  local invalidation_id
  local distribution_id=$1
  local status=""

  invalidation=$(aws cloudfront create-invalidation --distribution-id "$distribution_id" --paths '/*')
  invalidation_id=$(jq -r .Invalidation.Id <<< "$invalidation")

  while [[ $status != "Completed" ]]; do
    echo "Waiting for CloudFront invalidation to complete..."
    sleep 1
    status=$(aws cloudfront get-invalidation --distribution-id "$distribution_id" --id "$invalidation_id"| jq -r .Invalidation.Status)
  done
}

If for some reason you always want to make sure index.html is fresh, then simply have CloudFront not cache it at all. You can create a specific CloudFront behavior for /index.html and override the time-to-live to zero.

Answer 2

Invalidating cloudfront cache is not a time taking process. It does not take too long. You can have multiple ways to keep a watch on the invalidation status though.

You could also have a lambda function updating your downstream component/system once the cloudfront has finished invalidating the cache.

That being said, if is a necessity to have index.html updated in real time, you could choose to not include it as a part of cloudfront cache. You may want to setup that in the behavior setting of cloudfront. TTL can be set to 0.