DevOps: Invalidating AWS CloudFront Cache during AWS CodeBuild

Let’s say you are using AWS CloudFront with AWS S3 to host a website. Then, let us assume that your DevOps process updates the website in S3 each time a new change is released. You may experience issues with caching where you do not see your latest changes immediately. One way to mitigate this issue is to invalidate the “Distribution” cache for CloudFront. In your buildspec.yml you’ll want a step that looks like this:

  post_build:
    commands:
      # Install new web application code by syncing files (and deleting destination files not in the source)
      - aws s3 sync dist s3://${BUCKET_NAME}/xyz-web/en/ --delete
      # Install jq
      - apt-get update && apt-get install -y curl jq
      # Find the distribution ID for the one with an alias which contains a common token in each environment
      - export DISTRIBUTION_ID=$(aws cloudfront list-distributions | jq -r '.DistributionList.Items | map(select(.Aliases.Items[]  | contains("web-applications"))) | .[].Id')
      # Invalidate Cache
      - echo "Invalidating CloudFront cache with Distribution ID:" ${DISTRIBUTION_ID}
      - aws cloudfront create-invalidation --distribution-id ${DISTRIBUTION_ID} --paths "/xyz-web/en/*"

In this setup, we are first syncing files from a build in a directory called dist to the required S3 bucket (DO NOT use copy if you want to take care of file deletions during builds). Then, we install a popular tool called JQ to make dealing with JSON from AWS APIs easier to deal with. We use this tool to find the “Distribution ID” associated with CloudFront that we want to have the cache invalidated for the CDN (you can obviously hardcode this step if you want, but if you have multiple websites this may be a more flexible approach. Lastly, we issue a command to invalidate the cache.